使用< use>在< clipPath>中在< defs>中 [英] Use <use> within <clipPath> in <defs>

问题描述

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

Can I use <use> to refer to a previously declared object inside a <clipPath> declaration?
So that it uses that element as definition for the clip path?

例如:

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

推荐答案

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

Yes, you can use the <use> command inside the clipPath declaration to refer to any external objects inside the svg file. In the example below, clipPath cuts a 80 x 80px square from the image.

<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>

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

The red square shows the border of the entire canvas svg.

这篇关于使用< use>在< clipPath>中在< defs>中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！