将SVG元素剪辑为自身

时间:2014-06-02 15:48:27

标签: svg

除了已经存在的clippath之外,最简单且最简单的方法是将SVGElement剪辑为自身的最轻量级方法吗?

<path d="M 0 0 L 500 0 L 500 500 L 0 500 Z" clip-path="url(#existing-clippath)"/>

我目前的解决方案看起来像这样,但看起来非常麻烦

<clippath id="element-itself">
  <path d="M 0 0 L 500 0 L 500 500 L 0 500 Z"></path>
</clippath>
<g clip-path="url(#element-itself)">
  <path d="M 0 0 L 500 0 L 500 500 L 0 500 Z" clip-path="url(#existing-clippath)"/>
</g>

修改

如Robert Longson所指出的,使用<use>元素似乎是一个不错的选择:

<clippath id="element-itself">
  <use xlink:href="#element">
</clippath>
<g clip-path="url(#element-itself)">
  <path id="element" d="M 0 0 L 500 0 L 500 500 L 0 500 Z"
        clip-path="url(#existing-clippath)"/>
</g>

有没有更简单/更短的方法来实现这一目标?

0 个答案:

没有答案