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