当我在符号标记中使用 with 时，SMIL 动画不起作用
SMIL animation not working when I use with in symbol tag
我需要使用符号标记并在浏览器中引用 SVG 元素。这些 svgs 是 SMIL 动画 svgs。没有符号标签。它工作正常。但如果我在符号内使用并使用参考。它不工作。附上下面的代码。看看。
这是stackblizexample
HTML代码
<svg style="display:none;">
<symbol id="Chart_IncreaseInAttacks" width="710px" height="231px" viewBox="0 0 710 231">
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<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>
<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>
</svg>
<svg class="sprite-svg">
<use xlink:href="#Chart_IncreaseInAttacks"></use>
</svg>
CSS
.sprite-svg {
height:310px;
width:710px;
}
我已将 viewBox 属性添加到您的第二个 SVG 元素。第一个 svg 元素，带有符号的元素现在有 <svg style="position:absolute;" width="0" 我已经删除了 display:none 并且我已经将 <defs> 移到 <symbol> 元素之外
<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>
</svg>
<svg class="sprite-svg" style="border:1px solid" viewBox="0 0 710 231">
<use xlink:href="#Chart_IncreaseInAttacks"></use>
</svg>
我需要使用符号标记并在浏览器中引用 SVG 元素。这些 svgs 是 SMIL 动画 svgs。没有符号标签。它工作正常。但如果我在符号内使用并使用参考。它不工作。附上下面的代码。看看。
这是stackblizexample
HTML代码
<svg style="display:none;">
<symbol id="Chart_IncreaseInAttacks" width="710px" height="231px" viewBox="0 0 710 231">
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<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>
<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>
</svg>
<svg class="sprite-svg">
<use xlink:href="#Chart_IncreaseInAttacks"></use>
</svg>
CSS
.sprite-svg {
height:310px;
width:710px;
}
我已将 viewBox 属性添加到您的第二个 SVG 元素。第一个 svg 元素，带有符号的元素现在有 <svg style="position:absolute;" width="0" 我已经删除了 display:none 并且我已经将 <defs> 移到 <symbol> 元素之外
<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>
</svg>
<svg class="sprite-svg" style="border:1px solid" viewBox="0 0 710 231">
<use xlink:href="#Chart_IncreaseInAttacks"></use>
</svg>