SVG:在页面上定义<defs>一次,在多个<svg>中使用？

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 中的行为有所不同。

如果我们以您的示例并指定尺寸，那么两者的工作原理相同。

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