fabric.js toSVG reviver

A solution to broken stroke-width value when converting edited IText to SVG. http://stackoverflow.com/questions/41145491/fabricjs-itext-missing-stroke-after-using-tosvg

by Vijay Gujar

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
Canvas:
<canvas id="c" width="800" height="150"></canvas>
<input type='button' id='btn' value='SAVE TO SVG' /><br><br>
SVG
<div id='svg'>
</div>

CSS

#svg tspan {
  stroke-width: 2 !imporant;
}

JavaScript

var canvas = new fabric.Canvas('c');
		var text_input = new fabric.IText("Edit this and save", { 
			angle: 0,
			centeredRotation: true,
			centeredScaling: true,
			rotatingPointOffset: 25,
			fontSize: 100,
			stroke: '#000000',
			strokeWidth: 2,
			lineHeight: 1,
			left: 0, 
			top: 0, 
			fill: '#ff00ff',
      shadow: ''
			});


canvas.add(text_input);
canvas.renderAll();
document.getElementById('svg').innerHTML = canvas.toSVG();

function reviver(markup) {
  return markup.replace(/stroke-width: 0;/g, "");
}

document.getElementById('btn').onclick = function () {
  document.getElementById('svg').innerHTML = canvas.toSVG({}, reviver);
}