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标签制作两份副本，后面一张用你的颜色填充，前面一张用你的图片填充。您还可以通过包含更多图像，更改坐标等来制作多个副本。

＆＃13;

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

＆＃13;

在多边形中包含png / svg？

1 个答案: