问题
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 def elements. Please have a look.
Here is the stackbliz live
Thanks in advance!!
Here is the code
<svg style="position:absolute;" width="0" viewBox="0 0 710 231">
<defs>
<clipPath id="clip-path-increaseinattacks" class="graph-clipath" animationId="chart1t1">
<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">
<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" />
</path>
<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">
<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" />
</path>
<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">
<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" />
</path>
</clipPath>
</defs>
<symbol id="Chart_IncreaseInAttacks" viewBox="0 0 710 231">
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<g id="Page_1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ATT-CS-Report02_SecurityRiskLandscape" transform="translate(-245.000000, -440.000000)">
<g id="Chart_IncreaseInAttacks" transform="translate(245.000000, 440.000000)">
<rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0" width="710"
height="231"></rect>
<text id="Increase-in-attacks" font-size="15" font-weight="bold" line-spacing="22"
fill="#009FDB">
<tspan x="42" y="40">Increase in attacks in 2018</tspan>
</text>
<text id="Ransomware-attacks" font-size="11" font-weight="normal" line-spacing="14"
fill="#191919">
<tspan x="68.462" y="83">Ransomware </tspan>
<tspan x="96.765" y="97">attacks</tspan>
</text>
<text id="Spear-phishing-attac" font-size="11" font-weight="normal" line-spacing="14"
fill="#191919">
<tspan x="58.199" y="167">Spear-phishing</tspan>
<tspan x="96.765" y="181">attacks</tspan>
</text>
<text id="Spoofing/BEC-attacks" font-size="11" font-weight="normal" line-spacing="14"
fill="#191919">
<tspan x="83.301" y="125">Spoofing/</tspan>
<tspan x="74.27" y="139">BEC attacks</tspan>
</text>
<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"> </path>
<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"></path>
<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"></path>
<path d="M150.5,68.5 L150.5,190" id="Line-3-Copy" stroke="#191919" stroke-linecap="square"
fill-rule="nonzero"></path>
<text id="350%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6">
<tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="90">350%
</tspan>
</text>
<text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6">
<tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="132">
250%</tspan>
</text>
<text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6">
<tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="174">70%
</tspan>
</text>
</g>
</g>
</g>
</symbol>
<defs>
<clipPath id="clip-path-identifycsthreats_mobile" class="graph-clipath">
<!-- <rect x="152" y="0" height="300" width="418"/> -->
<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"></path>
<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"></path>
<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"></path>
<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"></path>
</clipPath>
</defs>
<symbol id="att-Chart_HowDoYouIdentifyCSThreats_Mobile" height="318px"
viewBox="0 0 375 318">
<title>Chart_HowDoYouIdentifyCSThreats_Mobile</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ATT-CS-Report02_SecurityRiskLandscape-Copy"
transform="translate(0.000000, -1954.000000)">
<g id="Chart_HowDoYouIdentifyCSThreats_Mobile"
transform="translate(0.000000, 1954.000000)">
<rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0"
width="375" height="318"></rect>
<text id="How-does-your-organi" font-size="15" font-weight="bold"
line-spacing="22" fill="#009FDB">
<tspan x="20" y="45">How does your organization currently </tspan>
<tspan x="20" y="67">identify cybersecurity threats?</tspan>
</text>
<text id="We-use-SIEM-tools-fo" font-size="11" font-weight="normal"
line-spacing="12" fill="#191919">
<tspan x="32.264" y="117.417938">We use SIEM tools for </tspan>
<tspan x="23.2" y="129.417938">search, compliance and </tspan>
<tspan x="90.509" y="141.417938">reporting.</tspan>
</text>
<text id="We-use-SIEM-tools-to" font-size="11" font-weight="normal"
line-spacing="12" fill="#191919">
<tspan x="36.092" y="207.417938">We use SIEM tools to </tspan>
<tspan x="12.937" y="219.417938">analyze logs and network </tspan>
<tspan x="23.266" y="231.417938">data to prioritize alerts.</tspan>
</text>
<text id="Other-/-None-of-the" font-size="11" font-weight="bold"
line-spacing="12" fill="#191919">
<tspan x="69.906" y="260.131927">Other / None </tspan>
<tspan x="72.634" y="272.131927">of the above</tspan>
</text>
<text id="We-use-SIEM-tools-fo" font-size="11" font-weight="normal"
line-spacing="12" fill="#191919">
<tspan x="32.264" y="163.417938">We use SIEM tools for </tspan>
<tspan x="26.214" y="175.417938">analysis, but they need </tspan>
<tspan x="76.011" y="187.417938">more tuning.</tspan>
</text>
<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"></path>
<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"></path>
<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"></path>
<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"></path>
<path d="M152.5,95.5 L152.5,283" id="Line-3-Copy" stroke="#191919"
stroke-linecap="square" fill-rule="nonzero"></path>
<text id="15%" font-size="12" font-weight="bold" line-spacing="16"
fill="#F6F6F6">
<tspan x="157" y="125">15%</tspan>
</text>
<text id="8%" font-size="12" font-weight="bold" line-spacing="16"
fill="#F6F6F6">
<tspan x="157" y="170">8%</tspan>
</text>
<text id="14%" font-size="12" font-weight="bold" line-spacing="16"
fill="#F6F6F6">
<tspan x="157" y="215">14%</tspan>
</text>
<text id="63%" font-size="12" font-weight="bold" line-spacing="16"
fill="#F6F6F6">
<tspan x="157" y="259">63%</tspan>
</text>
</g>
</g>
</g>
</symbol>
</svg>
<svg class="sprite-svg" style="border:1px solid" viewBox="0 0 710 231">
<use xlink:href="#Chart_IncreaseInAttacks"></use>
</svg>
<svg class="sprite-svg" style="border:1px solid" viewBox="0 0 710 231">
<use xlink:href="#Chart_HowDoYouIdentifyCSThreats_Mobile"></use>
</svg>
回答1:
first error: the symbol's id="att-Chart_HowDoYouIdentifyCSThreats_Mobile". You are trying to use <use xlink:href="#Chart_HowDoYouIdentifyCSThreats_Mobile"></use> without the att-
second error: the clip-path="url(#clip-path-identifycsthreats_mobile)" is clipping out everything. A path do not have x y width or height so I'm removing all this x="152" y="0" height="300" width="200" I'm also removing style="transform: translateX(-100%)" from the clipping paths and now you can see the chart bars. I suppose you don't want those bars animated since there is no animation.
I've also removed the transform="translate(0.000000, -1954.000000)" from one <g> and transform="translate(0.000000, 1954.000000)" from the next one.
<svg style="position:absolute;" width="0" viewBox="0 0 710 231">
<defs>
<clipPath id="clip-path-increaseinattacks" class="graph-clipath" animationId="chart1t1">
<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">
<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" />
</path>
<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">
<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" />
</path>
<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">
<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" />
</path>
</clipPath>
</defs>
<symbol id="Chart_IncreaseInAttacks" viewBox="0 0 710 231">
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<g id="Page_1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ATT-CS-Report02_SecurityRiskLandscape" transform="translate(-245.000000, -440.000000)">
<g id="Chart_IncreaseInAttacks" transform="translate(245.000000, 440.000000)">
<rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0" width="710"
height="231"></rect>
<text id="Increase-in-attacks" font-size="15" font-weight="bold" line-spacing="22"
fill="#009FDB">
<tspan x="42" y="40">Increase in attacks in 2018</tspan>
</text>
<text id="Ransomware-attacks" font-size="11" font-weight="normal" line-spacing="14"
fill="#191919">
<tspan x="68.462" y="83">Ransomware </tspan>
<tspan x="96.765" y="97">attacks</tspan>
</text>
<text id="Spear-phishing-attac" font-size="11" font-weight="normal" line-spacing="14"
fill="#191919">
<tspan x="58.199" y="167">Spear-phishing</tspan>
<tspan x="96.765" y="181">attacks</tspan>
</text>
<text id="Spoofing/BEC-attacks" font-size="11" font-weight="normal" line-spacing="14"
fill="#191919">
<tspan x="83.301" y="125">Spoofing/</tspan>
<tspan x="74.27" y="139">BEC attacks</tspan>
</text>
<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"> </path>
<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"></path>
<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"></path>
<path d="M150.5,68.5 L150.5,190" id="Line-3-Copy" stroke="#191919" stroke-linecap="square"
fill-rule="nonzero"></path>
<text id="350%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6">
<tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="90">350%
</tspan>
</text>
<text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6">
<tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="132">
250%</tspan>
</text>
<text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#F6F6F6">
<tspan clip-path="url(#clip-path-increaseinattacks)" x="159" y="174">70%
</tspan>
</text>
</g>
</g>
</g>
</symbol>
<defs>
<clipPath id="clip-path-identifycsthreats_mobile" class="graph-clipath">
<!-- <rect x="152" y="0" height="300" width="418"/> -->
<path
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"></path>
<path
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"></path>
<path
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"></path>
<path
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"></path>
</clipPath>
</defs>
<symbol id="att-Chart_HowDoYouIdentifyCSThreats_Mobile" height="318px"
viewBox="0 0 375 318">
<title>Chart_HowDoYouIdentifyCSThreats_Mobile</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ATT-CS-Report02_SecurityRiskLandscape-Copy">
<g id="Chart_HowDoYouIdentifyCSThreats_Mobile">
<rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0"
width="375" height="318"></rect>
<text id="How-does-your-organi" font-size="15" font-weight="bold"
line-spacing="22" fill="#009FDB">
<tspan x="20" y="45">How does your organization currently </tspan>
<tspan x="20" y="67">identify cybersecurity threats?</tspan>
</text>
<text id="We-use-SIEM-tools-fo" font-size="11" font-weight="normal"
line-spacing="12" fill="#191919">
<tspan x="32.264" y="117.417938">We use SIEM tools for </tspan>
<tspan x="23.2" y="129.417938">search, compliance and </tspan>
<tspan x="90.509" y="141.417938">reporting.</tspan>
</text>
<text id="We-use-SIEM-tools-to" font-size="11" font-weight="normal"
line-spacing="12" fill="#191919">
<tspan x="36.092" y="207.417938">We use SIEM tools to </tspan>
<tspan x="12.937" y="219.417938">analyze logs and network </tspan>
<tspan x="23.266" y="231.417938">data to prioritize alerts.</tspan>
</text>
<text id="Other-/-None-of-the" font-size="11" font-weight="bold"
line-spacing="12" fill="#191919">
<tspan x="69.906" y="260.131927">Other / None </tspan>
<tspan x="72.634" y="272.131927">of the above</tspan>
</text>
<text id="We-use-SIEM-tools-fo" font-size="11" font-weight="normal"
line-spacing="12" fill="#191919">
<tspan x="32.264" y="163.417938">We use SIEM tools for </tspan>
<tspan x="26.214" y="175.417938">analysis, but they need </tspan>
<tspan x="76.011" y="187.417938">more tuning.</tspan>
</text>
<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"></path>
<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"></path>
<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"></path>
<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"></path>
<path d="M152.5,95.5 L152.5,283" id="Line-3-Copy" stroke="#191919"
stroke-linecap="square" fill-rule="nonzero"></path>
<text id="15%" font-size="12" font-weight="bold" line-spacing="16"
fill="#F6F6F6">
<tspan x="157" y="125">15%</tspan>
</text>
<text id="8%" font-size="12" font-weight="bold" line-spacing="16"
fill="#F6F6F6">
<tspan x="157" y="170">8%</tspan>
</text>
<text id="14%" font-size="12" font-weight="bold" line-spacing="16"
fill="#F6F6F6">
<tspan x="157" y="215">14%</tspan>
</text>
<text id="63%" font-size="12" font-weight="bold" line-spacing="16"
fill="#F6F6F6">
<tspan x="157" y="259">63%</tspan>
</text>
</g>
</g>
</g>
</symbol>
</svg>
<svg class="sprite-svg" style="border:1px solid" viewBox="0 0 710 231">
<use xlink:href="#Chart_IncreaseInAttacks"></use>
</svg>
<svg class="sprite-svg" style="border:1px solid" viewBox="0 0 710 231">
<use xlink:href="#att-Chart_HowDoYouIdentifyCSThreats_Mobile"></use>
</svg>来源：https://stackoverflow.com/questions/56197353/smil-animation-not-working-using-svg-spritesheet