SVG UseElement.height 属性介绍

SVG UseElement 是 SVG 的一种元素类型，它可以让我们在 SVG 图像中重复使用一个已经存在的元素。其中，height 属性就是用来设置 UseElement 元素所引用的目标元素的高度。

语法

UseElement 元素的 height 属性值可以是以下三种类型之一：

• ：表示具体的长度，比如 100px。
• ：表示百分比，比如 50%。
• auto：表示使用目标元素的默认高度。

<use xlink:href="#mySquare" height="100px"></use>

使用方式

在 UseElement 元素中添加 height 属性，可以通过改变该属性值来控制所引用的目标元素的高度。

需要注意的是，如果目标元素本身已经有了 height 属性，那么在 UseElement 中设置的 height 属性将会覆盖它。如果 UseElement 中没有设置 height 属性，那么将会使用目标元素的默认高度。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect id="mySquare" x="10" y="10" width="50" height="50"/>
  <use xlink:href="#mySquare" height="100px"></use>
</svg>

这段代码会创建一个 SVG，里面包含一个矩形和一个 UseElement 元素，UseElement 引用了之前定义的矩形，并且设置了其高度为 100px。

示例

在下面的例子中，我们设置了两个 UseElement 元素，分别引用了之前定义的圆形和方形元素，并且都设置了不同的高度。你可以通过改变 height 属性的值，来观察不同高度对元素的影响。

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="50" cy="50" r="40"/>
  <rect id="mySquare" x="100" y="50" width="50" height="50"/>
  <use xlink:href="#myCircle" height="80" x="20" y="20"/>
  <use xlink:href="#mySquare" height="120" x="100" y="20"/>
</svg>

总结

通过 UseElement 元素的 height 属性，我们可以轻松地控制所引用的目标元素的高度。无论是使用具体的长度、百分比，还是使用默认高度，都可以通过该属性来实现。