Why does the SVG animation stop when using xlink:href for external file

问题

For some reason my spinner.svg is not animating when using xlink:href. Embedding the SVG on the page and using xlink:href seems to work fine, as the snippet below shows.

The problem: static (and solid!) spinner instead of animation

Why are the animation tags of the SVG suddenly not taking effect? The reference must be working since the image is actually displaying.

EDIT: Could this have to do with the shadow dom and xref? According to Sara Soueidan "The target element must be part of the current SVG document fragment". I might be overloading what "document fragment" means, but to me document fragments belong in Shadow DOM land, and I suspect that SMIL animations might not work when using <use> statements due to this?

Working versions

.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>

回答1:

In SVG1.1, Use element requires reference to SVG fragment not SVG URL. Try to add id attribute to root svg element of external SVG file and add hash string to href value of use element, like this.

external svg(spinner_1.svg)

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

html uses external SVG file

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

Note:In SVG2, you can set SVG URL to href attribute of use element. See https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement

来源：https://stackoverflow.com/questions/42246883/why-does-the-svg-animation-stop-when-using-xlinkhref-for-external-file

标签

animation

svg

svg-animate

smil

xlink