如何用SVG或JavaScript为SVG路径填充可自定义间隙的形状/图标？

一、纯SVG方案（基于图案填充） #

这种方案无需JavaScript，直接用SVG内置的<pattern>元素实现路径的图标填充，间隙可通过图案尺寸精准控制，支持描边填充和内部填充两种场景。

示例1：路径描边填充图标 #

<svg width="100" height="100">
  <!-- 定义填充图案：宽度=图标尺寸+自定义gap -->
  <pattern id="dotStrokePattern" width="12" height="12" patternUnits="userSpaceOnUse">
    <!-- 圆形图标（直径10px），gap=2px（12-10=2） -->
    <circle cx="6" cy="6" r="5" fill="black" />
  </pattern>

  <!-- 目标路径，将描边设为图案引用 -->
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" 
        stroke="url(#dotStrokePattern)" 
        stroke-width="10" <!-- 必须和图标直径一致，避免图案变形 -->
        fill="transparent" />
</svg>

示例2：路径内部填充图标 #

如果需要填充路径内部区域，只需调整填充属性：

<svg width="100" height="100">
  <pattern id="dotFillPattern" width="12" height="12" patternUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="5" fill="black" />
  </pattern>

  <path d="M 10 10 H 90 V 90 H 10 L 10 10" 
        fill="url(#dotFillPattern)" 
        stroke="none" />
</svg>

关键说明 #

• pattern的width/height值 = 图标尺寸 + 自定义gap
• 描边场景下，stroke-width必须和图标尺寸匹配
• 可替换任意图标：把<circle>换成<path>、<polygon>或<use>引用自定义<symbol>即可
• 适配所有带路径的SVG，无需额外依赖

二、JavaScript方案（精准控制位置与方向） #

如果需要更灵活的控制（比如图标随路径方向旋转、不同位置用不同图标），可以用JS计算路径上的点位，动态生成图标。

示例代码 #

// 自定义配置
const gap = 2;
const iconSize = 10;
const iconRadius = iconSize / 2;
const path = document.querySelector('path');
const svg = path.ownerSVGElement;

// 获取路径总长度
const pathLength = path.getTotalLength();

// 计算图标间隔（尺寸+间隙）
const step = iconSize + gap;

// 遍历生成图标
for (let i = 0; i < pathLength; i += step) {
  // 获取路径上的点位与方向角度
  const currentPoint = path.getPointAtLength(i);
  const nextPoint = path.getPointAtLength(Math.min(i + 0.1, pathLength));
  const angle = Math.atan2(nextPoint.y - currentPoint.y, nextPoint.x - currentPoint.x) * 180 / Math.PI;

  // 创建圆形图标
  const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  circle.setAttribute('cx', currentPoint.x);
  circle.setAttribute('cy', currentPoint.y);
  circle.setAttribute('r', iconRadius);
  circle.setAttribute('fill', 'black');

  // 让图标跟随路径方向旋转
  circle.setAttribute('transform', `rotate(${angle}, ${currentPoint.x}, ${currentPoint.y})`);

  svg.appendChild(circle);
}

关键说明 #

• 用getTotalLength()获取路径总长度，getPointAtLength()获取每个点位坐标
• 间隔step直接由iconSize + gap控制，精准自定义间隙
• 支持添加图标旋转逻辑，让图标贴合路径走向
• 可替换为任意图标：将<circle>换成<use>引用预定义的<symbol>即可
• 适配所有可获取到的SVG路径元素

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