CODEWITHSUNDEEP
svg
Matt Westlake
Matt Westlake

Reputation: 3651

how to reuse a svg element and resize

I have a rectangle

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

Now I want to reuse the rect, but make it bigger

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

The size (height/width) don't seem to get overwritten from the original <rect> element.

How would I achieve such a thing?

Upvotes: 1

Views: 189

Answers (1)

ccprog
ccprog

Reputation: 21821

Solution 1: Wrap the rect in a <symbol> with a viewBox attribute.

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

Solution 2: scale and translate your rectangle

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

Upvotes: 3

Related Questions