SV3转换原点/ Firefox问题中的CSS3旋转路径

Question

我在Firefox（43.04）和使用SVG元素中的路径旋转的Transform Origin时遇到问题。

它不是使用目标Rect的原点，而是使用整个SVG本身的中心原点。 Webkit浏览器没有问题。

有什么建议吗？

https://jsfiddle.net/tj86Lz9g/

HTML

<a>
  <svg x="0px" y="0px" viewBox="0 0 100 40">
      <rect class="square" x="0" y="0" width="10" height="10"/>
      <rect class="rectangle" x="20" y="0" width="30" height="10"/>
  </svg>
</a>

CSS

rect {
  fill:#FF0000;
}

rect.square {
  transition: transform .8s ease-in-out;
  transform-origin:center center;
}

a:hover rect.square {
     transform:rotate(360deg);
}