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

Question

I'm animating a d attribute of a path that is wrapped around a defs tag and linked using a
few use tags. This works fine on Chrome, however no animation on Firefox. I tried this with relative and absolute paths to no avail.

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

Is the only way to make this work is by repeating the path and animating them all or is there a way to make this work on Firefox?

Answer 1

As commented by @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.

Therefore, it is necessary to transfer the animation directly inside the <path> tags

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

Start animation after click

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