JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="meh"> </div>
JavaScript
var paper = Raphael('meh', 600, 600);
var text = paper.text(100,100,"This text \n spans multiple \n lines. What \n controls the \n line spacing in \n VML in IE6-8?");
paper.customAttributes.lineHeight = function( value ) {
// Sets the SVG dy attribute, which Raphael doesn't control
var selector = Raphael.svg ? 'tspan' : 'v:textpath';
var $node = $(this.node);
var $tspans = $node.find(selector);
$tspans.each(function(index){
// use $(this).attr in jquery v1.6+, fails for SVG in <= v1.5
// probably won't work in IE
if(index != 0) {
this.setAttribute('dy', value );
}
});
// change no default Raphael attributes
return {};
}
text.attr({ lineHeight: 0 });
text.animate({ lineHeight: 20 }, 5000);