SVG技术问询：如何沿圆形路径绘制形状并将形状作为圆形描边？

嘿，针对你提出的两个SVG绘图问题，我整理了实用的解决方案和代码示例，直接就能上手用～

这里分两种常见场景，你可以根据需求选择：

场景1：固定数量的形状沿圆形排列（比如12个图标绕成一圈） #

这种情况用<use>元素配合变换最直观，先定义一个基础形状，然后多次引用并旋转定位：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 先定义要重复的形状（这里用三角形示例） -->
  <defs>
    <polygon id="triangle" points="0,-5 5,5 -5,5" fill="#ff4444" />
  </defs>

  <!-- 可选：画个灰色圆形当参考线，方便对齐 -->
  <circle cx="100" cy="100" r="80" fill="none" stroke="#ddd" />

  <!-- 把坐标系移到圆心，然后逐个旋转排列形状 -->
  <g transform="translate(100,100)">
    <use href="#triangle" transform="rotate(0) translate(0,-80)" />
    <use href="#triangle" transform="rotate(30) translate(0,-80)" />
    <use href="#triangle" transform="rotate(60) translate(0,-80)" />
    <use href="#triangle" transform="rotate(90) translate(0,-80)" />
    <use href="#triangle" transform="rotate(120) translate(0,-80)" />
    <use href="#triangle" transform="rotate(150) translate(0,-80)" />
    <use href="#triangle" transform="rotate(180) translate(0,-80)" />
    <use href="#triangle" transform="rotate(210) translate(0,-80)" />
    <use href="#triangle" transform="rotate(240) translate(0,-80)" />
    <use href="#triangle" transform="rotate(270) translate(0,-80)" />
    <use href="#triangle" transform="rotate(300) translate(0,-80)" />
    <use href="#triangle" transform="rotate(330) translate(0,-80)" />
  </g>
</svg>

• 核心逻辑：先把整个组的坐标系移到圆心，然后每个形状先旋转对应角度（360/数量），再平移到圆形的半径位置（这里是80）。
• 如果要调整形状数量，只需要修改旋转角度和<use>的数量就行。

场景2：无缝重复的形状沿圆形路径连续排列 #

这种情况用<pattern>定义图案，再把图案应用到路径的描边，实现连续排列：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义重复的形状图案，width/height控制形状间距 -->
    <pattern id="shapePattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <polygon points="10,0 15,10 5,10" fill="#2196F3" />
    </pattern>
    <!-- 定义完整的圆形路径 -->
    <path id="circlePath" d="M100,20 A80,80 0 1,1 100,180 A80,80 0 1,1 100,20" fill="none" />
  </defs>

  <!-- 把图案作为路径的描边，stroke-width控制形状显示的高度 -->
  <use href="#circlePath" stroke="url(#shapePattern)" stroke-width="10" />
</svg>

简单来说，就是让圆形的“边框”不是实线，而是重复的自定义形状。核心思路还是用<pattern>定义形状，然后赋值给圆形的stroke属性：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义描边用的形状图案 -->
    <pattern id="strokePattern" width="15" height="15" patternUnits="userSpaceOnUse"
             patternContentUnits="userSpaceOnUse">
      <!-- 这里用菱形作为示例，你可以换成任何形状 -->
      <path d="M7.5,2 L12,7.5 L7.5,13 L3,7.5 Z" fill="#4CAF50" />
    </pattern>
  </defs>

  <!-- 圆形使用自定义图案作为描边 -->
  <circle cx="100" cy="100" r="70" fill="none" 
          stroke="url(#strokePattern)" stroke-width="10" />
</svg>

• 调整技巧：
  • 修改pattern的width和height可以控制形状之间的间距；
  • stroke-width要和形状的尺寸匹配，确保形状能完整显示在描边区域内；
  • 如果形状显示错位，可以调整图案内形状的坐标，或者添加patternTransform属性微调。

进阶：让形状随圆形路径方向旋转 #

如果需要形状沿着圆形的切线方向自动旋转（比如箭头始终指向外侧），可以用<textPath>配合<symbol>实现：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="arrow" viewBox="0 0 10 10">
      <path d="M0,5 L10,0 L10,10 Z" fill="#FF9800" />
    </symbol>
    <path id="circlePath" d="M100,20 A80,80 0 1,1 100,180 A80,80 0 1,1 100,20" fill="none" />
  </defs>

  <!-- 用textPath承载形状，自动沿路径方向旋转 -->
  <text font-size="0">
    <textPath href="#circlePath" startOffset="0">
      <tspan><use href="#arrow" width="10" height="10" /></tspan>
      <tspan dx="15"><use href="#arrow" width="10" height="10" /></tspan>
      <tspan dx="15"><use href="#arrow" width="10" height="10" /></tspan>
      <!-- 重复添加tspan来控制形状数量和间距 -->
    </textPath>
  </text>
</svg>

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