最佳实践的研究，以店内SVG clipPaths全球

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>元素之一中）定义可重用组件。这与放置哪个< svg>元素无关，但我建议您将其作为页面中第一个svg内的第一个子元素（因为可以解析引用直接在第一次使用）。