Why doesn't an HTML anchor tag wrap a scalable SVG <object>?

问题

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