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

Question

我正在为 path 的 d 属性设置动画，该属性环绕 defs 标签并使用
链接几个 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 上实现此功能？

Answer 1

正如 @Robert Longson 评论的那样

I think you'd need to repeat the paths. At the moment SMIL changes to the things that a element points to do not trigger the to re-render.

因此需要在<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 上不起作用

Animating a defined path's d attribute doesn't work on firefox

firefox

svg

svg-animate

smil