SVG horizontal curly-bracket

Question

I am trying to create a wide horizontal curly-bracket starting with the keyboard character and transforming it.

I started with :

<text x="40" y="120" transform="rotate(90, 40, 120)">}</text>

Now I would like to stretch the text to make it wider. Forget about using the CSS font-size element, size the font-weight will also change accordingly, producing a fat symbol.

I would like to stretch the character by keeping it thin.

I then started using the symbol and usecombination, to try to take advantage of the viewbox capability

Here is what I tried last :

<symbol id="curly-bracket">
    <text>}</text>
</symbol>
<use x="40" y="120" transform="rotate(90, 40, 120)" xlink:href="#curly-bracket" />

The character now appears cut and I found no way to make it be displayed properly.

I am having a hard time understanding what I am doing, reading the W3 SVG doc.

Answer 1

<text x="40" y="120" transform="rotate(90, 40, 120) scale(1,2)">}</text>

That will double all the y coordinates, and since you've turned it 90 degrees, will stretch it horizontally.

Attempting to learn SVG from the W3 spec is going to leave you frustrated and confused. It's not written as a tutorial on how to use it. Here's a great resource on SVG transforms. I'd recommend reading that entire e-book if you're really interested in SVG. I think it's the best resource out there.