Как разместить изображение в SVG Path в качестве настенной плитки

Question

привет, у меня есть путь SVG, куда я помещаю изображение https://i.imgur.com/NFhr6hq.jpg из.когда я размещаю его просто в центре пути и не заполняю другие области, как показано на моем желаемом изображении https://i.imgur.com/tdjZpKh.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, который обрезает белую границу изображения следующим образом:

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

ОБНОВЛЕНИЕ:

ОП комментирует:

У меня обновленный вопрос, там у меня нет прямоугольника, кроме пути.когда я нажимаю на путь, область заполнения пути обновления 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"  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>

Answer 2

Узор заливки любой формы

<rect width="100%" height="100%" fill="url(#img1)" /> 

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

</svg>

Обновление

Путь заполнения плитки

<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<defs>
  <pattern  id="img1" patternUnits="userSpaceOnUse" width="25" height="25">
    <image x="0" y="0" xlink:href="https://i.imgur.com/NFhr6hq.jpg"  width="25px" height="25px" />
  </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>