Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no malicious code is included in that content.

Contains information about the fill of the shape. <dl> <dt>color</dt><dd>The color of the fill.</dd> <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd> <dt>type</dt><dd>Type of fill. <dl> <dt>solid</dt><dd>Solid single color fill. (default)</dd> <dt>linear</dt><dd>Linear gradient fill.</dd> <dt>radial</dt><dd>Radial gradient fill.</dd> </dl> </dd> </dl> <p>If a linear or radial is specified as the fill type. The following additional property is used: <dl> <dt>stops</dt><dd>An array of objects containing the following properties: <dl> <dt>color</dt><dd>The color of the stop.</dd> <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8</dd> <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd> </dl> </dd> <p>Linear gradients also have the following property:</p> <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd> <p>Radial gradients have the following additional properties:</p> <dt>r</dt><dd>Radius of the gradient circle.</dd> <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd> <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd> <dt>cx</dt><dd> <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p> <p><strong>Note: </strong>Currently, this property is not implemented for corresponding CanvasShape and VMLShape classes which are used on Android or IE 6 - 8.</p> </dd> <dt>cy</dt><dd> <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p> <p><strong>Note: </strong>Currently, this property is not implemented for corresponding CanvasShape and VMLShape classes which are used on Android or IE 6 - 8.</p> </dd> </dl>

Reference to the parent graphic instance

Indicates the height of the shape

Unique id for class instance.

Dom node for the shape.

Only implemented in SVG implementation. Applies the SVG shape-rendering attribute to the shape. <dl> <dt>auto</dt> <dd>Indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.</dd> <dt>optimizeSpeed</dt> <dd>Indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.</dd> <dt>crispEdges</dt> <dd>Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.</dd> <dt>geometricPrecision</dt> <dd>Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.</dd> </dl>

Contains information about the stroke of the shape. <dl> <dt>color</dt><dd>The color of the stroke.</dd> <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd> <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd> <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the length of the dash. The second index indicates the length of gap. <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified: <dl> <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd> <dt>square</dt><dd>Specifies a sqare linecap.</dd> <dt>round</dt><dd>Specifies a round linecap.</dd> </dl> </dd> <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified: <dl> <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd> <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd> <dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having separate miter and miter limit values.</dd> </dl> </dd> </dl>

<p>A string containing, in order, transform operations applied to the shape instance. The transform string can contain the following values:

<dl> <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd> <dt>translate</dt><dd>Specifies a 2d translation.</dd> <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd> <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd> <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd> <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd> <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd> <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd> <dt>matrix</dt><dd>Specifies a 2D transformation matrix comprised of the specified six values.</dd> </dl> </p> <p>Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains corresponding methods for each transform that will apply the transform to the current matrix. The below code illustrates how you might use the transform attribute to instantiate a recangle with a rotation of 45 degrees.</p> var myRect = new Y.Rect({ type:"rect", width: 50, height: 40, transform: "rotate(45)" }; <p>The code below would apply translate and rotate to an existing shape.</p>

   myRect.set("transform", "translate(40, 50) rotate(45)");

An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].

Indicates whether the shape is visible.

Indicates the width of the shape

Indicates the x position of shape.

Indicates the y position of shape.