diff --git a/examples/SVG Import/Multiple Paths Test 1.html b/examples/SVG Import/Multiple Paths Test 1.html index 8518ce64..7f4ab0ec 100644 --- a/examples/SVG Import/Multiple Paths Test 1.html +++ b/examples/SVG Import/Multiple Paths Test 1.html @@ -40,7 +40,7 @@ <path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" /> <path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" /> <path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4px" fill="none"/> - <text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text> + <text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text" text-anchor="start">I love SVG</text> </svg> <canvas id="canvas" width="500px" height="1000px"></canvas> </body> diff --git a/src/svg/SvgImporter.js b/src/svg/SvgImporter.js index ea85d9b3..929abcad 100644 --- a/src/svg/SvgImporter.js +++ b/src/svg/SvgImporter.js @@ -105,9 +105,6 @@ var SvgImporter = this.SvgImporter = new function() { }, text: function(svg) { - var bottomLeft = getPoint(svg, 'x', 'y', 0), - textLength = getValue(svg, 'textLength'), - delta = getPoint(svg, 'dx', 'dy', 0); // Not supported by Paper.js // x: multiple values for x // y: multiple values for y @@ -115,8 +112,8 @@ var SvgImporter = this.SvgImporter = new function() { // dy: multiple values for y // rotate: character rotation // lengthAdjust: - var point = bottomLeft.add(delta).subtract(textLength / 2, 0); - var text = new PointText(point); + var text = new PointText(getPoint(svg, 'x', 'y', 0) + .add(getPoint(svg, 'dx', 'dy', 0))); text.content = svg.textContent || ''; return text; }, @@ -298,18 +295,10 @@ var SvgImporter = this.SvgImporter = new function() { item.setVisibility(value === 'visible'); break; case 'font': - var text = document.createElement('span'); - text.style.font = value; - for (var i = 0; i < text.style.length; i++) { - var n = text.style[i]; - applyAttributeOrStyle(svg, item, n, text.style[n]); - } - break; case 'font-family': - item.setFont(value.split(',')[0].replace(/^\s+|\s+$/g, "")); - break; case 'font-size': - item.setFontSize(parseFloat(value, 10)); + case 'text-anchor': + applyTextStyle(svg, item, name, value); break; default: // Not supported yet. @@ -317,6 +306,41 @@ var SvgImporter = this.SvgImporter = new function() { } } + function applyTextStyle(svg, item, name, value) { + if (item instanceof TextItem) { + switch (name) { + case 'font': + var text = document.createElement('span'); + text.style.font = value; + for (var i = 0; i < text.style.length; i++) { + var n = text.style[i]; + applyAttributeOrStyle(svg, item, n, text.style[n]); + } + break; + case 'font-family': + item.setFont(value.split(',')[0].replace(/^\s+|\s+$/g, "")); + break; + case 'font-size': + item.setFontSize(parseFloat(value, 10)); + break; + case 'text-anchor': + item.setJustification({ + start: 'left', + middle: 'center', + end: 'right' + }[value]); + break; + } + } else if (item instanceof Group) { + // Text styles need to be recursively passed down to children that + // might be TextItems explicitely. + var children = item._children; + for (var i = 0, l = children.length; i < l; i++) { + applyTextStyle(svg, children[i], name, value); + } + } + } + /** * Applies the transformations specified on the SVG node to a Paper.js item *