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>转换属性设置动画时，所有子项都将旋转

如何在<defs>？</defs>中定义变换

1 个答案: