为什么 HTML 锚点标签不能包含可缩放的 SVG <object>？

Question

我已经创建了一个可扩展的SVG对象，使用SVG文件本身中的preserveAspectRatio和viewBox属性：

<svg
  …
  width="800"
  height="800"
  preserveAspectRatio="xMinYMin meet"
  viewBox="0 0 800 800"
  …

在HTML中，我使用<object>标签引用SVG文件，并将其包装在<a>标签中（我这样做是为了以后可以对其进行样式设置）：

<a>
  <object type="image/svg+xml" data="smiley.svg">
  </object>
</a>

我使用一些CSS样式来设置<object>标签，使其宽度为50%，并且不超过100%：

object {
  max-width: 100%;
  width: 50%;
}

问题在于锚标签没有完全包围对象！有什么想法吗？

- Jake Rayson

---

内容模型：透明，但不能有任何交互内容的后代。 - CBroe

哎呀，我能看到这些单词，但它们没有意义！为什么在简单的英语中，一个<object>会与一个<img>表现不同呢？ - Jake Rayson

因为一个对象可以包含交互内容（甚至SVG本身就可以是交互内容）。 - CBroe

Answer 1

我实际上在teamtreehouse找到了一个完全可用的解决方案。

这是inline-block和伪元素的组合。

Thomas Quayle 制作了一个示例方案（如下所示）。

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>

- Squish

Answer 2

在锚点中添加display: block，对我来说似乎可以解决此问题。

- Igor Pantović

---

如果我将锚点标签样式设置为 display: block，它会将锚点标签拉伸到页面的全宽度，而不是50%（即围绕对象）:( - Jake Rayson

所以请将它设为浮动或内联块。 - Igor Pantović

我尝试了 float: left 和 display: inline-block，它们产生了相同的效果。 - Jake Rayson

Answer 3

我认为@CBroe说得对: SVG可以是交互式内容，因此不应该用锚元素包装它:

w3.org/TR/html5/text-level-semantics.html#the-a-element：“内容模型：透明，但不能有交互内容后代。”

- Jake Rayson