SVG SMIL animations removed when used in a symbol? - html

Question

I have an animated svg (like you can see here) which works when inlined... however when i convert the svg into a symbol so i can access it anywhere with xlink:href... browsers seem to strip out the animate tags from the svg.
SVG inlined: http://puu.sh/cLkTR/24db186e78.png
SVG symbol reference: http://puu.sh/cLkZ7/51051612d3.png
Couldn't find any documentation on if this is the expected behavior, so asking here to see if anyone knows. Thanks :)
EDIT
Here is a snippet of the svg "sprite sheet" as requested. http://pastebin.com/3tUYueCj
And this is how it is included in html:
<svg>
<use xlink:href="sprites.svg#icon-loading.spinning.bubbles"></use>
</svg>

Answer 1

It works fine in Chrome 38 if the symbols are defined in the same document as the use element (see snippet below).
Are you using an experimental version of Chrome? I am not seeing a "shadow root" definition for the use element in the Chrome DOM inspector -- that might be something new that is creating unexpected bugs. SVG use elements are not directly equivalent to web component shadow roots. You'll want to file a bug report if you haven't already.
svg.defs {
height: 0; width: 0; margin: 0; padding: 0; overflow: hidden;
}
svg.icon {
height: 2em;
width: 2em;
margin: 0.5em;
}
<svg class="defs" xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 32 32" id="icon-loading.spinning.bubbles">
<title>loading.spinning.bubbles</title>
<circle cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(45 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(90 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(135 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(225 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(270 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(315 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
</symbol>
</svg>
<svg class="icon"><use xlink:href="#icon-loading.spinning.bubbles"/></svg>