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 :

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:


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['-webkit-font-smoothing'] = 'antialiased';

// for svg itself['-webkit-user-select'] = 'none';