JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.jackdat.com/skin/frontend/jackdat/designyourjacket/designyourjacket/js/raphael.js"></script>
<script src="http://dev.jackdat.com/skin/frontend/jackdat/designyourjacket/designyourjacket/js/fonts.js"></script>
<strong>Instructions:</strong><br />
1. Click the staggerText link first <br />
2. Then click the text to paths.
<br /><br />

<a href="#" onclick="staggerText()">StaggerText</a><br />
<a href="#" onclick="textToPaths()">Text to Paths</a>

<br /><br />
<strong>Expected Results:</strong><br />
After clicking the Text to Paths link, I want abc to be converted directly into a path.  It should look 100% the same.  What happens now is that the positioning data doesn't work, causing it to render incorrectly.

<div id="paper"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lobster);

JavaScript

//Register Cufon Font
var paper = Raphael(document.getElementById('paper'), '600', '600');

var text1 = paper.text(100, 100, 'abc').attr({fill: 'none',stroke: '#000000',"stroke-width": '12',"stroke-miterlimit": '1',"font-family" : "Lobster", "font-size": '30px','stroke-opacity': '1'});
var text2 = paper.text(100, 100, 'abc').attr({fill: 'none',stroke: '#ffffff',"stroke-width": '8',"stroke-miterlimit": '1',"font-family" : "Lobster", "font-size": '30px','stroke-opacity': '1'});
var text3 = paper.text(100, 100, 'abc').attr({fill: '#000000',stroke: '#ffffff',"stroke-width": '0',"stroke-miterlimit": '1',"font-family" : "Lobster", "font-size": '30px','stroke-opacity': '1'});
var text = paper.set(text1, text2, text3);
text.attr('textFormat', 'stagger');

/* paper.textToPaths
 * Description: Converts all text nodes to paths within a paper.
 *
 * Example: paper.textToPaths();
 */
(function(R) {
    R.fn.textToPaths = function() {
        var paper   = this;
        
        //Loop all nodes in the paper.
        for (var node = paper.bottom; node != null; node = node.next ) {
            if ( node.node.style.display === 'none' || node.type !== "text" || node.attrs.opacity == "0") continue; //skip non-text and hidden nodes.

            //Get the font config for this text node.
            var text = node.attr('text'),
                fontFamily = node.attr('font-family'),
                fontSize = parseInt(node.attr('font-size')),
                fontWeight = node.attr('font-weight'),
                font = paper.getFont(fontFamily, fontWeight);

            //Loop through each tspan and print the path for each.
            var i,
                children = node.node.childNodes,
                len = children.length;

            for (i = 0; i < len; i++) {
                var tspan = children[i],
                    tspanText = tspan.innerHTML,
                    x = tspan.getBoundingClientRect().left - node.node.getBoundingClientRect().left,  //How do I get the...