CODEWITHSUNDEEP
svgcurly-braces
Bernard Rosset
Bernard Rosset

Reputation: 4743

SVG horizontal curly-bracket

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.

Upvotes: 6

Views: 5617

Answers (2)

Zaz
Zaz

Reputation: 48709

Simply create your own curly bracket using 2 Bézier curves:

<path d="m0 0 c0 5 20 0 20 5c0-5 20 0 20-5"
      style="stroke: #000; fill: none;" />

Substituting 0 0 after the m with the coordinates you want to put it, 20 with 40 to almost double the length of the bracket, and 5 with 10 to double the vertical size of the bracket.


Alternatively, if you want the horizontal part of the curly bracket to be just a little bit flatter, you can include 2 horizontal lines in addition to the Bézier curves:

<path d="m0 0 c0 5 5 5 5 5h20s5 0 5 5 c0-5 5-5 5-5h20s5 0 5-5"
      style="stroke: #000; fill: none;" />

I found SirCxyrtyx's answer caused all sorts of issues (especially if you have base text styles set) and looked just slightly visually displeasing. The above solution is much more customizable with basic knowledge of SVG paths.

Upvotes: 0

SirCxyrtyx
SirCxyrtyx

Reputation: 387

<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.

Upvotes: 5

Related Questions