使用带有偏移量的背景图像填充 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>