当前位置：文江博客话题详情

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

发布于 2024-10-21 02:22:22 字数 257 浏览 4 评论 0原文

我想做类似的事情用背景填充 SVG 路径元素- image

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

假装爱人 2024-10-28 02:22:22

您可以在模式元素上使用patternTransform来转换模式；它的工作原理与您可能已经熟悉的 transform 属性类似。有关详细信息，请参阅文档。

回复收藏 0 原文

爱的那么颓废 2024-10-28 02:22:22

您可以使用 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>

You can use a pattern and a SVG element with the fill attribute.

Here is an example: insert an image at position (10, 10) with a (40, 550) offset and a size (420, 340). Note that you must set the correct x/y and 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>

回复收藏 0 原文

~没有更多了~