CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
Antonin Cezard
Antonin Cezard

Reputation: 2021

Getting rid of aliasing on a SVG circular element

I'm making an animated SVG pie chart. Basically I have two SVG element, the first gets a border-radius of 50%, the second is a circle that I fill up to a specific value. In the end, that makes one circle above another circle, they both have the same dimensions.

There is some kind of SVG aliasing that seems hard to get rid of. It's very visible on the top, left, bottom and right "corners" of the circle, at least on Google Chrome.

Here is the HTML part

<figure id="pie" data-percentage="60">
  <div class="receiver"></div>
  <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision">
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision"/>
  </svg>
</figure>

Here is my codepen for more accurate description of the problem. I tried various solutions including the shape-rendering SVG attribute but to no avail.

Here is a screenshot, the aliasing is not as visible as in the codepen (for me at least)

enter image description here

Upvotes: 8

Views: 1057

Answers (1)

Persijn
Persijn

Reputation: 14990

Full svg percentage circle

I have also encountered this problem before: Pixel edge on circle This happens when you modify the an element with border-radius.
You could go for the answer in the above linked answer, but i think its better both performances and aesthetically if you only use/modify svg.

Example:

var circ = document.getElementsByClassName("pie2");
var text = document.getElementsByClassName("text");
text = text[0];
circ = circ[0];
var maxvalue = 320;
var value = maxvalue;
var stop = false;

function increase() {
  if (value > 0) {
    circ.style.strokeDashoffset = value--;
    text.textContent = Math.abs(Math.floor((value / maxvalue) * 100) - 100) + "%";
  } else {
    clearInterval(intervalid);
  }
}

var intervalid = setInterval(increase, 25);
.pie {
  fill: none;
  stroke: #222;
  stroke-width: 99;
}
.pie2 {
  fill: none;
  stroke: orange;
  stroke-width: 100;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.text {
  font-family: Arial;
  font-weight: bold;
  font-size: 2em;
}
<figure id="pie" data-percentage="90">
  <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision">
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision" />
    <circle r="50" cx="100" cy="100" class="pie2" />
    <text class="text" x="80" y="110">0%</text>
  </svg>
</figure>

Upvotes: 2

Related Questions