如何将图像作为墙砖放置在 svg 路径中

Posted 2023-03-28

【中文标题】如何将图像作为墙砖放置在 svg 路径中

【英文标题】：how to place an image in svg path as wall tiles

【发布时间】：2020-01-20 04:56:11

【问题描述】：

嗨，我有 svg 路径，我在其中放置图像 https://i.imgur.com/NFhr6hq.jpg 来自。当我将其仅显示在路径中心并且没有按照我想要的图像填充其他区域时https://i.imgur.com/tdjZpKh.jpg

如何将图像作为瓷砖放置在墙上？

<defs>
  <pattern  id="img1" patternUnits="userSpaceOnUse"  >
    <image x="0" y="0" xlink:href="stile.jpg"    />
  </pattern>
</defs>
 <path d="M 752 180 v 192 h 215 V 145 L 752 180 Z M 916 358 l -130 0.246 v -78.369 L 916 270 V 358 Z"/>
</path>



 <script>
jQuery(function($)
    $('path').click(function()


       this.style.fill = "url(#img1)";
        alert(this.id);
    );
);
</script>

当我点击带有 jquery 的路径时，我会在其上应用图像

【参考方案1】：

问题是您的图像有白色边框。如果您想使用该图像，您需要将图像放在一个带有 viewBox 的符号内，该 viewBox 会像这样裁剪图像的白色边框：

<svg   viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="s" viewBox="2.5 2.5 38 35">
<image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg"    />
</symbol>
  <pattern  id="img1" patternUnits="userSpaceOnUse"  >
   <use xlink:href="#s"   />
  </pattern>
</defs>
<rect   fill="url(#img1)" />
</svg>

或者，您可以使用没有白色边框的不同图像，在这种情况下，您可以使用@Alexandr_TT 的解决方案。

更新：

OP 正在评论：

我有更新的问题，我没有 rect 但 path 。当我点击路径时，jquery 用图像更新路径填充区域

在这种情况下，不是填充矩形，而是像这样填充路径：

<svg viewBox="750 145 230 230" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="s" viewBox="3.1 2.5 38 35">
<image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg"    />
</symbol>
  <pattern  id="img1" patternUnits="userSpaceOnUse"  >
   <use xlink:href="#s"   />
  </pattern>
</defs>
<!--<rect   fill="url(#img1)" />-->
<path d="M 752 180 v 192 h 215 V 145 L 752 180 Z M 916 358 l -130 0.246 v -78.369 L 916 270 V 358 Z" fill="url(#img1)"/>
</svg>

【讨论】：

我已经更新了问题，我没有 rect 但 path 。当我点击路径时，jquery 用图像更新路径填充区域

在这种情况下，您填充路径。我已经更新了我的答案以显示如何。请看一下

他们为此使用画布，但 SVG 是一个不错的选择。

你能建议我用什么来创建类似的应用程序吗？

但他们使用的是 svg，因为画布不支持点击和其他事件

【参考方案2】：

填充任何形状的图案

<rect   fill="url(#img1)" /> 

<svg   viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
  <pattern  id="img1" patternUnits="userSpaceOnUse"  >
    <image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg"    />
  </pattern>
</defs>
<rect   fill="url(#img1)" /> 

</svg>

更新

平铺填充路径

<svg   viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
  <pattern  id="img1" patternUnits="userSpaceOnUse"  >
    <image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg"    />
  </pattern>
</defs>

 <path stroke="gray" fill="url(#img1)" transform="translate(-700 -100)" d="M 752 180 v 192 h 215 V 145 L 752 180 Z M 916 358 l -130 0.246 v -78.369 L 916 270 V 358 Z" />

</svg>

【讨论】：

但我有 我正在通过模式填充图像

@Rahul king 将路径代码添加到您的问题中，我会完善我的答案

我已经更新了我的代码。正在单击路径并使用 jquery 在其上应用图像

如果我有多个路径，是否需要更改所有路径的转换值？

@Rahul king 据我所知，从您的附加条件来看，与初始条件相比，问题的内容完全不同。您已经回答了最初的问题。因此，您必须选择并接受现有答案，并在具有所有新条件的另一个主题中提出新问题。