Question

我希望能够在页面上使用<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都必须是自包含的？

Answer 1

跨片段引用似乎在Chrome中运行良好。但是，由于您没有为svg片段指定显式大小，因此它们在Firefox和Chrome中的行为方式不同。

如果我们采用你的例子并指定大小，那么两者的工作原理相同。

E.g在样式表中添加svg { width: 200px; height: 200px }。这是as a fiddle。

Answer 2

您可以使用<defs>内联SVG，并使用引用/样式内联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）

SVG：在页面上定义<defs>一次，在多个<svg>中使用？</svg> </defs>

2 个答案: