Question

我正在尝试用HTML中的模式填充SVG图像，但我没有成功。如果我填充模式路径，它的工作原理。但我不能将它应用到svg图像上。

你能帮帮我吗？这是example。

以下是示例代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="400" height="400">
    <defs>
        <pattern id="image" x="0" y="0" width="400" height="400" patternUnits="userSpaceOnUse">
            <image x="0" y="0" xlink:href="latka.jpg" width="100" height="100" />
        </pattern>
    </defs>
    <image x="0" y="0" width="400" height="400" xlink:href="kosile.svg"  fill="url(#image)"/>
</svg>

Answer 1

将fill属性应用于嵌入式SVG是没有意义的。我假设你要做的是创建一个平铺背景，在其上叠加链接的SVG。最简单的方法是添加一个填充了背景图案的<rect>元素，然后将嵌入的SVG图像置于其上。

以下是一个例子：

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <!-- define a pattern using a yellow tile image -->
    <pattern id="bgimg" x="0" y="0" width="60" height="60"
             patternUnits="userSpaceOnUse">
      <image x="0" y="0" width="60" height="60"
             xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Shades_of_yellow.png/60px-Shades_of_yellow.png" />
    </pattern>
  </defs>
  <!-- use this pattern to fill the SVG background -->
  <rect x="0" y="0" width="200" height="200" fill="url(#bgimg)" />
  <!-- Embed another SVG (purple circle) on top of this background -->
  <image x="40" y="40" width="120" height="120"
         xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/5e/FF0084_circle.svg" />
</svg>

＆＃13;

用图案填充SVG图像

1 个答案: