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

Question

Всем привет!

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

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>

score 3 · Accepted Answer · answered Mar 29 '17 at 06:47

3

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

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>

answered Mar 29 '17 at 06:47

Crantisz

9,730
2
17
49

1

Не понимаю зачем лишний код, ведь это векторный формат, который не нуждается в костылях при обработке границ и задавать жестко размеры блока svg в css правилах, значит лишать его главного преимущества - масштабирование без потери качества – Alexandr_TT Mar 29 '17 at 07:33
@Alexandr_T Одно дело отрисовать нормальную обводку, другое иммитировать ее наложением элементов друг на друга. – Crantisz Mar 29 '17 at 07:36
так я в ответе ниже пояснил причину появления размытости :) – Alexandr_TT Mar 29 '17 at 07:38
@Alexandr_T посмотрите вопрос, можно ли смазать пиксели? Автор вопроса ругается на аляйсинг, а не на размытость – Crantisz Mar 29 '17 at 07:42
В моем примере есть аляйсинг? – Alexandr_TT Mar 29 '17 at 07:55

Alexandr_TT · Answer 2 · 2017-03-29T07:22:53.877

Замените 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" будет сверху.

Никаких изменений https://jsfiddle.net/faa9q947/ — Alex Reid, Mar 29 '17 at 06:45
@Александр Рейдзан попробуйте еще раз, к теоритическим рассуждениям добавлен код — Alexandr_TT, Mar 29 '17 at 08:17
@Александр Рейдзан вам в помощь, здесь на сайте, есть что-то подобное - http://ru.stackoverflow.com/a/628312/28748 — Alexandr_TT, Mar 29 '17 at 08:44

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

2 Answers2