在 <defs> 的 <clipPath> 中使用 <use>答案

【问题标题】：Use <use> within <clipPath> in <defs>在 <defs> 的 <clipPath> 中使用 <use>
【发布时间】：2018-03-02 05:43:52
【问题描述】：

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

例如：

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

【问题讨论】：

这不是很容易验证吗？你到底有什么问题？
@RobertLongson 我在不同的上下文中尝试了很多次，其中rect 被g 包围，id。我不得不承认我从未尝试过帖子中的简单示例。
所以您真正要寻找的答案是，clipPath 中的元素必须直接指向一个形状。你要问的问题是为什么这个指向的 clipPath 不起作用？
@RobertLongson 是的，但这将是另一个问题。我会留下这个问题，因为它可能会帮助人们。似乎 svg 根本不支持 clipPaths 内的 g 对象。

标签： svg

【解决方案1】：

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

<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的边框。

【讨论】：