From bcb10a222fd8177e2d055335b8354e15043f5a7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Sat, 20 Apr 2013 14:54:21 -0700 Subject: [PATCH] Add SvgImport example for Inkscape and fix issue with multiple SVG path commands. Closes #203. --- examples/SVG Import/Inkscape.html | 88 +++++++++++++++++++++++++++++++ src/path/PathItem.js | 37 +++++++------ 2 files changed, 110 insertions(+), 15 deletions(-) create mode 100644 examples/SVG Import/Inkscape.html diff --git a/examples/SVG Import/Inkscape.html b/examples/SVG Import/Inkscape.html new file mode 100644 index 00000000..b9b390e7 --- /dev/null +++ b/examples/SVG Import/Inkscape.html @@ -0,0 +1,88 @@ + + + + + Inkscape + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/path/PathItem.js b/src/path/PathItem.js index 30f81801..89a677d2 100644 --- a/src/path/PathItem.js +++ b/src/path/PathItem.js @@ -117,42 +117,49 @@ var PathItem = this.PathItem = Item.extend(/** @lends PathItem# */{ // Use positive lookahead to include signs. coords = part.slice(1).trim().split(/[\s,]+|(?=[+-])/); relative = cmd === lower; + var length = coords.length; switch (lower) { case 'm': case 'l': - for (var j = 0; j < coords.length; j += 2) + for (var j = 0; j < length; j += 2) this[j === 0 && lower === 'm' ? 'moveTo' : 'lineTo']( getPoint(j, true)); break; case 'h': case 'v': var coord = lower == 'h' ? 'x' : 'y'; - for (var j = 0; j < coords.length; j++) { + for (var j = 0; j < length; j++) { getCoord(j, coord, true); this.lineTo(current); } break; case 'c': - this.cubicCurveTo( - getPoint(0), - control = getPoint(2), - getPoint(4, true)); + for (var j = 0; j < length; j += 6) { + this.cubicCurveTo( + getPoint(j), + control = getPoint(j + 2), + getPoint(j + 4, true)); + } break; case 's': // Shorthand cubic bezierCurveTo, absolute - this.cubicCurveTo( - // Calculate reflection of previous control points - current.multiply(2).subtract(control), - control = getPoint(0), - getPoint(2, true)); + for (var j = 0; j < length; j += 4) { + this.cubicCurveTo( + // Calculate reflection of previous control points + current.multiply(2).subtract(control), + control = getPoint(j), + getPoint(j + 2, true)); + } break; case 'q': - this.quadraticCurveTo( - control = getPoint(0), - getPoint(2, true)); + for (var j = 0; j < length; j += 4) { + this.quadraticCurveTo( + control = getPoint(j), + getPoint(j + 2, true)); + } break; case 't': - for (var j = 0; j < coords.length; j += 2) { + for (var j = 0; j < length; j += 2) { this.quadraticCurveTo( // Calculate reflection of previous control points control = current.multiply(2).subtract(control),