Question

我的目标是重新使用线节点，如下所示：

<defs>
   <desc>x1 and x2 values never change, would like to provide y1 and y2 in use</desc>
   <line id="p" x1="5" x2="1019" stroke-width="1" stroke="#808080" opacity=".3"/>
</defs>

<use xlink:href="#p" y1="718.5" y2="718.5"/>

在学习SVG时，我认为use语句中提供的任何参数都被传递给defs中的模板，但显然不是？根据{{3}}：

'use'元素具有可选属性'x'，'y'，'width'和'height'，用于将引用元素的图形内容映射到当前坐标系中的矩形区域

然而，'use'应该支持“Any ... graphics element ...”，包括行。好吧，行没有x，y，width或height属性;它有x1，y1，x2，y2。

这也会妨碍传递各种其他属性，如笔画，笔画宽度等。

use语句是否真的仅限于x，y，width和height，还是有另一种方法可以将属性合并到def模板节点中？

Answer 1

由于行既不是<svg>元素也不是<symbol>元素，因此在此处介绍：

在生成的内容中，'use'将替换为'g'，其中'use'元素的所有属性除了'x'，'y'，'width'，'height'和'xlink：href'被转移到生成的'g'元素。附加的变换translate（x，y）被附加到生成的'g'上'transform'属性的末尾（即右侧），其中x和y代表'x'和'y'的值'use'元素的属性。引用的对象及其内容被深度克隆到生成的树中。

因此忽略宽度和高度，x和y成为平移线的方法。基本上你可以用它来做所有事情。

SVG - 使用<def>和<use> </use> </def>重用行节点

1 个答案: