动画定义路径的 d 属性在 Firefox 上不起作用答案

【问题标题】：Animating a defined path's d attribute doesn't work on firefox动画定义路径的 d 属性在 Firefox 上不起作用
【发布时间】：2021-01-14 16:35:31
【问题描述】：

我正在为 path 的 d 属性设置动画，该属性包裹在 defs 标记周围并使用 a
很少有use 标签。这在 Chrome 上运行良好，但在 Firefox 上没有动画。我用相对路径和绝对路径尝试过，但无济于事。

<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 上完成这项工作？

【问题讨论】：

我认为您需要重复路径。目前 SMIL 更改为元素指向的内容不会触发重新渲染。
@RobertLongson - 我明白了，谢谢！感谢您的评论。 :)

标签： firefox svg svg-animate smil

【解决方案1】：

正如 @Robert Longson

评论的那样

我认为您需要重复路径。目前 SMIL 变为元素指向的东西不会触发 to 重新渲染。

因此，需要在<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>

【讨论】：