用带有偏移的背景图像填充 SVG 元素答案

【问题标题】：Fill SVG element with with a background-image with an offset用带有偏移的背景图像填充 SVG 元素
【发布时间】：2023-03-10 18:03:01
【问题描述】：

我想做类似Fill SVG path element with a background-image的事情

但是，我想移动/偏移图像。使用 CSS，可以通过设置 background-image 和 background-position 轻松完成。我该如何使用 SVG？

【问题讨论】：

标签： html css image svg background-image

【解决方案1】：

您可以使用pattern 和带有fill 属性的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>

【讨论】：

【解决方案2】：

你可以在pattern元素上使用patternTransform来变换pattern；它就像您可能已经熟悉的transform 属性一样工作。详情请见the documentation。

【讨论】：