为什么在使用xlink：href作为外部文件时SVG动画停止

Question

出于某种原因，使用xlink:href时我的spinner.svg没有动画效果。在页面上嵌入SVG并使用xlink:href似乎工作正常，如下面的代码段所示。

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

为什么SVG的动画标签突然没有生效？由于图像实际显示，参考必须正常工作。

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

工作版本

.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中，Use元素需要引用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