SVG：如何显示多个路径并绕中心旋转它们？

Question

我是 SVG 新手。

我试图用 defs 中的路径定义一个“模板”并重用它。 我希望路径围绕中心旋转，且路径之间的间距相等

这就是我已经走了多远。红点是中间。

这是我的代码：

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
    <rect x="0" y="0" width="300" height="300" fill="#0B3E27"/>
    
   <defs>
        <path id="rotor" d="M140,140 
               c0,0,-40,-20,-100,0
               c0,0,50,-10,50,20
               c0,0,0,-5,50,-20"  
            fill="none" 
            stroke-width="2" 
            stroke="white"/>
    </defs>

    <g>
      <use href="#rotor" x="-2" y="0"/>          
      <use href="#rotor" x="54" y="-160" transform="rotate(50)"/> 
      <use href="#rotor" x="-32" y="-305" transform="rotate(100)"/>  
      <use href="#rotor" x="-198" y="-332" transform="rotate(150)"/>    
      <use href="#rotor" x="-326" y="-223" transform="rotate(200)"/>   
      <use href="#rotor" x="-325" y="-55" transform="rotate(250)"/>    
      <use href="#rotor" x="-195" y="53" transform="rotate(300)"/>    
    </g>

    <circle cx="150" cy="150" r="2" fill="red"></circle>
</svg>

如何在 SVG 中顺利完成此操作？

提前非常感谢，

西蒙

Answer 1

您需要为旋转指定一个“枢轴点”。
您可以使用

transform-origin

属性或 CSS 属性，也可以在

rotate()

属性中直接将这一点指定为 2. 和 3. 参数，如下所示

rotate(50 150 150)

.

此外，您可以通过调整路径数据中的第一个坐标来调整转子形状的位置

d

属性（

M150 150

）

M145 150 c0 0-40-20-100 0 0 0 50-10 50 20 0 0 0-5 50-20

这样您就不需要为每个

<use>

实例添加额外的 x 和 y 偏移量。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
    <rect x="0" y="0" width="300" height="300" fill="#0B3E27"/>
    
   <defs>
        <path id="rotor" d="M145 150 c0 0-40-20-100 0 0 0 50-10 50 20 0 0 0-5 50-20"  
            fill="none" 
            stroke-width="2" 
            stroke="white"/>
     <style>
    </defs>

    <g >
      <use href="#rotor" />          
      <use href="#rotor"  transform="rotate(50 150 150)" /> 
      <use href="#rotor"  transform="rotate(100 150 150)"/>  
      <use href="#rotor"  transform="rotate(150 150 150)"/>    
      <use href="#rotor"  transform="rotate(200 150 150)"/>   
      <use href="#rotor"  transform="rotate(250 150 150)"/>    
      <use href="#rotor"  transform="rotate(300 150 150)"/>    
    </g>

    <circle cx="150" cy="150" r="2" fill="red"></circle>
</svg>

使用 CSS 变换原点

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
    <rect x="0" y="0" width="300" height="300" fill="#0B3E27"/>
    
   <defs>
        <path id="rotor" d="M145 150 c0 0-40-20-100 0 0 0 50-10 50 20 0 0 0-5 50-20"  
            fill="none" 
            stroke-width="2" 
            stroke="white"/>
     <style>
      
       use{
         transform-origin: 150px 150px;
       }
       
     </style>
    </defs>

    <g >
      <use href="#rotor" />          
      <use href="#rotor"  transform="rotate(50)" /> 
      <use href="#rotor"  transform="rotate(100)"/>  
      <use href="#rotor"  transform="rotate(150)"/>    
      <use href="#rotor"  transform="rotate(200)"/>   
      <use href="#rotor"  transform="rotate(250)"/>    
      <use href="#rotor"  transform="rotate(300)"/>    
    </g>

    <circle cx="150" cy="150" r="2" fill="red"></circle>
</svg>