Question

我在不同的内联SVG中使用相同的clipPath：

<svg class="svg-graphic" width="0" height="0" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <clipPath id="hex-mask">
        <polygon points="270,0 0,160 0,485 270,645 560,485 560,160"></polygon>
    </clipPath>
</svg>


<svg class="svg-graphic" width="180" height="200" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <rect clip-path="url(#hex-mask)" x="0" y="0" width="100%" height="100%" fill="purple"  />
</svg>

<svg class="svg-graphic" width="180" height="200" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <rect clip-path="url(#hex-mask)" x="0" y="0" width="100%" height="100%" fill="red"  />
</svg>

使用我想要使用的所有路径来执行0x0px SVG元素是一个好习惯吗？有更好的方法吗？

Answer 1

通常，您在＆lt; defs＆gt;内定义可重用组件。元素（在页面上的＆lt; svg＆gt;元素之一）。＆lt; svg＆gt;中的哪一个并不重要。元素＆lt; defs＆gt;放置，但我建议你把它作为页面上第一个svg内的第一个孩子（因为引用可以在第一次使用时直接解决）。

全局存储SVG剪辑路径的最佳实践

1 个答案: