在多邊形內包含png/svg？

Question

我試圖想到的最好的辦法包括SVG多邊形元素中的圖像，就像下面：

<svg id="graph" width="100%" height="400px"> 
 
    <!-- pattern --> 
 
    <defs> 
 
    <pattern id="image" x="0%" y="0%" height="100%" width="100%" 
 
      viewBox="0 0 64 64"> 
 
     <image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"></image> 
 
    </pattern> 
 
    </defs> 
 
    <polygon stroke="red" stroke-width="2px" fill="url(#image)" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon> 
 
</svg>

不過，我也想填補polygon用背景色fill，但由於這是使用上述模式，我不確定正確的方法。

Answer 1

將您的polygon轉換爲您的defs，但將fill取出。然後用use標籤製作兩個副本，後一個填充顏色，前一個填充圖像。您還可以通過包括更多的圖像，改變座標進行多份複印等

<svg id="graph" width="100%" height="400px"> 
 
    <!-- pattern --> 
 
    <defs> 
 
    <pattern id="image1" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 64 64"> 
 
     <image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"></image> 
 
    </pattern> 
 
    <pattern id="image2" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 64 64"> 
 
     <image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/iPhoto.png"></image> 
 
    </pattern> 
 
    <polygon id="myShape" stroke="red" stroke-width="2px" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon> 
 
    </defs> 
 
    <use xlink:href="#myShape" fill="yellow"/> 
 
    <use xlink:href="#myShape" fill="url(#image1)"/> 
 
    <use xlink:href="#myShape" fill="orange" x="400"/> 
 
    <use xlink:href="#myShape" fill="url(#image2)" x="400"/> 
 
</svg>