问题
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?
回答1:
Adding display: block
to anchor seems to fix it for me.
回答2:
I actually found a fully working solution at teamtreehouse.
It's a combination of inline-block
and pseudo-elements.
Thomas Quayle made a pen of the example solution (replicated below).
a.svg {
position: relative;
display: inline-block;
width: 25%;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
object {
width: 100%;
}
<h1>SVG Link Demo</h1>
<blockquote>Replicated from <a href="http://codepen.io/thomasquayle/pen/KwxwoO">Thomas Quayle's codepen</a> example</blockquote>
<a href="http://google.com" class="svg">
<object data="http://openclipart.org/people/cjcreativedesign/PuppyLongEars.svg" type="image/svg+xml" class="mailicon">
</object>
</a>
<a href="http://google.com" class="svg">
<object data="http://openclipart.org/people/cjcreativedesign/PuppyLongEars.svg" type="image/svg+xml" class="mailicon">
</object>
</a>
<p>How cool is that?</p>
回答3:
I think @CBroe has it: SVG can be interactive content, therefore it shouldn't be wrapped by anchor element:
w3.org/TR/html5/text-level-semantics.html#the-a-element: “Content model: Transparent, but there must be no interactive content descendant.”
来源:https://stackoverflow.com/questions/22615049/why-doesnt-an-html-anchor-tag-wrap-a-scalable-svg-object