diff --git a/examples/SVG Export/Text Testing.html b/examples/SVG Export/Text Testing.html index 4a4de860..1802df10 100644 --- a/examples/SVG Export/Text Testing.html +++ b/examples/SVG Export/Text Testing.html @@ -26,7 +26,7 @@ */ text.rotate(45); text.shear(.85, .15); - text.scale(.85, .75); + text.scale(.85, 2); var path2 = new Path.Circle(new Point(100, 100), 50); path2.strokeColor = 'black'; diff --git a/src/svg/SvgExporter.js b/src/svg/SvgExporter.js index e8b99ad4..08ff3cba 100644 --- a/src/svg/SvgExporter.js +++ b/src/svg/SvgExporter.js @@ -52,6 +52,11 @@ var SvgExporter = this.SvgExporter = new function() { } function getTransform(item) { + // Note, we're taking out the translation part of the matrix and move it + // to x, y attributes, to produce more readable markup, and not have to + // use center points in rotate(). To do so, SVG requries us to inverse + // transform the translation point by the matrix itself, since they are + // provided in local coordinates. var matrix = item._matrix.createShiftless(), trans = matrix._inverseTransform(item._matrix.getTranslation()), attrs = { @@ -68,7 +73,7 @@ var SvgExporter = this.SvgExporter = new function() { scale = matrix.getScaling(); if (angle != null) { transform.push(angle - ? 'rotate(' + angle + ',' + formatPoint(center) +')' + ? 'rotate(' + formatNumber(angle) + ')' : 'scale(' + formatPoint(scale) +')'); } else { transform.push('matrix(' + matrix.getValues().join(',') + ')');