用图案填充SVG图像

Question

我正在尝试用HTML中的模式填充SVG图像，但没有成功。 如果我填满模式路径，它就可以工作。 但是我不能将其应用于svg图像。

请问你能帮帮我吗？ 这是例子 。

这是示例代码：

<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图像置于此之上。

这是一个例子：

 <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>