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

Question

嗨，我有 svg 路径，我在其中放置图像 /image/WPksR.jpg从 。当我将其仅显示在路径中心而不填充其他区域时，如下我想要的图像 /image/rNkJD.jpg

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

<defs>
  <pattern  id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image x="0" y="0" xlink:href="stile.jpg"  width="100" height="100" />
  </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 单击路径时，正在其上应用图像

Answer 1

问题是您的图像有白色边框。如果您想使用该图像，则需要将图像放入带有 viewBox 的符号内，该 viewBox 会裁剪图像的白色边框，如下所示:

<svg width="100%" height="100%" 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"  width="48" height="45" />
</symbol>
  <pattern  id="img1" patternUnits="userSpaceOnUse" width="30" height="30">
   <use xlink:href="#s" width="30" height="30" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#img1)" />
</svg>

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

更新:

OP 正在评论:

i have updatted question, there i have no rect but path . when i click on path , jquery update path fill area with image

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

<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"  width="48" height="45" />
</symbol>
  <pattern  id="img1" patternUnits="userSpaceOnUse" width="38" height="35">
   <use xlink:href="#s" width="38" height="35" />
  </pattern>
</defs>
<!--<rect width="100%" height="100%" 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>