Menu
I have created a scalable SVG object, using the preserveAspectRatio and viewBox attributes in the SVG file itself:
<svg
…
width="800"
height="800"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 800 800"
…
In the HTML, I reference the SVG file using the <object> tag and wrap it an <a> tag (I want to do this so that I can style it later):
<a>
<object type="image/svg+xml" data="smiley.svg">
</object>
</a>
I style the <object> tag with some CSS to make it 50% wide, and no wider than 100%:
object {
max-width: 100%;
width: 50%;
}
The problem is that the anchor tag doesn't wrap all around the object!
Any ideas anyone?
425
SVG shapes The simplest way to make a portion of an SVG clickable is to add an SVG hyperlink element to the markup. This is as easy as wrapping the target with an <a> tag, just as you would a nested html element. Your <a> tag can surround a simple shape or more complex paths.
Just set the viewBox on your <svg> , and set one of height or width to auto . The browser will adjust it so that the overall aspect ratio matches the viewBox .
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.
The <a> SVG element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's <a> element. SVG's <a> element is a container, which means you can create a link around text (like in HTML) but also around any shape.
Adding display: block to anchor seems to fix it for me.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
