title: SVG animation inside svg:use element. Works in Firefox, not in Chrome
body: <p>I'm using the <code>svg:use</code> element to embed an animating SVG spinner inside a large D3.js tree with many nodes.</p>
  
  <p>One node looks like this:</p>
  
  <pre><code>&lt;g class="node clickable" data-path="1" data-depth="0" transform=""&gt;
    &lt;text class="title" x="0" y=".36em" style="fill-opacity: 1;" text-anchor="begin"&gt;Model&lt;/text&gt;
    &lt;text class="subtitle" x="0" y="2em" style="fill-opacity: 1;" text-anchor="begin"&gt;
    &lt;use href="static/spinner.svg#spinner" transform="translate(54.75,-9) rotate(0 7,9)"&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>I use JQuery to insert the spinner when needed in the one of the many <code>g.node</code> elements in the tree.</p>
  
  <p>The SVG source of the spinner is as follows:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg"
       width="16px" height="16px"&gt;
    &lt;g&gt;
      &lt;line x1="50" y1="3.167" x2="50" y2="23.5" opacity="0.2"&gt;
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" /&gt;
      &lt;/line&gt;
          &lt;line x1="80.102" y1="14.124" x2="67.033" y2="29.7" opacity="0.2"&gt;
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1333s" /&gt;
      &lt;/line&gt;    
          &lt;line x1="96.121" y1="41.867" x2="76.096" y2="45.398" opacity="0.2"&gt;        
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2666s" /&gt;
      &lt;/line&gt;
      &lt;line  x1="90.559" y1="73.415" x2="72.949" y2="63.249" opacity="0.2"&gt;
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" /&gt;
      &lt;/line&gt;     
          &lt;line x1="66.018" y1="94.007" x2="59.064" y2="74.901" opacity="0.2"&gt;
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5333s" /&gt;
      &lt;/line&gt;
      &lt;line x1="33.983" y1="94.007" x2="40.937" y2="74.901" opacity="0.2"&gt;
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6666s" /&gt;
      &lt;/line&gt;     
          &lt;line x1="9.442" y1="73.417" x2="27.052" y2="63.25" opacity="0.2"&gt;
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" /&gt;
      &lt;/line&gt;    
      &lt;line x1="3.879" y1="41.868" x2="23.904" y2="45.399" opacity="0.2"&gt;
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9333s" /&gt;
      &lt;/line&gt;    
      &lt;line x1="19.897" y1="14.124" x2="32.966" y2="29.7" opacity="0.2"&gt;
        &lt;animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.0666s" /&gt;
      &lt;/line&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>This works perfectly in Firefox, but not in Chrome or Safari. In Chrome and Safari, just the first 'frame' of the animation is shown, but the spinner is not animating.</p>
  
  <p>Does anyone know how to solve this problem?</p>
  
  <p>Thanks!</p>