Question

我想做类似于Fill SVG path element with a background-image

的事情

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

Answer 1

您可以在模板元素上使用patternTransform来转换模式;它就像你可能已经熟悉的transform属性一样工作。有关详细信息，请参阅the documentation。

Answer 2

您可以使用pattern和带有fill属性的SVG元素。

以下是一个示例：在位置（10,10）处插入图像，其中偏移量为（40,550），尺寸为（420,340）。请注意，您必须设置正确的x / y和transform="translate(-x1 -y2)"。

＆＃13;

<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>

＆＃13;

使用带偏移量的背景图像填充SVG元素

2 个答案: