如何在SVG中复用路径并围绕中心均匀旋转排列？

核心优化思路 #

要实现路径围绕中心平滑等距旋转复用，关键是让路径的旋转轴心与SVG中心对齐，同时利用rotate()的中心参数避免手动偏移调整：

• 调整路径的基准原点，使其旋转轴心对齐SVG中心
• 使用带中心参数的rotate变换，无需手动计算偏移
• 按元素数量计算等间距角度，保证均匀分布

修改后的完整代码 #

<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>
        <!-- 将路径起点改为相对于中心(150,150)的坐标：原M140,140 → M-10,-10（140-150=-10） -->
        <path id="rotor" d="M-10,-10 
               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>
        <!-- 7个元素，360/7≈51.4286°，依次递增角度，旋转中心固定为(150,150) -->
        <use href="#rotor" transform="rotate(0, 150, 150)"/>
        <use href="#rotor" transform="rotate(51.4286, 150, 150)"/>
        <use href="#rotor" transform="rotate(102.8572, 150, 150)"/>
        <use href="#rotor" transform="rotate(154.2858, 150, 150)"/>
        <use href="#rotor" transform="rotate(205.7144, 150, 150)"/>
        <use href="#rotor" transform="rotate(257.143, 150, 150)"/>
        <use href="#rotor" transform="rotate(308.5716, 150, 150)"/>
    </g>

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

关键细节说明 #

• 路径起点调整：原路径的绝对起点M140,140距离中心(150,150)偏移(-10,-10)，修改后所有相对绘制命令（c）都会基于这个偏移点，旋转时自然围绕中心对齐。
• 旋转参数：rotate(angle, 150, 150)直接指定以红色圆点位置为旋转中心，彻底省去手动计算x/y偏移的麻烦。
• 角度计算：360除以元素数量7得到约51.4286°，每次递增这个角度就能让元素均匀分布在圆周上。

内容的提问来源于stack exchange，提问作者S Mxller