CODEWITHSUNDEEP
htmlsvg
Bhavesh Jadav
Bhavesh Jadav

Reputation: 705

SVG path element round corner thickness

I am trying to create rectangle with round corner using path element but the problem is that round corner have more stroke width then straight lines. See code below for path element.

<svg width="596.8571428571429" height="403.48571428571427">
    <g class="cardBG" opacity="0.8">
        <path 
            d="M104,0
               h388.8571428571429
               a104,104 0 0 1 104,104
               v195.48571428571427
               v104
               h-104
               h-388.8571428571429
               h-104
               v-104
               v-195.48571428571427
               a104,104 0 0 1 104,-104z" fill="none" 
            stroke="#000000" stroke-width="12">
        </path>
    </g>
</svg>

jsfidle https://jsfiddle.net/w9s0e3fu/2/

How can I make sure that stroke width remains consistent for whole path?

Upvotes: 0

Views: 2737

Answers (2)

Abhijeet
Abhijeet

Reputation: 819

I have created a svg path pattern which full fill your requirements.

Description:

m100,100: move to point(100,100)

h200: draw a 200px horizontal line from where we are

a20,20 0 0 1 20,20: draw an arc with 20px X radius, 20px Y radius, clockwise, to a point with 20px difference in X and Y axis

v200: draw a 200px vertical line from where we are

a20,20 0 0 1 -20,20: draw an arc with 20px X and Y radius, clockwise, to a point with -20px difference in X and 20px difference in Y axis

h-200: draw a -200px horizontal line from where we are

a20,20 0 0 1 -20,-20: draw an arc with 20px X and Y radius, clockwise, to a point with -20px difference in X and -20px difference in Y axis

v-200: draw a -200px vertical line from where we are

a20,20 0 0 1 20,-20: draw an arc with 20px X and Y radius, clockwise, to a point with 20px difference in X and -20px difference in Y axis

z: close the path

<svg width="500" height="500">
  <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="#000000" stroke-width="10"/>
</svg> 


<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
  <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="#000000" stroke-width="10"/>
</svg> 
 
</body>
</html>

Thanks !!

Upvotes: 1

somethinghere
somethinghere

Reputation: 17350

Your stroke is correctly sized, but its being cut off by the viewport. You could expand your viewport by adding a viewBox that is offset to the left and top by half your stroke-width (ie. 12/2=6), and has a width and height of your path but including two halves of your stroke-width that are missing (ie. 2*6=12):

viewBox="-6 -6 609 416"


<svg width="597" height="404" viewBox="-6 -6 609 416">
    <g class="cardBG" opacity="0.8">
        <path 
            d="M104,0
               h388.8571428571429
               a104,104 0 0 1 104,104
               v195.48571428571427
               v104
               h-104
               h-388.8571428571429
               h-104
               v-104
               v-195.48571428571427
               a104,104 0 0 1 104,-104z" fill="none" 
            stroke="#000000" stroke-width="12">
        </path>
    </g>
</svg>

Keep in mind that changing your stroke thickness would need to change these values, as strokes get drawn from the center of the line, so if your line hugs the side of the viewport then one half of the stroke will be cut off. Better to create some more space, if allowed.

Upvotes: 4

Related Questions