如何让SVG图案与应用它的线条斜率正确对齐

要让定义的图案随描边路径一同倾斜，核心是通过patternTransform属性对图案进行旋转变换，使其角度与路径匹配。

针对直线路径的解决方案 #

对于你提供的45度直线，只需给<pattern>添加patternTransform属性，绕图案中心旋转对应角度即可：

<svg width="400" height="400">
  <defs>
    <!-- 加入patternTransform，绕图案中心(8,10)旋转45度 -->
    <pattern id="pattern" x="0" y="0" width="16" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45 8 10)">
      <path d="M 0 0 L 3 3 L 0 6 L 12 6 L 15 3 L 12 0" stroke="black" stroke-width="1"/>
    </pattern>
  </defs>

<line x1="0" y1="0" x2="200" y2="200" style="stroke:url(#pattern);stroke-width:20" />
</svg>

参数说明 #

• rotate(45 8 10)：45是旋转角度（和直线的倾斜角度一致），8 10是图案的中心坐标（由图案的width=16、height=20计算得出：16/2=8，20/2=10），确保旋转后图案不会偏移。

针对曲线路径的注意事项 #

如果是曲线（如贝塞尔曲线），直线的固定旋转方法不再适用，因为曲线各段的倾斜角度是变化的。这种情况下没有直接的简单参数实现自动跟随，通常的替代方案有两种：

• 使用<marker>定义图案单元，设置markerUnits="userSpaceOnUse"并沿路径重复放置；
• 将图案制作成与路径切线方向一致的连续单元，通过stroke-dasharray控制重复间隔。

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