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

Question

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>

score 1 · Answer 1 · answered Feb 15 '17 at 11:54

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

answered Feb 15 '17 at 11:54

defghi1977

5,081
1
30
29

While that explains why the direct external reference you can see mentioned in the snippet does not work, it does not explain the main question, which is why the animation does not work. As you can see from the picture I reference the the svg fragment as "(..)#spinner". This works, but the animation is "dead". – oligofren Feb 15 '17 at 11:59
Added some information on SMIL from Sara Soueidan in the question. – oligofren Feb 15 '17 at 12:02
It works on FireFox, but does not on Chrome. I can not say why any more, sorry. – defghi1977 Feb 15 '17 at 12:22
Because chrome always had xlink completely wrong... They're not able to set the correct baseURI, nor to fetch data at more than two levels from external sources... But this answer is the correct one. http://plnkr.co/edit/VhqTAnUIcBxDA06QsYc0?p=preview – Kaiido Feb 15 '17 at 12:25
@Kaiido not sure what xlink has to do with the animation stopping to work? it finds the actual svg, but the animation is not triggered. – oligofren Feb 15 '17 at 12:32
1

@oligofren But animate elements have an at least internal kind of xlink:href attribute pointing to their target. https://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingTargetElement – Kaiido Feb 15 '17 at 12:33
@Kaiido good point! even though it is not explicit it is of course implicit! Since the spec says that if the xlink:href is nonexisting on the animate element it will automatically target its parent element I assumed I could bypass all those troubles. – oligofren Feb 15 '17 at 12:36
@defghi1977 You are right, it actually works fine on Firefox, but not on Chrome. I think I will have to resort to inlining this. – oligofren Feb 15 '17 at 12:36
@Kaiido but since this works in Firefox and the Chrome implementation is faulty, then the real answer why this works is not this answer, but that the Chrome implementation is faulty? Just trying to be explicit. – oligofren Feb 15 '17 at 12:48
1

@oligofren, yes answerer could edit his answer to tell so. Note : diggin' a bit more into this issue I discovered that FF doesn't honor external animate either if the target element has been set through the `href` attribute. Also, both chrome and FF are happy to animate a path even if it is linked (``) But I guess this won't help you, since you'd have to use one `` per target... – Kaiido Feb 15 '17 at 12:56
1

@kaiido FF 51 should honour href properly. If that's not happening [raise a bug in bugzilla](https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&Component=SVG) attaching your testcase to the bug. – Robert Longson Feb 15 '17 at 13:08

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

1 Answers1

Linked