Handle importing of SVG gradients for shapes, and drawing of canvas gradients correctly.

Closes #312.

src/item/Item.js

@@ -3116,11 +3116,11 @@ var Item = Base.extend(Callback, /** @lends Item# */{
 		// We need to take matrix into account for gradients,
 		// see #toCanvasStyle()
 		if (fillColor)
-			ctx.fillStyle = fillColor.toCanvasStyle(ctx, matrix);
+			ctx.fillStyle = fillColor.toCanvasStyle(ctx);
 		if (strokeColor) {
 			var strokeWidth = style.getStrokeWidth();
 			if (strokeWidth > 0) {
-				ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix);
+				ctx.strokeStyle = strokeColor.toCanvasStyle(ctx);
 				ctx.lineWidth = strokeWidth;
 				var strokeJoin = style.getStrokeJoin(),
 					strokeCap = style.getStrokeCap(),

src/item/Shape.js

@@ -142,8 +142,8 @@ var Shape = Item.extend(/** @lends Shape# */{
 			radius: this._radius,
 			insert: false
 		});
-		path.transform(this._matrix);
 		path.setStyle(this._style);
+		path.transform(this._matrix);
 		// Insert is true by default.
 		if (insert || insert === undefined)
 			path.insertAbove(this);

src/style/Color.js

@@ -784,7 +784,7 @@ var Color = Base.extend(new function() {
 					+ components.join(',') + ')';
 		},
 
-		toCanvasStyle: function(ctx, matrix) {
+		toCanvasStyle: function(ctx) {
 			if (this._canvasStyle)
 				return this._canvasStyle;
 			// Normal colors are simply represented by their css string.
@@ -792,20 +792,15 @@ var Color = Base.extend(new function() {
 				return this._canvasStyle = this.toCSS();
 			// Gradient code form here onwards
 			var components = this._components,
-				// We need to counteract the matrix translation. The other
-				// transformations will be handled by the matrix which was
-				// applied to ctx.
-				translation = matrix ? matrix.getTranslation() : new Point(),
 				gradient = components[0],
 				stops = gradient._stops,
-				origin = components[1].subtract(translation),
-				destination = components[2].subtract(translation),
+				origin = components[1],
+				destination = components[2],
 				canvasGradient;
 			if (gradient._radial) {
 				var radius = destination.getDistance(origin),
 					highlight = components[3];
 				if (highlight) {
-					highlight = highlight.subtract(translation);
 					var vector = highlight.subtract(origin);
 					if (vector.getLength() > radius)
 						highlight = origin.add(vector.normalize(radius - 0.1));

src/style/Style.js

@@ -142,8 +142,14 @@ var Style = Base.extend(new function() {
 					if (isColor) {
 						if (old)
 							delete old._owner;
-						if (value && value.constructor === Color)
+						if (value && value.constructor === Color) {
+							// Clone color if it already has an owner.
+							// NOTE: If value is not a Color, it is only
+							// converted and cloned in the getter further down.
+							if (value._owner)
+								value = value.clone();
 							value._owner = this._item;
+						}
 					}
 					// Note: We do not convert the values to Colors in the 
 					// setter. This only happens once the getter is called.

src/svg/SVGImport.js

@@ -336,9 +336,19 @@ new function() {
 	// since transform needs to be applied after fill color, as transformations
 	// can affect gradient fills.
 	var attributes = Base.merge(Base.each(SVGStyles, function(entry) {
-		this[entry.attribute] = function(item, value) {
+		this[entry.attribute] = function(item, value, name) {
 			item[entry.set](
 					convertValue(value, entry.type, entry.fromSVG));
+			// When applying gradient colors to shapes, we need to offset the
+			// shape's initial position to get the same results as SVG.
+			if (entry.type === 'color' && item instanceof Shape) {
+				// Do not use result of convertValue() above, since calling the
+				// setter will produce a new cloned color.
+				var color = item[entry.get]();
+				if (color)
+					color.transform(new Matrix().translate(
+							item.getPosition(true).negate()));
+			}
 		};
 	}, {}), {
 		id: function(item, value) {
@@ -490,14 +500,16 @@ new function() {
 			item = importer && importer(node, type, options),
 			data = type !== '#document' && node.getAttribute('data-paper-data');
 		// See importGroup() for an explanation of this filtering:
-		if (options.expandShapes && item instanceof Shape) {
-			item.remove();
-			item = item.toPath();
+		if (item) {
+			if (!(item instanceof Group))
+				item = applyAttributes(item, node);
+			if (options.expandShapes && item instanceof Shape) {
+				item.remove();
+				item = item.toPath();
+			}
+			if (data)
+				item._data = JSON.parse(data);
 		}
-		if (item && !(item instanceof Group))
-			item = applyAttributes(item, node);
-		if (item && data)
-			item._data = JSON.parse(data);
 		// Clear definitions at the end of import?
 		if (clearDefs)
 			definitions = {};