javascript - 如何通过js重新触发animationTransform?
问题描述
在这里,我将 SMIL 动画用于 Firefox。我的问题是动画在页面加载时触发。我需要通过JS动态启动动画。我认为问题出在begin
属性上。那么,我该怎么做呢?下面我附上了我的代码供您参考。
谢谢!
HTML
<svg width="710px" height="231px" viewBox="0 0 710 231">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<defs>
<clipPath id="clip-path-increaseinattacks" class="graph-clipath active">
<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
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="0s"
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
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="0.3s"
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
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="0.6s"
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="#FFFFFF">
<tspan x="159" y="90">350%</tspan>
</text>
<text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="132">250%</tspan>
</text>
<text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="174">70%</tspan>
</text>
</g>
</g>
</g>
</svg>
解决方案
为了重新触发动画,您必须使用该beginElement()
方法。在代码中我做了一些更改:
第一个animateTransform
有一个id = "a"
第二个animateTransform
有一个id = "b"
并且在 a 动画结束时开始:begin="a.end"
第三个animateTransform
在 b 动画结束时开始:begin="b.end"
我希望它有所帮助。
svg.addEventListener("click",()=>{
a.beginElement()
})
<svg id="svg" width="710px" height="231px" viewBox="0 0 710 231">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<defs>
<clipPath id="clip-path-increaseinattacks" class="graph-clipath active">
<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="a"
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="0s;"
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="b"
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="a.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
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="b.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)"
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="#FFFFFF">
<tspan x="159" y="90">350%</tspan>
</text>
<text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="132">250%</tspan>
</text>
<text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="174">70%</tspan>
</text>
</g>
</g>
</g>
</svg>
推荐阅读
- c# - RTI DDS 连接器编译失败
- r - 查找列中每个值的营业额
- python - 将小表存储在一个文件容器中的最佳数据库
- android - 警告 Adb 连接错误:现有连接被远程主机强行关闭
- java - 如何删除从哈希图生成的重复结果
- java - 如何反转字符串数组中的每个字符串?
- java - 在 Reactor Netty HttpClient/HttpServer 配置中,我无法在发往服务器的帖子中检索请求对象
- css - 如何连接和对齐两个框
- c++ - 在启用 UBSAN 的情况下将 double 转换为 long long 时超出可表示值的范围
- discord.js - discord.js TypeError:无法读取未定义的属性“id”并制作失败系统