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

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 中的模板，但显然不是？根据W3 docs：

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

但是，'use' 应该支持“任何...图形元素...”，包括行。好吧，line 没有 x、y、width 或 height 属性；它有 x1, y1, x2, y2。

这也将排除传递各种其他属性，如笔画、笔画宽度等。

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

Answer 1

由于 line 既不是 <svg> 元素也不是 <symbol> 元素，所以在这里介绍：

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

所以宽度和高度被忽略，x 和 y 成为平移线的方式。基本上你能做的就这些了。