Firefox does not animate SVG size changes

Question

We've implemented a web page with an SVG illustration that's manipulated by Javascript code. It's working in all major browsers. The CSS transition attribute is used to animate the transitions between states:

svg rect {
   transition: 0.6s ease;
}

It works in all major browser. However, Firefox only animates the color change but not the change in size and position of the SVG element.

I've set up a minimal example in JS Fiddle: https://jsfiddle.net/gvswzghf/. It grows and shrinks a rectangle and changes the color at the same time.

Is this a know limitation of Firefox? Or how can this be fixed?

---

HTML:

<div>
  <svg id="svg" viewBox="0 0 400 300">
    <rect x="50" y="200" width="300" height="100" fill="#000"></rect>
  </svg>
</div>
<p>
  <button id="bt-grow">Grow</button>
  <button id="bt-shrink">Shrink</button>
</p>

Style sheet:

svg rect {
  transition: 0.6s ease;
}

svg {
  margin: 0 auto;
}

p {
  text-align: center;
}

Javascript code:

var rect = document.getElementById("svg").children[0];

document.getElementById("bt-grow").addEventListener("click", function () {
  rect.setAttribute("y", "0");
  rect.setAttribute("height", 300);
  rect.setAttribute("fill", "#090");
  return false;
});

document.getElementById("bt-shrink").addEventListener("click", function () {
  rect.setAttribute("y", "200");
  rect.setAttribute("height", 100);
  rect.setAttribute("fill", "#000");
  return false;
});

Answer 1

You cannot animate attributes with CSS animation and in SVG 1.1 (which Firefox implements) y and width are attributes. In SVG 2 they are CSS properties. Chrome (and its clone Opera) is currently the only UA to have implemented this part of SVG 2.

For Firefox support you'll have to use SMIL. There are polyfills to add SMIL support to Chrome.