为什么 HTML 锚标记不包装可扩展的 SVG <object>？答案

【问题标题】：Why doesn't an HTML anchor tag wrap a scalable SVG <object>?为什么 HTML 锚标记不包装可扩展的 SVG <object>？
【发布时间】：2017-04-05 08:32:37
【问题描述】：

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

<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%;
}

问题是锚标记没有环绕对象！

有什么想法吗？

【问题讨论】：

w3.org/TR/html5/text-level-semantics.html#the-a-element: “内容模型：透明，但不能有interactive content后代。”
哎呀，我可以看到这些词，但它们没有意义！为什么，用简单的英语来说，<object> 的行为会与 <img> 不同？
因为一个对象可以包含交互内容（甚至SVG本身也可以是交互内容）。

标签： object svg viewbox

【解决方案1】：

将display: block 添加到锚点似乎可以解决我的问题。

【讨论】：

如果我将锚标记设置为display: block，它会将锚标记拉伸到页面的全宽，而不是 50%（即围绕对象）:(
所以让它浮动或内联块
我试过float: left和display: inline-block，效果一样。

【解决方案2】：

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

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

Thomas Quayle made a pen 的示例解决方案（复制如下）。

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】：

我认为@CBroe 有它：SVG 可以是交互式内容，因此它不应该被锚元素包裹：

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

【讨论】：