如何重用svg元素并调整大小

我有一个长方形

<rect id="greenRect" fill="lightgreen" height="20" width="20"/>
<!-- transformation are applied right-to-left -->
<use href="#greenRect" transform="translate(0 150) scale(2.5)"/>

现在我想重用rect，但要使它更大

大小（高度/宽度）似乎不会被原始

元素覆盖

---

如何实现这样的目标？

解决方案1:使用

viewBox

属性将rect包装在

中

<symbol id="greenRect" viewBox="0 0 20 20">
    <rect fill="lightgreen" height="20" width="20"/>
</symbol>
<!-- symbols are not rendered, so if you want to see your original,
     you have to also use it -->
<use href="#greenRect" height="20" width="20"/>
<use href="#greenRect" y="150" height="50" width="50"/>

解决方案2:缩放并平移矩形

<rect id="greenRect" fill="lightgreen" height="20" width="20"/>
<!-- transformation are applied right-to-left -->
<use href="#greenRect" transform="translate(0 150) scale(2.5)"/>

---

解决方案1:使用

viewBox

属性将rect包装在

中

<symbol id="greenRect" viewBox="0 0 20 20">
    <rect fill="lightgreen" height="20" width="20"/>
</symbol>
<!-- symbols are not rendered, so if you want to see your original,
     you have to also use it -->
<use href="#greenRect" height="20" width="20"/>
<use href="#greenRect" y="150" height="50" width="50"/>

解决方案2:缩放并平移矩形

<rect id="greenRect" fill="lightgreen" height="20" width="20"/>
<!-- transformation are applied right-to-left -->
<use href="#greenRect" transform="translate(0 150) scale(2.5)"/>

我特别喜欢符号方法。谢谢我特别喜欢符号方法。谢谢