使用帶有偏移量的背景圖像填充 SVG 元素

Question

我想做一些類似於這個Fill SVG path element with a background-image

但是，我想移動/偏移圖像。 使用 CSS，可以通過設置background-image和background-position輕松完成。 我如何用 SVG 做到這一點？

Answer 1

您可以在模式元素上使用patternTransform來轉換模式； 它就像您可能已經熟悉的transform屬性一樣工作。 有關詳細信息，請參閱文檔。

Answer 2

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

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

 <p> <a href="https://i.imgur.com/MQHYB.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="https://i.imgur.com/MQHYB.jpg"/> </pattern> </defs> <rect fill="url(#europe)" transform="translate(-30 -540)" x="40" y="550" width="420" height="340"/> </svg>