svg - 如何定义一个变换?

Question

我想将变换应用于 SVG 中的独立对象，然后为该变换设置动画。

我可以这样做：

<rect (...) transform="rotate(30)" />
<circle (...) transform="rotate(30)" />
(...)
<path (...) transform="rotate(30)" />

但是我必须分别为每个元素设置动画。

我想做的是：

<defs>
  <transform id="rotation">
    <rotate angle="30" />
  </transform>
</defs>
<rect (...) transform="url(#rotation)" />
<circle (...) transform="url(#rotation)" />
(...)
<path (...) transform="url(#rotation)" />

有没有办法做到这一点？

Answer 1

将元素包装在<g>容器中并旋转它，例如

<g transform="rotate(30)">
<rect (...)  />
<circle (...)  />
(...)
<path (...) />
</g>

当您为<g>变换属性设置动画时，所有子项都将旋转