改变圆形svg内的笔画宽度

Question

Trying to change stroke-width of paths inside a svg .

Both paths should be 9 instead of 3 and 5 .

As a result I'm getting deformed (not circular) paths.

Any help and a short explaination, pls.

 .single{ width:120px; height:120px; } 

 <div class="single"> <svg viewBox="0 0 100 100" style="display: block; width: 100%;"><path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#4598C9" stroke-width="3" fill-opacity="0"></path> <path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#dd4b39" stroke-width="5" fill-opacity="0" class = "xpath" style="stroke-dasharray: 300, 300; stroke-dashoffset: 255;"></path></svg> </div> 

Answer 1

Your shape is bigger than the viewBox if you make the stroke-width larger. One way to fix that is to change the viewBox sizing so the shape appears a little smaller and fits in the drawing area.

 .single{ width:120px; height:120px; } 

 <div class="single"> <svg viewBox="-3 -3 106 106" style="display: block; width: 100%;"><path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#4598C9" stroke-width="9" fill-opacity="0"></path> <path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#dd4b39" stroke-width="9" fill-opacity="0" class = "xpath" style="stroke-dasharray: 300, 300; stroke-dashoffset: 255;"></path></svg> </div>