在多邊形中包含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> 

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

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>