如何在SVG路径中用图片填充替代纯色填充？

要给SVG路径替换纯色填充为图片填充，你需要借助SVG的<pattern>元素定义填充图案，具体操作如下：

• 在SVG内部添加<defs>标签（用于存放可复用的SVG定义），在<defs>中创建<pattern>元素，指定唯一ID（比如img-pattern），并设置图案的宽高、对齐规则等属性。
• 在<pattern>内部插入<image>标签，引入目标填充图片，同时设置图片宽高匹配pattern的尺寸。
• 将路径的fill属性设置为url(#img-pattern)，引用刚才定义的图案。

以下是修改后的完整代码示例：

<div class="welcome">
  <svg viewBox="0 30 800 300">
    <!-- 定义图片填充图案 -->
    <defs>
      <pattern id="img-pattern" patternUnits="userSpaceOnUse" width="100" height="100">
        <image href="你的图片地址.jpg" width="100" height="100" />
      </pattern>
    </defs>
    <!-- 路径引用图片填充 -->
    <path id="curve" d="M 200 300 A 50 50 0 1 1 600 300 L 600 550 L 200 550 L 200 300 " fill="url(#img-pattern)" />
    <text class="home-text">
      <textPath xlink:href="#curve">
        Dummy Text Dummy Text Dummy Text Dummy Text
      </textPath>
    </text>
  </svg>
</div>

关键参数说明： #

• patternUnits="userSpaceOnUse"：表示pattern的尺寸基于SVG的用户坐标系，而非元素自身尺寸。
• 将<image>的href替换为你实际的图片URL或本地路径。
• 调整<pattern>和<image>的宽高，可控制图片填充的重复密度。

如果需要让图片完整覆盖路径且不重复，可以调整pattern的宽高为路径的实际范围（你的路径x范围200-600，宽400；y范围300-550，高250），同时设置图片尺寸匹配：

<pattern id="img-pattern" patternUnits="userSpaceOnUse" width="400" height="250">
  <image href="你的图片地址.jpg" width="400" height="250" />
</pattern>

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