AnimateMotion最小最大参数不起作用

时间:2019-05-20 10:21:33

标签: css svg css-animations svg-animate

我正在尝试使用animateMotion并使用最小持续时间和最大持续时间制作动画,但是这些参数似乎并未注册:

这里有一个测试https://codepen.io/anon/pen/YbxoLx

<svg width="600" height="600">
  <style>
    rect {
      -moz-transform-origin: 75px 75px;
      transform-origin: 50% 50%;
    }
  </style>
  <rect id="deepPink-rectangle" width="20" height="20" x="225" y="125" fill="deepPink"  transform="rotate(0) translate(0 0)"/>

  <animateTransform 
           xlink:href="#deepPink-rectangle"
           attributeName="transform" 
           attributeType="XML"
           type="rotate"
           from="0 25 15"
           to="36 25 15"
           dur="5s"
           begin="0s"
           repeatCount="indefinite"
           fill="freeze"
           min= "10s"
           max="20s"
           />

  <set xlink:href="#deepPink-rectangle" attributeName="fill"
       to="#0099AA" begin="click" dur="3s" />

</svg>

0 个答案:

没有答案