diff --git a/examples/SVG Import/Gradients.html b/examples/SVG Import/Gradients.html
index b9eae0b1..b4381f5c 100644
--- a/examples/SVG Import/Gradients.html	
+++ b/examples/SVG Import/Gradients.html	
@@ -5,103 +5,26 @@
 	<title>Gradients</title>
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
-		project.importSVG(document.getElementById('Layer_1'));
+		project.importSVG(document.getElementById('svg'));
 	</script>
 </head>
 <body>	
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
-<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69" y1="239.5" x2="530" y2="239.5">
-	<stop  offset="0" style="stop-color:#231F20"/>
-	<stop  offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
-	<stop  offset="1" style="stop-color:#231F20;stop-opacity:0"/>
-</linearGradient>
-<rect x="69" y="210" fill="url(#SVGID_1_)" width="461" height="59"/>
-<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="69" y1="162.5" x2="530" y2="162.5">
-	<stop  offset="0" style="stop-color:#00A14B"/>
-	<stop  offset="0.0031" style="stop-color:#0BA449"/>
-	<stop  offset="0.0203" style="stop-color:#43B13D"/>
-	<stop  offset="0.038" style="stop-color:#75BD33"/>
-	<stop  offset="0.0559" style="stop-color:#A0C72A"/>
-	<stop  offset="0.074" style="stop-color:#C2CF23"/>
-	<stop  offset="0.0922" style="stop-color:#DDD61E"/>
-	<stop  offset="0.1107" style="stop-color:#F0DA1A"/>
-	<stop  offset="0.1298" style="stop-color:#FBDD18"/>
-	<stop  offset="0.15" style="stop-color:#FFDE17"/>
-	<stop  offset="0.3" style="stop-color:#F26522"/>
-	<stop  offset="0.47" style="stop-color:#00A14B"/>
-	<stop  offset="0.64" style="stop-color:#FFDE17"/>
-	<stop  offset="0.8012" style="stop-color:#F26522"/>
-	<stop  offset="1" style="stop-color:#00A14B"/>
-</linearGradient>
-<rect x="69" y="133" fill="url(#SVGID_2_)" width="461" height="59"/>
-<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="69" y1="91.5" x2="530" y2="91.5">
-	<stop  offset="0%" style="stop-color:#00A14B"/>
-	<stop  offset="0.31%" style="stop-color:#0BA449"/>
-	<stop  offset="2%" style="stop-color:#43B13D"/>
-	<stop  offset="3.8%" style="stop-color:#75BD33"/>
-	<stop  offset="5.59%" style="stop-color:#A0C72A"/>
-	<stop  offset="7.4%" style="stop-color:#C2CF23"/>
-	<stop  offset="9.22%" style="stop-color:#DDD61E"/>
-	<stop  offset="11.07%" style="stop-color:#F0DA1A"/>
-	<stop  offset="12.98%" style="stop-color:#FBDD18"/>
-	<stop  offset="15%" style="stop-color:#FFDE17"/>
-	<stop  offset="30%" style="stop-color:#F26522"/>
-	<stop  offset="47%" style="stop-color:#00A14B"/>
-	<stop  offset="64%" style="stop-color:#FFDE17"/>
-	<stop  offset="80.12%" style="stop-color:#F26522"/>
-	<stop  offset="100%" style="stop-color:#00A14B"/>
-</linearGradient>
-<rect x="69" y="62" fill="url(#SVGID_3_)" width="461" height="59"/>
-<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="760.1406" x2="485.6914" y2="760.1406" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
-	<stop  offset="0" style="stop-color:#231F20"/>
-	<stop  offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
-	<stop  offset="1" style="stop-color:#231F20;stop-opacity:0"/>
-</linearGradient>
-<rect x="70" y="289.051" fill="url(#SVGID_4_)" width="59" height="461"/>
-<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="683.1396" x2="485.6914" y2="683.1396" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
-	<stop  offset="0" style="stop-color:#00A14B"/>
-	<stop  offset="0.0031" style="stop-color:#0BA449"/>
-	<stop  offset="0.0203" style="stop-color:#43B13D"/>
-	<stop  offset="0.038" style="stop-color:#75BD33"/>
-	<stop  offset="0.0559" style="stop-color:#A0C72A"/>
-	<stop  offset="0.074" style="stop-color:#C2CF23"/>
-	<stop  offset="0.0922" style="stop-color:#DDD61E"/>
-	<stop  offset="0.1107" style="stop-color:#F0DA1A"/>
-	<stop  offset="0.1298" style="stop-color:#FBDD18"/>
-	<stop  offset="0.15" style="stop-color:#FFDE17"/>
-	<stop  offset="0.3" style="stop-color:#F26522"/>
-	<stop  offset="0.47" style="stop-color:#00A14B"/>
-	<stop  offset="0.64" style="stop-color:#FFDE17"/>
-	<stop  offset="0.8012" style="stop-color:#F26522"/>
-	<stop  offset="1" style="stop-color:#00A14B"/>
-</linearGradient>
-<rect x="147.001" y="289.051" fill="url(#SVGID_5_)" width="59" height="461"/>
-<radialGradient id="SVGID_6_" cx="368.75" cy="409.5503" r="92.1995" gradientUnits="userSpaceOnUse">
-	<stop  offset="0.1656" style="stop-color:#FFFFFF"/>
-	<stop  offset="0.2576" style="stop-color:#CBCBCB"/>
-	<stop  offset="0.3651" style="stop-color:#969696"/>
-	<stop  offset="0.474" style="stop-color:#686868"/>
-	<stop  offset="0.5821" style="stop-color:#434343"/>
-	<stop  offset="0.6893" style="stop-color:#252525"/>
-	<stop  offset="0.7953" style="stop-color:#111111"/>
-	<stop  offset="0.8995" style="stop-color:#040404"/>
-	<stop  offset="1" style="stop-color:#000000"/>
-</radialGradient>
-<circle fill="url(#SVGID_6_)" cx="368.75" cy="409.55" r="92.2"/>
-<radialGradient id="SVGID_7_" cx="368.75" cy="619.5508" r="92.1997" fx="323.3488" fy="618.7006" gradientUnits="userSpaceOnUse">
-	<stop  offset="0.1656" style="stop-color:#FFFFFF"/>
-	<stop  offset="0.2576" style="stop-color:#CBCBCB"/>
-	<stop  offset="0.3651" style="stop-color:#969696"/>
-	<stop  offset="0.474" style="stop-color:#686868"/>
-	<stop  offset="0.5821" style="stop-color:#434343"/>
-	<stop  offset="0.6893" style="stop-color:#252525"/>
-	<stop  offset="0.7953" style="stop-color:#111111"/>
-	<stop  offset="0.8995" style="stop-color:#040404"/>
-	<stop  offset="1" style="stop-color:#000000"/>
-</radialGradient>
-<circle fill="url(#SVGID_7_)" cx="368.75" cy="619.551" r="92.2"/>
-</svg>
-	<canvas id="canvas" width="500" height="1000"></canvas>
+	<svg id="svg" x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+	  <linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
+	    <stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
+	    <stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
+	    <stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
+	  </linearGradient>
+	  <radialGradient cx="150" cy="150" r="120" gradientUnits="userSpaceOnUse" id="gradient-1">
+	    <stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
+	    <stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
+	    <stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
+	  </radialGradient>
+	  <g fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0">
+	    <circle cx="150" cy="150" r="120" fill="url(#gradient-1)"></circle>
+	    <rect x="45" y="345" width="210" height="210" transform="rotate(45,150,450)" fill="url(#gradient-2)"></rect>
+	  </g>
+	</svg>
+	<canvas id="canvas" width="300" height="600"></canvas>
 </body>
 </html>
\ No newline at end of file
diff --git a/examples/SVG Import/MoreGradients.html b/examples/SVG Import/MoreGradients.html
new file mode 100644
index 00000000..b9eae0b1
--- /dev/null
+++ b/examples/SVG Import/MoreGradients.html	
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Gradients</title>
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.importSVG(document.getElementById('Layer_1'));
+	</script>
+</head>
+<body>	
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="500" height="1000" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69" y1="239.5" x2="530" y2="239.5">
+	<stop  offset="0" style="stop-color:#231F20"/>
+	<stop  offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
+	<stop  offset="1" style="stop-color:#231F20;stop-opacity:0"/>
+</linearGradient>
+<rect x="69" y="210" fill="url(#SVGID_1_)" width="461" height="59"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="69" y1="162.5" x2="530" y2="162.5">
+	<stop  offset="0" style="stop-color:#00A14B"/>
+	<stop  offset="0.0031" style="stop-color:#0BA449"/>
+	<stop  offset="0.0203" style="stop-color:#43B13D"/>
+	<stop  offset="0.038" style="stop-color:#75BD33"/>
+	<stop  offset="0.0559" style="stop-color:#A0C72A"/>
+	<stop  offset="0.074" style="stop-color:#C2CF23"/>
+	<stop  offset="0.0922" style="stop-color:#DDD61E"/>
+	<stop  offset="0.1107" style="stop-color:#F0DA1A"/>
+	<stop  offset="0.1298" style="stop-color:#FBDD18"/>
+	<stop  offset="0.15" style="stop-color:#FFDE17"/>
+	<stop  offset="0.3" style="stop-color:#F26522"/>
+	<stop  offset="0.47" style="stop-color:#00A14B"/>
+	<stop  offset="0.64" style="stop-color:#FFDE17"/>
+	<stop  offset="0.8012" style="stop-color:#F26522"/>
+	<stop  offset="1" style="stop-color:#00A14B"/>
+</linearGradient>
+<rect x="69" y="133" fill="url(#SVGID_2_)" width="461" height="59"/>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="69" y1="91.5" x2="530" y2="91.5">
+	<stop  offset="0%" style="stop-color:#00A14B"/>
+	<stop  offset="0.31%" style="stop-color:#0BA449"/>
+	<stop  offset="2%" style="stop-color:#43B13D"/>
+	<stop  offset="3.8%" style="stop-color:#75BD33"/>
+	<stop  offset="5.59%" style="stop-color:#A0C72A"/>
+	<stop  offset="7.4%" style="stop-color:#C2CF23"/>
+	<stop  offset="9.22%" style="stop-color:#DDD61E"/>
+	<stop  offset="11.07%" style="stop-color:#F0DA1A"/>
+	<stop  offset="12.98%" style="stop-color:#FBDD18"/>
+	<stop  offset="15%" style="stop-color:#FFDE17"/>
+	<stop  offset="30%" style="stop-color:#F26522"/>
+	<stop  offset="47%" style="stop-color:#00A14B"/>
+	<stop  offset="64%" style="stop-color:#FFDE17"/>
+	<stop  offset="80.12%" style="stop-color:#F26522"/>
+	<stop  offset="100%" style="stop-color:#00A14B"/>
+</linearGradient>
+<rect x="69" y="62" fill="url(#SVGID_3_)" width="461" height="59"/>
+<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="760.1406" x2="485.6914" y2="760.1406" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
+	<stop  offset="0" style="stop-color:#231F20"/>
+	<stop  offset="0.0896" style="stop-color:#231F20;stop-opacity:0.9104"/>
+	<stop  offset="1" style="stop-color:#231F20;stop-opacity:0"/>
+</linearGradient>
+<rect x="70" y="289.051" fill="url(#SVGID_4_)" width="59" height="461"/>
+<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="24.6909" y1="683.1396" x2="485.6914" y2="683.1396" gradientTransform="matrix(0 1 -1 0 859.6406 264.3599)">
+	<stop  offset="0" style="stop-color:#00A14B"/>
+	<stop  offset="0.0031" style="stop-color:#0BA449"/>
+	<stop  offset="0.0203" style="stop-color:#43B13D"/>
+	<stop  offset="0.038" style="stop-color:#75BD33"/>
+	<stop  offset="0.0559" style="stop-color:#A0C72A"/>
+	<stop  offset="0.074" style="stop-color:#C2CF23"/>
+	<stop  offset="0.0922" style="stop-color:#DDD61E"/>
+	<stop  offset="0.1107" style="stop-color:#F0DA1A"/>
+	<stop  offset="0.1298" style="stop-color:#FBDD18"/>
+	<stop  offset="0.15" style="stop-color:#FFDE17"/>
+	<stop  offset="0.3" style="stop-color:#F26522"/>
+	<stop  offset="0.47" style="stop-color:#00A14B"/>
+	<stop  offset="0.64" style="stop-color:#FFDE17"/>
+	<stop  offset="0.8012" style="stop-color:#F26522"/>
+	<stop  offset="1" style="stop-color:#00A14B"/>
+</linearGradient>
+<rect x="147.001" y="289.051" fill="url(#SVGID_5_)" width="59" height="461"/>
+<radialGradient id="SVGID_6_" cx="368.75" cy="409.5503" r="92.1995" gradientUnits="userSpaceOnUse">
+	<stop  offset="0.1656" style="stop-color:#FFFFFF"/>
+	<stop  offset="0.2576" style="stop-color:#CBCBCB"/>
+	<stop  offset="0.3651" style="stop-color:#969696"/>
+	<stop  offset="0.474" style="stop-color:#686868"/>
+	<stop  offset="0.5821" style="stop-color:#434343"/>
+	<stop  offset="0.6893" style="stop-color:#252525"/>
+	<stop  offset="0.7953" style="stop-color:#111111"/>
+	<stop  offset="0.8995" style="stop-color:#040404"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</radialGradient>
+<circle fill="url(#SVGID_6_)" cx="368.75" cy="409.55" r="92.2"/>
+<radialGradient id="SVGID_7_" cx="368.75" cy="619.5508" r="92.1997" fx="323.3488" fy="618.7006" gradientUnits="userSpaceOnUse">
+	<stop  offset="0.1656" style="stop-color:#FFFFFF"/>
+	<stop  offset="0.2576" style="stop-color:#CBCBCB"/>
+	<stop  offset="0.3651" style="stop-color:#969696"/>
+	<stop  offset="0.474" style="stop-color:#686868"/>
+	<stop  offset="0.5821" style="stop-color:#434343"/>
+	<stop  offset="0.6893" style="stop-color:#252525"/>
+	<stop  offset="0.7953" style="stop-color:#111111"/>
+	<stop  offset="0.8995" style="stop-color:#040404"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</radialGradient>
+<circle fill="url(#SVGID_7_)" cx="368.75" cy="619.551" r="92.2"/>
+</svg>
+	<canvas id="canvas" width="500" height="1000"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/svg/SVGImport.js b/src/svg/SVGImport.js
index 07124ba2..c1f39fe3 100644
--- a/src/svg/SVGImport.js
+++ b/src/svg/SVGImport.js
@@ -322,12 +322,15 @@ new function() {
 			color.setAlpha(parseFloat(value));
 	}
 
-	// Create apply-functions for attributes, and merge in those for SVGStlyes:
-	var attributes = Base.each(SVGStyles, function(entry) {
+	// Create apply-functions for attributes, and merge in those for SVGStlyes.
+	// We need to define style attributes first, and merge in all others after,
+	// 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, name, node) {
 			item._style[entry.set](convertValue(value, entry.type));
 		};
-	}, {
+	}, {}), {
 		id: function(item, value) {
 			definitions[value] = item;
 			if (item.setName)