对已定义路径的d属性进行动画处理在Firefox上不起作用

debugcn 发表于 Dev

Zainab Hussain

我正在为包裹在标签周围并使用几个标签链接的d属性设置动画。在Chrome上运行正常，但是在Firefox上没有动画。我尝试了相对和绝对路径，但无济于事。pathdefs
use

<svg viewBox="0 0 300 100">
  <defs>
    <path id="a" d="M0,20 H200 V70 H0z" />
  </defs>
  <use xlink:href="#a" />
  <animate xlink:href="#a" attributeName="d" values="M0,20 H200 V70 H0z; M0,20 H200 V45 H0z" keyTimes="0;1" dur="1s" begin="0s" fill="freeze" />
</svg>

使这项工作唯一的方法是重复path全部动画并对其进行动画处理，或者是否有办法在Firefox上使其工作？

亚历山大·TT

正如@Robert Longson所评论

我认为您需要重复这些路径。目前，SMIL更改为元素所指向的内容不会触发重新渲染。

因此，有必要直接在<path>标签内传输动画

<svg viewBox="0 0 300 100">
  <defs>
    <path id="a" d="M0,20 H200 V70 H0z" >
      <animate
      attributeName="d"
      values="
            M0,20 H200 V70 H0z;
            M0,20 H200 V45 H0z"
            keyTimes="0;1"
            dur="1s"
            begin="0s"
            fill="freeze" />
    </path>
  </defs>
  <use xlink:href="#a" />
 
</svg>

单击后开始动画

<svg id ="svg1" viewBox="0 0 300 100">
  <defs>
    <path id="a" d="M0,20 H200 V70 H0z" >
      <animate
      attributeName="d"
      values="
            M0,20 H200 V70 H0z;
            M0,20 H200 V45 H0z"
            keyTimes="0;1"
            dur="1s"
            begin="svg1.click"
            fill="freeze" />
    </path>
  </defs>
  <use xlink:href="#a" />
 
</svg>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。