SVG horizontal brace

Question

I am trying to create a wide horizontal curly brace starting with a 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 using the CSS font-size element, the font size will also change accordingly, creating a bold character.

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

Then I started using a combination of symbol and use to try to take advantage of the viewbox

Here's what I've tried in the past:

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

Now the character is cut out, and I did not find a way to correctly display it.

I find it difficult to understand what I am doing while reading a W3 SVG document .

Answer 1

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

This will double all y coordinates, and since you rotated it 90 degrees, stretching will be horizontal.

Trying to learn SVG from the W3 spec will make you disappointed and embarrassed. It is not written as a tutorial on how to use it. Here an excellent SVG transform resource . I would recommend reading the entire e-book if you are really interested in SVG. I think this is the best resource.