Question

我有一个矩形

<rect id="greenRect" fill="lightgreen" height="20" width="20"/>

现在我想重用rect，但要把它做得更大

<use href="#greenRect" y="150" height="50" width="50"/>

大小（高度/宽度）似乎没有被原始<rect>元素覆盖。

我如何实现这样的目标？

Answer 1

解决方案1：使用<symbol>属性的viewBox包裹矩形。

<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)"/>

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

1 个答案: