Poziomy nawias klamrowy SVG

Question

Próbuję utworzyć szeroki poziomy nawias klamrowy, zaczynając od znaku klawiatury i przekształcając go.

Zacząłem:

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

Teraz chciałbym, aby rozciągnąć tekst, aby go szerzej. Zapomnij o używaniu elementu CSS font-size, rozmiar waga czcionki również odpowiednio się zmieni, tworząc gruby symbol.

Chciałbym rozciągnąć postać, zachowując jej cienkość.

I wtedy zaczął używać kombinacji symbol i use, aby spróbować skorzystać z możliwości

Tutaj viewbox jest co starałem ostatnia:

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

Postać pojawia się teraz wyciąć i nie znalazłem sposób na poprawne wyświetlanie.

Trudno mi zrozumieć, co robię, czytając W3 SVG doc.

Answer 1

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

To podwoi wszystkie współrzędne y, a ponieważ obróciłeś ją o 90 stopni, rozciągnie ją w poziomie.

Próba nauczenia się SVG ze specyfikacji W3 sprawi, że poczujesz się sfrustrowany i zdezorientowany. Nie jest napisany jako samouczek, jak z niego korzystać. Here's a great resource on SVG transforms. Zaleciłbym przeczytanie całego e-booka, jeśli naprawdę interesuje Cię SVG. Myślę, że to najlepszy zasób.