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

时间:2013-04-23 13:33:05

标签: svg transform

我想将变换应用于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)" />

有办法吗?

1 个答案:

答案 0 :(得分:1)

将元素包裹在<g>容器中并旋转,例如

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

<g>转换属性设置动画时,所有子项都将旋转