Currently I'm using SVG for some animation and I want that when someone clicks on an image with SVG around it that it will start a download for that image.
<div class="box">
<svg width="100%" height="100%">
....
</svg>
<img src="chief.png" alt="Chief"/>
</div>
How do I change it so it starts a download on click?
Test this
<a href="http://www.w3.org/Graphics/SVG/">
<svg class="Orange" ... >
<use xlink:href="buttonB.svg#Root"/>
</svg>
</a>
and check this page > http://tavmjong.free.fr/SVG/BUTTON_TEST/button_test.html
When the SVG is wrapped with the anchor, a click event on the SVG will be sent up to the anchor. In this case that will trigger the download.
<div class="box">
<a href="chief.png" download="chief.png">
<svg width="100%" height="100%">
....
</svg>
</a>
</div>
Related
<a xlink:href="svg/agenda.jpg">
<rect id="agenda" class="cls-2" x="911.09" y="102.61" width="91.5" height="30"/>
</a>
The link need to be inserted using cordinates, because the page is basically a big image
thanks!
use below code to to display image.
<iframe frameborder="0" scrolling="no" width="100%" height="100%"
src="../svg/agenda.jpg" name="msg" id="msg">
<p>iframes are not supported by your browser.</p>
</iframe><br />
agenda image<br />
I'm using inline SVG ( as JSX ) on my website, I'm trying to display a hamburger menu button but it isn't showing up. Here is my code:
import Link from "next/link"
function Nav() {
return (
<nav>
<button > /// SVG is here
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-172 -12 210 50" stroke="#000000">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
<ul className="">
<li>
<Link href="/">
<a>Main</a>
</Link>
</li>
<li>
<Link href="/resume">
<a>Resume</a>
</Link>
</li>
<li>
<Link href="/projects">
<a>Projects</a>
</Link>
</li>
<li>
<Link href="/blog">
<a>Blog</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>Get in touch</a>
</Link>
</li>
</ul>
</nav>
);
}
export default Nav;
The Icon is only visible when it's outside the button tag, how do I view it while preserving the viewBox attribute?
In your case you need to adjust the viewBox for your svg element, that way when you set your svg's height and width, your svg scales properly and you get the desired result. Here's your code which I tweaked:
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 1 20 20" stroke="#000000" height="50px" width="50px">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
See it work on codepen here.
You can learn about how viewBox works at CSS tricks and MDN.
For example, in the HTML I have a id="section1"
and in the SVG I have an href="#section1" on a circle I can click. At the moment, this takes me to svgname.svg#section1 rather than htmlpagename.html#section1.
Any advice would be much appreciated!
Edit:
Circle in SVG that i've linked:
<a
id="a295"
class="js-scroll-trigger"
href="#portfolio">
<ellipse
onclick="#portfolio"
class="scroll-down"
fill="#ffffff"
fill-opacity="0"
id="path3905"
cx="726.10693"
cy="731.57501"
rx="24.696276"
ry="24.81061" /></a></svg>
How i've referenced it in HTML:
<embed class="nopadding scroll-down" src="img/homepagefinal7.svg"
style='width:100%;display: block;' />
where i want it to scroll to:
<section id="portfolio">
<div class="wow fadeIn container-fluid" style='font-family:"Baskerville"; margin: auto;'>
<!-- Portfolio -->
<div class="row">
...
...
...
thanks in advance for any help!
Please check this plunker:
https://plnkr.co/edit/jqPx9qpN3W1Jrix2axPw?p=preview
<div width="100px">
<svg width="100px" viewBox="0 0 100 100">
<a xlink:href="#" class="node">
<text transform="translate(50 50)">hh2</text>
</a>
</svg>
</div>
a:hover {
text-decoration: underline;
}
On chrome you will see an underline on hover, but on IE there is no underline. I tried solving with css without success.
In SVG text-underline behaves a little differently than in HTML.
In SVG, the specification states that it shouldn't inherit.
It appears Chrome and FF have relaxed that restriction.
To get around this in IE, just alter the CSS rule to include the text element.
a:focus text, a:hover text {
color: #23527c;
text-decoration: underline;
}
<h1>Hello Plunker!</h1>
<div width="100px">
<svg width="100px" viewBox="0 0 100 100">
<a xlink:href="#" class="node">
<text transform="translate(50 50)">hh2</text>
</a>
</svg>
</div>
I am trying to put two banners on top of a navigation bar with everything nicely centered. I can get the two banners to nicely sit by one another but when I make the browser window smaller the first banner goes on top of the second!
Is there a code where I can prevent this? If so please let me know.
This is what I have so far:
<center>
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
<BR>
You can set a min-width on the container of the banners.
Edit based on your comment:
<center> <!-- *shudder* -->
<div style="min-width: 860px;"> <!-- inline only for example purposes -->
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
</div> <!-- ditch the BR -->
...
</center>