Implement constructors for Path and CompoundPath that can handle SVG-style path-data.

src/path/CompoundPath.js

@@ -49,12 +49,56 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
 	 * // Move the inner circle 5pt to the right:
 	 * compoundPath.children[1].position.x += 5;
 	 */
+	/**
+	 * Creates a new compound path item from an object description and places it
+	 * at the top of the active layer.
+	 *
+	 * @name CompoundPath#initialize
+	 * @param {Object} object an object literal containing properties to
+	 * be set on the path
+	 * @return {CompoundPath} the newly created path
+	 *
+	 * @example {@paperscript}
+	 * var path = new CompoundPath({
+	 * 	children: [
+	 * 		new Path.Circle({
+	 * 			center: new Point(50, 50),
+	 * 			radius: 30
+	 * 		}),
+	 * 		new Path.Circle({
+	 * 			center: new Point(50, 50),
+	 * 			radius: 10
+	 * 		})
+	 * 	],
+	 * 	fillColor: 'black',
+	 * 	selected: true
+	 * });
+	 */
+	/**
+	 * Creates a new compound path item from SVG path-data and places it at the
+	 * top of the active layer.
+	 *
+	 * @name CompoundPath#initialize
+	 * @param {String} pathData the SVG path-data that describes the geometry
+	 * of this path.
+	 * @return {CompoundPath} the newly created path
+	 *
+	 * @example {@paperscript}
+	 * var pathData = 'M20,50c0,-16.56854 13.43146,-30 30,-30c16.56854,0 30,13.43146 30,30c0,16.56854 -13.43146,30 -30,30c-16.56854,0 -30,-13.43146 -30,-30z M50,60c5.52285,0 10,-4.47715 10,-10c0,-5.52285 -4.47715,-10 -10,-10c-5.52285,0 -10,4.47715 -10,10c0,5.52285 4.47715,10 10,10z';
+	 * var path = new CompoundPath(pathData);
+	 * path.fillColor = 'black';
+	 */
 	initialize: function CompoundPath(arg) {
 		// CompoundPath has children and supports named children.
 		this._children = [];
 		this._namedChildren = {};
-		if (!this._initialize(arg))
-			this.addChildren(Array.isArray(arg) ? arg : arguments);
+		if (!this._initialize(arg)) {
+			if (typeof arg === 'string') {
+				this.setPathData(arg);
+			} else {
+				this.addChildren(Array.isArray(arg) ? arg : arguments);
+			}
+		}
 	},
 
 	_changed: function _changed(flags) {

src/path/Path.js

@@ -47,7 +47,8 @@ var Path = PathItem.extend(/** @lends Path# */{
 	 * path.strokeColor = 'black';
 	 */
 	/**
-	 * Creates a new path item and places it at the top of the active layer.
+	 * Creates a new path item from an object description and places it at the
+	 * top of the active layer.
 	 *
 	 * @name Path#initialize
 	 * @param {Object} object an object literal containing properties to
@@ -70,6 +71,20 @@ var Path = PathItem.extend(/** @lends Path# */{
 	 * 	selected: true
 	 * });
 	 */
+	/**
+	 * Creates a new path item from SVG path-data and places it at the top of
+	 * the active layer.
+	 *
+	 * @name Path#initialize
+	 * @param {String} pathData the SVG path-data that describes the geometry
+	 * of this path.
+	 * @return {Path} the newly created path
+	 *
+	 * @example {@paperscript}
+	 * var pathData = 'M100,50c0,27.614-22.386,50-50,50S0,77.614,0,50S22.386,0,50,0S100,22.386,100,50';
+	 * var path = new Path(pathData);
+	 * path.fillColor = 'red';
+	 */
 	initialize: function Path(arg) {
 		this._closed = false;
 		this._segments = [];
@@ -86,12 +101,17 @@ var Path = PathItem.extend(/** @lends Path# */{
 				: arguments
 			// See if it behaves like a segment or a point, but filter out
 			// rectangles, as accepted by some Path.Constructor constructors.
-			: arg && (arg.point !== undefined && arg.size === undefined
-					|| arg.x !== undefined)
+			: arg && (arg.size === undefined && (arg.x !== undefined
+					|| arg.point !== undefined))
 				? arguments
 				: null;
 		// Always call setSegments() to initialize a few related variables.
 		this.setSegments(segments || []);
+		if (!segments && typeof arg === 'string') {
+			this.setPathData(arg);
+			// Erase for _initialize() call below.
+			arg = null;
+		}
 		// Only pass on arg as props if it wasn't consumed for segments already.
 		this._initialize(!segments && arg);
 	},