ko.bindingHandlers.pathText.js

ko.bindingHandlers.pathText = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
 		var phrase = ko.unwrap(valueAccessor());
        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    	var elementBox = element.getBBox();
        
		//text.textContent = value;
        
        phrase.split(' ').forEach(function(word){
        	var span = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
            
            span.textContent = word;
            span.setAttribute('x', '0');
            span.setAttribute('dy', '1.2em');
            text.appendChild(span);
        });
        
    	element.parentNode.insertBefore(text, element.nextSibling);
        
        var textBox = text.getBBox();                
        var x = elementBox.x + (elementBox.width/2) - (textBox.width/2);
        var y = elementBox.y + (elementBox.height/2) - (textBox.height/2);

        text.setAttribute('transform', 'translate(' + x + ' ' + y + ')');
    }
};