Как сделать SVG circle более четким?

307

30 марта 2017, 18:45

Всем привет!

Видно на картинке, что круг немного пиксельный, можно ли смазать пиксели или есть другой способ сделать этот круг более четким?

P.S. Зеленая полоска анимированная, в зависимости от цифры, полоска доходит до определенного момента.

Сам код:

svg { 
  width: 85px; 
  height: 85px; 
}

<svg viewBox="0 0 85 85"> 
  <circle r="40" stroke-width="3" stroke="#6d6d6d" fill="transparent" cy="42.5" cx="42.5"></circle> 
  <circle r="40" stroke-width="2" stroke="#00c81c" fill="transparent" cy="42.5" cx="42.5"></circle> 
</svg>

Answer 1

Нарисовать обводку поверх фигуры:

svg { 
  width: 85px; 
  height: 85px; 
}

<svg viewBox="0 0 85 85"  shape-rendering="geometricPrecision"> 
  <circle r="40" stroke-width="2" stroke="#6d6d6d" fill="none" cy="42" cx="42"></circle> 
  <circle r="40" stroke-width="2" stroke="#00c81c" fill="none" cy="42" cx="42"></circle> 
  <circle r="41" stroke-width="0.5" stroke="#6d6d6d" fill="none" cy="42" cx="42"></circle> 
  <circle r="39" stroke-width="0.5" stroke="#6d6d6d" fill="none" cy="42" cx="42"></circle> 
</svg>

Answer 2

Замените fill="transparent" на fill="none"
svg - блок обернуть контейнером и задавать размеры для div, а не для svg
координаты круга сделать целочисленными cy="43" cx ="43"

.container 
{ 
width: 88; 
height: 88; 
}

<div class="container"> 
<svg width="88" height="88" viewBox="0 0 88 88"> 
  <circle r="40" stroke-width="2" stroke="#6d6d6d" fill="none" cy="43" cx="43"></circle> 
  <circle r="40" stroke-width="2" stroke="#00c81c" fill="none" cy="43" cx="43"></circle> 
</svg>   
</div>

Может быть оказывает влияние, что у вас один круг накладывается на другой, но у этих кругов вы задали разную ширину обводки.
Дело в том, что stroke располагается симметрично по обоим сторонам. То есть, если у вас радиус равен 40px при stroke-width ="2px" цветной бордюр будет между радиусами 39px и 41px. При stroke-width ="3px" соответственно 38.5px и 41.5px.
У вас больший круг расположен ниже, меньшего круга, поэтому при разных цветах бордюров возможно размытие границ.

Другими словами или сделайте одинаковую ширину stroke-width или пусть круг, где stroke-width="3px" будет сверху.