填寫SVG元素與背景圖像與偏移

我想要做類似這樣的Fill SVG path element with a background-image 填寫SVG元素與背景圖像與偏移

東西不過，我想轉移/偏移圖像。使用CSS，可以通過設置background-image和background-position輕鬆完成。我如何使用SVG做到這一點？

來源

2011-03-08 jpbochi

您可以在模式元素上使用patternTransform來轉換模式;它的作用就像您可能已經熟悉的transform屬性。詳情請參閱the documentation。

來源

2011-03-08 23:22:01 Anomie

您可以使用pattern和具有fill屬性的SVG元素。

下面是一個例子：在位置（10,10）處插入一個圖像，偏移量爲（40,550），大小爲（420,340）。請注意，您必須設置正確的x/y和transform="translate(-x1 -y2)"。

<p> 
 
    <a href="http://i.imgur.com/09AoLQtr.jpg">Original image</a> 
 
</p> 
 

 
<svg version="1.1" width="500" height="400" style="background-color: #EEE;"> 
 
    <defs> 
 
<pattern id="europe" patternUnits="userSpaceOnUse" 
 
     width="1456px" height="1094px"> 
 
    <image xlink:href="http://i.imgur.com/09AoLQtr.jpg"/> 
 
</pattern> 
 
    </defs> 
 

 
    <rect fill="url(#europe)" transform="translate(-30 -540)" 
 
    x="40" y="550" width="420" height="340"/> 
 
</svg>

來源

2016-12-23 20:21:59 tokland

填寫SVG元素與背景圖像與偏移

回答

相關問題