我希望能够用页面上的<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修剪为简洁)