all articles

how to set custom style( font smoothing) in Raphaeljs

2015-07-21 @sunderls

raphaeljs fontsmoothing antialiased js

description, bug

raphaeljs is a very good library to draw svg. But the attr() method it offers can only used for certain attribute, the list is here : http://raphaeljs.com/reference.html#Element.attr

for my case, the <text> is kinda blurry, which can be solve by -webkit-font-smoothing, but raphaeljs seems not to offer that kind of method.

after some searching, I got this:

workaround.

get the svg node, and modify it directly:


var paper = Raphael(0,0,100,100);
var text = paper.text(0,0, 'test').attr({
    fill: 'red'
});

// xx.node can get us the svg element
text.node.style['-webkit-font-smoothing'] = 'antialiased';

// for svg itself
paper.canvas.style['-webkit-user-select'] = 'none';