CODEWITHSUNDEEP
htmlsvg
Victor
Victor

Reputation: 5131

How to draw a triangle with one rounded corner programatically with SVG?

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

Answers (1)

Paul LeBeau
Paul LeBeau

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

Related Questions