如何为SVG格式贝塞尔曲线的描边添加纹理效果

SVG的stroke属性仅支持颜色、渐变引用、图案引用三种类型的值，直接传入图片资源路径不符合SVG规范，因此无法生效。

要实现折线/贝塞尔曲线的纹理描边效果，需要借助SVG的<pattern>标签定义纹理模板，再将stroke属性指向该模板引用即可，完整实现代码如下：

<?xml version="1.0" standalone="no"?>
<svg width="160" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- 定义可复用的纹理图案 -->
  <defs>
    <pattern id="strokeTexture" patternUnits="userSpaceOnUse" width="100" height="100">
      <image href="https://media.freestocktextures.com/cache/0d/42/0d42eeb83ad3a56c97468d69721b2c18.jpg" width="100" height="100" preserveAspectRatio="xMidYMid slice"/>
    </pattern>
  </defs>
  <polyline points="40 60 80 20 120 60" stroke="url(#strokeTexture)" stroke-width="20"
      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
</svg>

参数说明：

• <defs>标签用于存放SVG可复用元素，定义在其中的图案不会直接渲染，仅在被引用时生效
• patternUnits="userSpaceOnUse"表示图案尺寸与SVG画布单位保持一致，避免纹理随描边尺寸变化出现拉伸变形
• 可通过调整pattern的宽高、image的preserveAspectRatio属性，自定义纹理的平铺密度、裁剪规则
• 该方案同样适用于path标签实现的贝塞尔曲线描边，仅需要替换polyline标签为对应的贝塞尔路径代码即可。

最终实现效果如下：

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