更改圆形svg中的笔划宽度

时间:2019-03-03 22:09:46

标签: html svg

尝试在stroke-width内更改paths中的svg

两个路径都应为9,而不是35

结果,我的路径变形了(不是圆形的)。

任何帮助和简短说明,请

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

1 个答案:

答案 0 :(得分:3)

如果您增大笔触宽度,则您的形状将大于viewBox。解决此问题的一种方法是更改​​viewBox的大小,以使形状看起来更小并适合绘图区域。

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