在<defs>中的<clippath>中使用<use>

Question

我可以使用<use>来引用<clipPath>声明中先前声明的对象吗？ 那么它使用该元素作为剪辑路径的定义吗？

例如：

＆＃13;

＆＃13;

<defs>
    <rect id="foo" width="20" height="20" />
    <clipPath id="bar">
        <use href="#foo" />
    </clipPath>
</defs>

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，您可以使用<use>声明中的clipPath命令来引用svg文件中的任何外部对象。 在下面的示例中，clipPath从图像中剪切80 x 80px方块。

＆＃13;

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         viewBox="0 0 300 300" style="border:1px solid red">
<defs>
    <rect id="foo" width="80" height="80" />
    <clipPath id="bar">
        <use href="#foo" />
    </clipPath>
</defs> 

<image clip-path="url(#bar)" xlink:href="http://lorempixel.com/600/600/nature/1" x="20" y="20" height="100%" width="100%" />
</svg>

＆＃13;

＆＃13;

＆＃13;

红色方块显示整个画布svg的边框。