SVG:定义< defs>在页面上后,使用多个< svg>

  • 本文关键字:svg 定义 defs SVG html svg
  • 更新时间 :
  • 英文 :


我希望能够用页面上的<defs>定义一次掩码,然后在多个<svg>元素中重复使用它。

例如:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink">
<defs>
  <clipPath id="SvgjsClipPath1009">
    <rect width="200%" height="80%" x="0" y="20%"></rect>
    <rect width="200%" height="80%" x="0" y="20%"></rect>
  </clipPath>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#SvgjsClipPath1009)">
<image class="Chevron-Image" xlink:href="http://placekitten.com/g/1200/1200" width="1200" height="1200" x="50%" y="50%"></image>
</g>
</svg>

目前这在Chrome中不起作用。这样做或所有SVG都必须是独立的吗?

交叉碎片参考似乎在Chrome中起作用。但是由于您尚未指定SVG片段的明确尺寸,因此它们在Firefox和Chrome中的行为不同。

如果我们采用您的示例并指定尺寸,则在两者中都相同。

例如,在样式表中添加svg { width: 200px; height: 200px }。这是作为小提琴。

您可以将SVG与<defs>插入,并与参考/样式内联SVG。

<html>
<body>
    <style>svg rect{fill:url(#bg);}</style>
    <svg><defs><linearGradient id="bg"></defs></svg>
    <svg><rect x="0" y="0" width="100" height="100" /></svg>
</body>
</html>

(html和SVG修剪为简洁)

最新更新