Question

我正在为gatsby-node.js的{{1}}属性设置动画，该属性包裹在d标记周围并使用
链接几个path标签。在Chrome上运行正常，但是在Firefox上没有动画。我尝试了相对和绝对路径，但无济于事。

defs

使这项工作唯一的方法是重复use并将其全部动画化，还是有办法在Firefox上使这项工作呢？

Answer 1

@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>

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

1 个答案: