[英]Fill SVG image with pattern
我正在嘗試用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>
將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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.