SVG parentesi graffa orizzontale

Question

Sto provando a creare un'ampia parentesi graffa orizzontale che inizia con il carattere della tastiera e la trasforma.

ho iniziato con:

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

Ora vorrei allungare il testo per renderlo più ampio. Dimentica di utilizzare l'elemento CSS font-size, la dimensione del font cambia anche di conseguenza, producendo un simbolo di grasso.

Mi piacerebbe allungare il personaggio mantenendolo sottile.

Poi ho iniziato ad usare la combinazione symbol e use, per cercare di sfruttare la viewbox capacità

Ecco quello che ho provato l'ultima:

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

Il personaggio appare ora tagliare e non ho trovato modo per farlo essere visualizzato correttamente.

Ho difficoltà a capire quello che sto facendo, leggendo il W3 SVG doc.

Answer 1

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

Questo raddoppierà tutte le coordinate y e, dato che l'hai ruotato di 90 gradi, lo allungherà orizzontalmente.

Il tentativo di imparare SVG dalle specifiche W3 ti lascerà frustrato e confuso. Non è scritto come tutorial su come usarlo. Here's a great resource on SVG transforms. Consiglierei di leggere l'intero e-book se sei davvero interessato a SVG. Penso che sia la migliore risorsa là fuori.