Geek Answers Handbook

Smoothing, Web SVG and Raphaël.js

I use Raphaël.js to draw small circles (radius 2-4px), which runs through SVG in all browsers except IE. The circles don't look smooth to me, so my question is:

  • Is there any way to add anti-aliasing in Raphaël.js?
  • Ban, is there any way for SVG antivirus objects?
+5
source share
4 answers

In further experiments, I think that the problem is not that the SVG was not smoothed (indeed, I found that when drawing lines that I usually wanted to turn off anti-aliasing by setting shapeRenderingto crisp-edges, see this question ), since I wanted even more smooth edges on their circles than the smoothing provided.

To achieve this in Raphaël.js, you can change the colors filland strokeseparately. For example, on a white background, setting stroketo a lighter color than fillprovides the desired effect.

+2
source

I stumbled upon this post looking for an answer. Trying to set the stroke in a lighter color, I found that it just looked blurry.

, "none", , .

    var circle = paper.circle(50, 40, 20);
    circle.attr("fill", "#F00");
    circle.attr("stroke", "none");
+6

SVG, , SVG. , , , , , , . 2px, , . , , , .

, . , .

0

Safari 6, :

<polygon fill='blue' stroke='blue' stroke-width='3' stroke-antialiasing='true' … >
0
source

More articles:


All Articles