为什么使用 xlink:href 处理外部文件时 SVG 动画停止

Question

由于某种原因，我的 spinner.svg 在使用 xlink:href 时没有动画。将 SVG 嵌入页面并使用 xlink:href 似乎可以正常工作，如下面的 sn-p 所示。

问题：静态（和实心！）微调器而不是动画

为什么 SVG 的动画标签突然不生效了？ 既然图片实际是显示的，那肯定是引用工作了。

编辑：这可能与影子 dom 和外部参照有关吗？ According to Sara Soueidan "目标元素必须是当前 SVG 文档片段的一部分"。我可能会超载“文档片段”的含义，但对我来说，文档片段属于 Shadow DOM 领域，我怀疑在使用 <use> 语句时，SMIL 动画可能无法正常工作？

工作版本

.xlinked {
  color: green;
}

img {
  color: red; // not taking effect - of course! just a test.
}

.embedded {
  color: blue;
}

  
<h1>xlink local</h1>
<svg class="xlinked">
    <!-- could not get this external reference to work?
    <use xlink:href="http://imgh.us/spinner_1.svg" />
    -->
    <use xlink:href="#spinner" />
</svg>

<h1>embedded</h1>
<div class="embedded">
    <svg id="embedded"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
        <circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
        <circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
            <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
            <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
        </circle>
    </svg>
</div>

<h1>img</h1>
<img src="http://imgh.us/spinner_1.svg" />

<h1>External absolute xlink (not working)</h1>
<svg>
    <!-- could not get this external reference to work. should be the same as a local reference?  -->
    <use xlink:href="http://imgh.us/spinner_1.svg" />
</svg>

<h1>Source SVG with symbols for xlink reference </h1>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/></circle></symbol></svg>

Answer 1

在 SVG1.1 中，使用元素需要引用 SVG 片段而不是 SVG URL。尝试将 id 属性添加到外部 SVG 文件的根 svg 元素，并将哈希字符串添加到 use 元素的 href 值，像这样。

外部 svg(spinner_1.svg)

<svg xmlns="http://www.w3.org/2000/svg" id="root">
<!--svg structure-->
</svg>

html 使用外部 SVG 文件

<svg>
    <use xlink:href="http://imgh.us/spinner_1.svg#root" />
</svg>

注意：在 SVG2 中，您可以将 SVG URL 设置为 use 元素的 href 属性。见https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement