浏览器会渲染所有SVG两次吗？

Question

这是一种非常标准的内联SVG的方法，可以在以后使用。它受到了Icon System with SVG Sprites中CSS​​-tricks的Chris Coyier的欢迎，可能有成千上万的开发人员抛弃了图标字体，转而支持SVG。

＆＃13;

＆＃13;

.icon {
    outline: 1px dotted blue;
    width: 500px;
    height: auto;
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" hidden>
  <defs>
    <g id="circle">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50" />
      </svg>
    </g>
  </defs>
</svg>

<svg class="icon">
  <use xlink:href="#circle" />
</svg>

＆＃13;

＆＃13;

＆＃13;

<svg> <defs>被隐藏（两次只是为了确定！），即使<defs>有任何语义，浏览器不渲染svg/defs内的任何内容。

但那些SVG真的隐藏了吗？让我们为<g>＆gt;中的<defs元素添加一个规则，该规则位于隐藏 <svg>内，其中 {{1 }} 即可。双重隐藏。

＆＃13;

＆＃13;

display: none

＆＃13;

.icon {
    outline: 1px dotted blue;
    width: 500px;
    height: auto;
}

defs g {
   outline: 30px dashed green;
}

＆＃13;

＆＃13;

＆＃13;

说什么？与这四个绿色伙伴的交易是什么？为什么要呈现<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" hidden> <defs> <g id="circle"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" /> </svg> </g> </defs> </svg> <svg class="icon"> <use xlink:href="#circle" /> </svg>？ Firefox和IE不会显示任何绿色轮廓。

这是否表明无论您在g SVG的哪个位置，Chrome都会将它们渲染两次？

哦，但不仅仅是Chrome。如果您向<use>添加填充，IE11也会渲染它：