Reputation: 5131
I'm trying to draw triangles with SVG and make the top or the bottom point of the triangle rounded. I could draw the triangles but I can't apply the rounded effect in one point.
I have situations where the triangle is up, so I need the top point rounded, and situations where the triangle is upside down, so I need the point at the bottom rounded. I'm trying using q
but I'm getting weird results.
<p>Triangle</p>
<svg height="200" width="200" style="margin: 20px">
<path d="M69 10
q5,-2.5 -15,10
L10 100
L128 100
Z"
fill="LightBlue"
stroke="Blue"
stroke-width="15" />
</svg>
<svg height="200" width="200" style="margin: 20px">
<path d="M36 10
L10 50
L64 50
Z"
fill="LightBlue"
stroke="Blue"
stroke-width="10" />
</svg>
<p>Triangle upside down</p>
<svg height="220" width="200" style="margin: 20px">
<path
d="M 10 10
L 128 10
L 69 100
z"
fill="LightBlue"
stroke="Blue"
stroke-width="10" />
</svg>
<svg height="220" width="200" style="margin: 20px">
<path
d="M 10 10
L 64 10
L 36 50
q5,-2.5 -5,0
z"
fill="LightBlue"
stroke="Blue"
stroke-width="10" />
</svg>
How can I make only one point rounded using SVG?
Upvotes: 1
Views: 596
Reputation: 101976
There are several ways to do it, depending on what sort of curve you want. The simplest way is probably to use Q
/q
as you were attempting.
Calculate the endpoints, leading into and out of the curve, by calculating a position along that line segment. For instance in the second SVG I have chosen a point 80% along the first line (20,120 -> 70,20).
x = x0 + 80% * (x1 - x0)
= 20 + 80% * (70 - 20)
= 60
y = y0 + 80% * (y1 - y0)
= 120 + 80% * (20 - 120)
= 120 + -80
= 40
and the same for the line exiting the curved corner. Except, of course this time it will only be 20% aaway from the corner.
Once you have those two points, just use the original corner point as the control point (first coordinate pair) in the Q command.
So the original corner
M 20,120
L 70,20
L 120,120
becomes
M 20 120
L 60 40
Q 70 20 80 40
L 120 120
As shown in the third SVG below.
<p>Triangle</p>
<svg height="200" width="200" style="margin: 20px">
<path d="M 20 120
L 70 20
L 120 120
Z"
fill="LightBlue"
stroke="Blue"
stroke-width="10" />
</svg>
<svg height="200" width="200" style="margin: 20px">
<path d="M 20 120
L 60 40
L 80 40
L 120 120
Z"
fill="LightBlue"
stroke="Blue"
stroke-width="10" />
</svg>
<svg height="200" width="200" style="margin: 20px">
<path d="M 20 120
L 60 40
Q 70 20 80 40
L 120 120
Z"
fill="LightBlue"
stroke="Blue"
stroke-width="10" />
</svg>
You can change the shape of the corner curve by adjusting that line adjustment factor larger or smaller than 80%.
If you need a more accurate circular arc at the corner, then you will want to switch to using an A
or a
command instead.
Upvotes: 4