изменить ширину штриха внутри круглого SVG

Question

Попытка изменить stroke-width из paths внутри svg.

Оба пути должны быть 9 вместо 3 и 5.

В результате я получаю деформированные (не круговые) пути.

Любойпомощь и краткое объяснение, пожалуйста.

.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

Ваша фигура больше, чем область просмотра, если вы увеличиваете ширину штриха.Один из способов исправить это - изменить размер окна просмотра, чтобы форма выглядела немного меньше и помещалась в области рисования.

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