Beseitigung von Aliasing auf einem kreisförmigen SVG-Element

8

Ich mache ein animiertes SVG-Tortendiagramm. Grundsätzlich habe ich zwei SVG-Elemente, das erste bekommt ein border-radius von 50% , das zweite ist ein Kreis, den ich auf einen bestimmten Wert auffülle. Am Ende, das macht einen Kreis über einem anderen Kreis, sie haben beide die gleichen Dimensionen.

Es gibt eine Art von SVG-Aliasing, das schwer loszuwerden scheint. Es ist in den oberen, linken, unteren und rechten "Ecken" des Kreises sichtbar, zumindest bei Google Chrome.

Hier ist der HTML-Teil

%Vor%

Hier ist mein Codepen für eine genauere Beschreibung des Problems. Ich habe verschiedene Lösungen ausprobiert, darunter das SVG-Attribut "Form Rendering", aber ohne Erfolg.

Hier ist ein Screenshot, das Aliasing ist nicht so sichtbar wie im Codepen (zumindest für mich)

    
Antonin Cezard 17.12.2015, 10:45
quelle

1 Antwort

1

Full svg Prozentkreis

Ich habe dieses Problem auch schon früher erlebt: Pixelrand an Kreis Dies passiert, wenn Sie ein Element mit border-radius ändern.
Sie könnten für die Antwort in der oben verlinkten Antwort gehen,  aber ich denke, es ist besser, beide Leistungen und ästhetisch, wenn Sie nur Svg verwenden / ändern.

Beispiel:

%Vor% %Vor% %Vor%
    
Persijn 17.12.2015, 12:43
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Müssen mmap / mprotect-read nur null Seiten in Richtung festgeschriebenem Speicher gezählt werden?