title: SMIL animation not working using SVG spritesheet
body: <p>We are trying to use multiple Smil animations svgs in multiple symbol tags to referencing in the HTML elements. but svg's are loading as expected. I think the issue is related to <code>def</code> elements. Please have a look.
  Here is the stackbliz <a href="https://stackblitz.com/edit/typescript-hkeya2?file=index.html" rel="nofollow noreferrer">live</a> </p>
  
  <p>Thanks in advance!!</p>
  
  <p><strong>Here is the code</strong></p>
  
  <pre><code>&lt;svg style="position:absolute;" width="0"  viewBox="0 0 710 231"&gt;
   &lt;defs&gt;
                  &lt;clipPath id="clip-path-increaseinattacks" class="graph-clipath" animationId="chart1t1"&gt;
                      &lt;path x="150" y="0" height="300" transform=translate(-505,0) width="505"
                          d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
                          id="Rectangle-Copy-15" fill="#0F54AF"   fill-rule="nonzero"&gt;
                          &lt;animateTransform id="chart1t1" attributeName="transform" type="translate" values="-505,0; 0,0"
                              begin="1s" calcMode="spline" keySplines=".4,0,.78,.69" dur="0.3s" fill="freeze" /&gt;
                      &lt;/path&gt;
                      &lt;path x="150" y="0" height="300" transform=translate(-505,0) width="505"
                          d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
                          id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero"&gt;
                          &lt;animateTransform id="chart1t2" attributeName="transform" type="translate" values="-400,0; 0,0"
                              begin="chart1t1.end" calcMode="spline" keySplines=".4,0,.78,.69" dur="0.3s" fill="freeze" /&gt;
                      &lt;/path&gt;
                      &lt;path x="150" y="0" height="300" transform=translate(-505,0) width="505"
                          d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
                          id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero"&gt;
                          &lt;animateTransform attributeName="transform" type="translate" values="-300,0; 0,0"
                              begin="chart1t2.end" calcMode="spline" keySplines=".4,0,.78,.69" dur="0.3s" fill="freeze" /&gt;
                      &lt;/path&gt;
                  &lt;/clipPath&gt;
              &lt;/defs&gt;
          &lt;symbol id="Chart_IncreaseInAttacks" viewBox="0 0 710 231"&gt;
              &lt;title&gt;Chart_IncreaseInAttacks&lt;/title&gt;
              &lt;desc&gt;Created with Sketch.&lt;/desc&gt;
  
              &lt;g id="Page_1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
                  &lt;g id="ATT-CS-Report02_SecurityRiskLandscape" transform="translate(-245.000000, -440.000000)"&gt;
                      &lt;g id="Chart_IncreaseInAttacks" transform="translate(245.000000, 440.000000)"&gt;
                          &lt;rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0" width="710"
                              height="231"&gt;&lt;/rect&gt;
                          &lt;text id="Increase-in-attacks" font-size="15" font-weight="bold" line-spacing="22"
                              fill="#009FDB"&gt;
                              &lt;tspan x="42" y="40"&gt;Increase in attacks in 2018&lt;/tspan&gt;
                          &lt;/text&gt;
                          &lt;text id="Ransomware-attacks" font-size="11" font-weight="normal" line-spacing="14"
                              fill="#191919"&gt;
                              &lt;tspan x="68.462" y="83"&gt;Ransomware &lt;/tspan&gt;
                              &lt;tspan x="96.765" y="97"&gt;attacks&lt;/tspan&gt;
                          &lt;/text&gt;
                          &lt;text id="Spear-phishing-attac" font-size="11" font-weight="normal" line-spacing="14"
                              fill="#191919"&gt;
                              &lt;tspan x="58.199" y="167"&gt;Spear-phishing&lt;/tspan&gt;
                              &lt;tspan x="96.765" y="181"&gt;attacks&lt;/tspan&gt;
                          &lt;/text&gt;
                          &lt;text id="Spoofing/BEC-attacks" font-size="11" font-weight="normal" line-spacing="14"
                              fill="#191919"&gt;
                              &lt;tspan x="83.301" y="125"&gt;Spoofing/&lt;/tspan&gt;
                              &lt;tspan x="74.27" y="139"&gt;BEC attacks&lt;/tspan&gt;
                          &lt;/text&gt;
  
  
  
                          &lt;path clip-path="url(#clip-path-increaseinattacks)" id="kk"
                              d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
                              id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"&gt; &lt;/path&gt;
                          &lt;path clip-path="url(#clip-path-increaseinattacks)"
                              d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
                              id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero"&gt;&lt;/path&gt;
                          &lt;path clip-path="url(#clip-path-increaseinattacks)"
                              d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
                              id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero"&gt;&lt;/path&gt;
  
  
  
  
                          &lt;path d="M150.5,68.5 L150.5,190" id="Line-3-Copy" stroke="#191919" stroke-linecap="square"
                              fill-rule="nonzero"&gt;&lt;/path&gt;
                          &lt;text id="350%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6"&gt;
                              &lt;tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="90"&gt;350%
                              &lt;/tspan&gt;
                          &lt;/text&gt;
                          &lt;text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6"&gt;
                              &lt;tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="132"&gt;
                                  250%&lt;/tspan&gt;
                          &lt;/text&gt;
                          &lt;text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6"&gt;
                              &lt;tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="174"&gt;70%
                              &lt;/tspan&gt;
                          &lt;/text&gt;
                      &lt;/g&gt;
                  &lt;/g&gt;
              &lt;/g&gt;
          &lt;/symbol&gt;
          &lt;defs&gt;
                                      &lt;clipPath id="clip-path-identifycsthreats_mobile" class="graph-clipath"&gt;
                                          &lt;!-- &lt;rect x="152" y="0" height="300" width="418"/&gt; --&gt;
                                          &lt;path x="152" y="0" height="300" width="200"
                                              style="transform: translateX(-100%)"
                                              d="M152,110 L190,110 C196.627417,110 202,115.372583 202,122 L202,122 C202,128.627417 196.627417,134 190,134 L152,134 L152,110 Z"
                                              id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"&gt;&lt;/path&gt;
                                          &lt;path x="152" y="0" height="300" width="200"
                                              style="transform: translateX(-100%)"
                                              d="M152,155 L167,155 C173.627417,155 179,160.372583 179,167 L179,167 C179,173.627417 173.627417,179 167,179 L152,179 L152,155 Z"
                                              id="Rectangle-Copy-18" fill="#0586CB" fill-rule="nonzero"&gt;&lt;/path&gt;
                                          &lt;path x="152" y="0" height="300" width="200"
                                              style="transform: translateX(-100%)"
                                              d="M152,199 L187,199 C193.627417,199 199,204.372583 199,211 L199,211 C199,217.627417 193.627417,223 187,223 L152,223 L152,199 Z"
                                              id="Rectangle-Copy-19" fill="#009FDB" fill-rule="nonzero"&gt;&lt;/path&gt;
                                          &lt;path x="152" y="0" height="300" width="200"
                                              style="transform: translateX(-100%)"
                                              d="M152,244 L350,244 C356.627417,244 362,249.372583 362,256 L362,256 C362,262.627417 356.627417,268 350,268 L152,268 L152,244 Z"
                                              id="Rectangle-Copy-20" fill="#18B9ED" fill-rule="nonzero"&gt;&lt;/path&gt;
                                      &lt;/clipPath&gt;
                                  &lt;/defs&gt;
  
  &lt;symbol id="att-Chart_HowDoYouIdentifyCSThreats_Mobile" height="318px"
                                  viewBox="0 0 375 318"&gt;
                                  &lt;title&gt;Chart_HowDoYouIdentifyCSThreats_Mobile&lt;/title&gt;
                                  &lt;desc&gt;Created with Sketch.&lt;/desc&gt;
  
                                  &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
                                      &lt;g id="ATT-CS-Report02_SecurityRiskLandscape-Copy"
                                          transform="translate(0.000000, -1954.000000)"&gt;
                                          &lt;g id="Chart_HowDoYouIdentifyCSThreats_Mobile"
                                              transform="translate(0.000000, 1954.000000)"&gt;
                                              &lt;rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0"
                                                  width="375" height="318"&gt;&lt;/rect&gt;
                                              &lt;text id="How-does-your-organi" font-size="15" font-weight="bold"
                                                  line-spacing="22" fill="#009FDB"&gt;
                                                  &lt;tspan x="20" y="45"&gt;How does your organization currently &lt;/tspan&gt;
                                                  &lt;tspan x="20" y="67"&gt;identify cybersecurity threats?&lt;/tspan&gt;
                                              &lt;/text&gt;
                                              &lt;text id="We-use-SIEM-tools-fo" font-size="11" font-weight="normal"
                                                  line-spacing="12" fill="#191919"&gt;
                                                  &lt;tspan x="32.264" y="117.417938"&gt;We use SIEM tools for &lt;/tspan&gt;
                                                  &lt;tspan x="23.2" y="129.417938"&gt;search, compliance and &lt;/tspan&gt;
                                                  &lt;tspan x="90.509" y="141.417938"&gt;reporting.&lt;/tspan&gt;
                                              &lt;/text&gt;
                                              &lt;text id="We-use-SIEM-tools-to" font-size="11" font-weight="normal"
                                                  line-spacing="12" fill="#191919"&gt;
                                                  &lt;tspan x="36.092" y="207.417938"&gt;We use SIEM tools to &lt;/tspan&gt;
                                                  &lt;tspan x="12.937" y="219.417938"&gt;analyze logs and network &lt;/tspan&gt;
                                                  &lt;tspan x="23.266" y="231.417938"&gt;data to prioritize alerts.&lt;/tspan&gt;
                                              &lt;/text&gt;
                                              &lt;text id="Other-/-None-of-the" font-size="11" font-weight="bold"
                                                  line-spacing="12" fill="#191919"&gt;
                                                  &lt;tspan x="69.906" y="260.131927"&gt;Other / None &lt;/tspan&gt;
                                                  &lt;tspan x="72.634" y="272.131927"&gt;of the above&lt;/tspan&gt;
                                              &lt;/text&gt;
                                              &lt;text id="We-use-SIEM-tools-fo" font-size="11" font-weight="normal"
                                                  line-spacing="12" fill="#191919"&gt;
                                                  &lt;tspan x="32.264" y="163.417938"&gt;We use SIEM tools for &lt;/tspan&gt;
                                                  &lt;tspan x="26.214" y="175.417938"&gt;analysis, but they need &lt;/tspan&gt;
                                                  &lt;tspan x="76.011" y="187.417938"&gt;more tuning.&lt;/tspan&gt;
                                              &lt;/text&gt;
                                              &lt;path clip-path="url(#clip-path-identifycsthreats_mobile)"
                                                  d="M152,110 L190,110 C196.627417,110 202,115.372583 202,122 L202,122 C202,128.627417 196.627417,134 190,134 L152,134 L152,110 Z"
                                                  id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"&gt;&lt;/path&gt;
                                              &lt;path clip-path="url(#clip-path-identifycsthreats_mobile)"
                                                  d="M152,155 L167,155 C173.627417,155 179,160.372583 179,167 L179,167 C179,173.627417 173.627417,179 167,179 L152,179 L152,155 Z"
                                                  id="Rectangle-Copy-18" fill="#0586CB" fill-rule="nonzero"&gt;&lt;/path&gt;
                                              &lt;path clip-path="url(#clip-path-identifycsthreats_mobile)"
                                                  d="M152,199 L187,199 C193.627417,199 199,204.372583 199,211 L199,211 C199,217.627417 193.627417,223 187,223 L152,223 L152,199 Z"
                                                  id="Rectangle-Copy-19" fill="#009FDB" fill-rule="nonzero"&gt;&lt;/path&gt;
                                              &lt;path clip-path="url(#clip-path-identifycsthreats_mobile)"
                                                  d="M152,244 L350,244 C356.627417,244 362,249.372583 362,256 L362,256 C362,262.627417 356.627417,268 350,268 L152,268 L152,244 Z"
                                                  id="Rectangle-Copy-20" fill="#18B9ED" fill-rule="nonzero"&gt;&lt;/path&gt;
                                              &lt;path d="M152.5,95.5 L152.5,283" id="Line-3-Copy" stroke="#191919"
                                                  stroke-linecap="square" fill-rule="nonzero"&gt;&lt;/path&gt;
                                              &lt;text id="15%" font-size="12" font-weight="bold" line-spacing="16"
                                                  fill="#F6F6F6"&gt;
                                                  &lt;tspan x="157" y="125"&gt;15%&lt;/tspan&gt;
                                              &lt;/text&gt;
                                              &lt;text id="8%" font-size="12" font-weight="bold" line-spacing="16"
                                                  fill="#F6F6F6"&gt;
                                                  &lt;tspan x="157" y="170"&gt;8%&lt;/tspan&gt;
                                              &lt;/text&gt;
                                              &lt;text id="14%" font-size="12" font-weight="bold" line-spacing="16"
                                                  fill="#F6F6F6"&gt;
                                                  &lt;tspan x="157" y="215"&gt;14%&lt;/tspan&gt;
                                              &lt;/text&gt;
                                              &lt;text id="63%" font-size="12" font-weight="bold" line-spacing="16"
                                                  fill="#F6F6F6"&gt;
                                                  &lt;tspan x="157" y="259"&gt;63%&lt;/tspan&gt;
                                              &lt;/text&gt;
                                          &lt;/g&gt;
                                      &lt;/g&gt;
                                  &lt;/g&gt;
                              &lt;/symbol&gt;
  
      &lt;/svg&gt;
  
  
        &lt;svg class="sprite-svg" style="border:1px solid"  viewBox="0 0 710 231"&gt;
                              &lt;use xlink:href="#Chart_IncreaseInAttacks"&gt;&lt;/use&gt;
      &lt;/svg&gt;
  
       &lt;svg class="sprite-svg" style="border:1px solid"  viewBox="0 0 710 231"&gt;
                              &lt;use xlink:href="#Chart_HowDoYouIdentifyCSThreats_Mobile"&gt;&lt;/use&gt;
      &lt;/svg&gt;
  </code></pre>