如何旋转现有带路径圆点的SVG弧线，生成另外三条相似弧线？

嘿，要同时保留原SVG弧线+圆点图形，再添加一个旋转后的版本其实很简单！核心思路是用SVG的<g>（组）标签把原图形打包，然后复制这个组并添加旋转变换即可。下面是具体的实现步骤和修改后的代码：

关键原理 #

SVG的transform属性里的rotate()函数可以实现旋转，完整语法是：
rotate(角度, 旋转中心X坐标, 旋转中心Y坐标)

• 角度：正数是顺时针旋转，负数是逆时针
• 旋转中心：如果不指定，默认是SVG画布的左上角(0,0)，所以通常我们需要指定一个合适的中心（比如图形的中心或者画布中心）

修改后的完整代码 #

下面以绕画布中心顺时针旋转90度为例，给出包含原图形和旋转后图形的代码：

<!DOCTYPE html>
<html>
<body>
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <!-- 原图形组 -->
  <g>
    <path d="M52 90 Q 95 35 138 90" fill="transparent" stroke="#ccc" stroke-width="1"/>
    <!-- Smallest one -->
    <circle cx="53" cy="93" r="2" fill="#601e1c"/>
    <circle cx="137" cy="93" r="2" fill="#601e1c"/>
    <circle cx="57" cy="84" r="3" fill="#601e1c"/>
    <circle cx="133" cy="84" r="3" fill="#601e1c"/>
    <circle cx="65" cy="75" r="4" fill="#601e1c"/>
    <circle cx="125" cy="75" r="4" fill="#601e1c"/>
    <circle cx="77" cy="66" r="5" fill="#601e1c"/>
    <circle cx="111" cy="66" r="5" fill="#601e1c"/>
    <!-- Center circle -->
    <circle cx="95" cy="62" r="6" fill="#601e1c"/>
  </g>

  <!-- 旋转后的图形组：绕画布中心(95,80)顺时针旋转90度 -->
  <g transform="rotate(90, 95, 80)">
    <path d="M52 90 Q 95 35 138 90" fill="transparent" stroke="#ccc" stroke-width="1"/>
    <!-- Smallest one -->
    <circle cx="53" cy="93" r="2" fill="#601e1c"/>
    <circle cx="137" cy="93" r="2" fill="#601e1c"/>
    <circle cx="57" cy="84" r="3" fill="#601e1c"/>
    <circle cx="133" cy="84" r="3" fill="#601e1c"/>
    <circle cx="65" cy="75" r="4" fill="#601e1c"/>
    <circle cx="125" cy="75" r="4" fill="#601e1c"/>
    <circle cx="77" cy="66" r="5" fill="#601e1c"/>
    <circle cx="111" cy="66" r="5" fill="#601e1c"/>
    <!-- Center circle -->
    <circle cx="95" cy="62" r="6" fill="#601e1c"/>
  </g>
</svg>
</body>
</html>

自定义调整技巧 #

• 改变旋转角度：把rotate(90, 95, 80)里的90改成你想要的角度，比如180（翻转）、-45（逆时针转45度）
• 改变旋转中心：如果想绕弧线的最高点(95,35)旋转，就把参数改成rotate(90, 95, 35)
• 区分原图形和旋转图形：可以给旋转后的图形改个颜色，比如把fill="#601e1c"改成fill="#1e605c"，这样更容易区分

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