文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何通过js重新测试animationTransform？

问如何通过js重新测试animationTransform？
EN

Stack Overflow用户
提问于 2019-04-14 05:35:20
回答 2查看 61关注 0票数 2

这里我使用SMIL动画为firefox。我的问题是动画是在页面加载时触发的。我需要通过JS动态启动动画。我认为问题来自于begin属性。那么，我该怎么做呢？下面我附上了我的代码供你参考。

谢谢!

​

代码语言：javascript
复制
<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>

​

javascript
html
css
svg
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-04-14 07:17:50

您可以调用beginElement来触发动画。

我已经把其他的动画链接到第一个开始的动画中，所以它们都还能工作。

​

代码语言：javascript
复制
<button onclick="document.getElementById('t1').beginElement()">trigger</button>
<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="t1"
        attributeName="transform" 
        type="translate"
        values="-505,0; 0,0" 
        begin="indefinite"
        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="t2"
        attributeName="transform" 
        type="translate"
        values="-505,0; 0,0" 
        begin="t1.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="-505,0; 0,0" 
        begin="t2.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="#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>

​

票数 2
EN

Stack Overflow用户

发布于 2019-04-14 07:13:14

为了重新触发动画，您必须使用beginElement()方法。在代码中，我做了一些修改：

第一个animateTransform有一个id = "a"，第二个animateTransform有一个id = "b"，当a动画结束时开始：begin="a.end"，第三个animateTransform从b动画结束时开始：begin="b.end"。

希望能帮上忙。

代码语言：javascript
复制
svg.addEventListener("click",()=>{
  a.beginElement()
})
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55672259

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档