logo标签列表

在多边形内嵌入一个png/svg文件？

javascriptsvg
3

我正在尝试想出一种最佳的方法，在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填充这个, 但是由于它使用了上述的图案，所以我不确定正确的方法是什么。

1个回答
3
将您的
嘿，这种方法适用于多个多边形，并且定义了多个不同的图像吗？ - absolute
我的更新解决了你的问题吗？我添加了第二个形状，使用不同的图像和不同的背景颜色，但仍然在defs中使用相同的原始多边形。 - Andrew Willems
看起来不错！谢谢你，安德鲁。顺便问一下，你能轻松控制<polygon>内的<image>大小吗？例如，使其变小并居中。 - absolute
你可以在pattern元素中的原始示例中，例如将viewBox值从0 0 64 64更改为0 0 128 128，然后再更改为-32 -32 128 128，以查看一些方法来实现此目的。但是，我认为您不能在不同的use元素中使用基于相同图像的相同图案，并具有不同的大小/位置。您需要复制pattern元素本身并更改其表示属性。 - Andrew Willems
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接