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

Question

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

http://jsfiddle.net/meo/4nBnS/

<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

通常，您会在 <defs> 元素内（在页面上的 <svg> 元素之一中）定义可重用组件。<defs> 放置在哪个 <svg> 元素中并不重要，但我建议您将其作为第一个子元素放在页面上的第一个 svg 中（因为可以解析引用首次使用时直接使用）。