SVGShape Class
+ + + + +SVG implementation of the Shape class.
+SVGShape is not intended to be used directly. Instead, use the Shape class.
+If the browser has SVG capabilities, the Shape
+class will point to the SVGShape class.
-
+
- Index + + +
- Methods + + +
- Properties + + +
- Attributes + + +
Item Index
+ + +Methods
+ +-
+
+
- + _addTransform + + + + + +
- + _draw + + + + + +
- + _fillChangeHandler + + + + + +
- + _getDefaultFill + + + + + +
- + _getDefaultStroke + + + + + +
- + _parsePathData + + + + + +
- + _setGradientFill + + + + + +
- + _setGraphic + + + + + +
- + _strokeChangeHandler + + + + + +
- + _updateHandler + + + + + +
- + _updateTransform + + + + + +
- + addClass + + + + + +
- + compareTo + + + + + +
- + contains + + + + + +
- + createNode + + + + + +
- + destroy + + + + + +
- + destroy + + + + + +
- + getBounds + + + + + +
- + getXY + + + + + +
- + init + + + + + +
- + initializer + + + + + +
- + on + + + + + +
- + removeClass + + + + + +
- + rotate + + + + + +
- + scale + + + + + +
- + set + + + + + +
- + setXY + + + + + +
- + skew + + + + + +
- + skewX + + + + + +
- + skewY + + + + + +
- + test + + + + + +
- + toFront + + + + + +
- + toFront + + + + + +
- + translate + + + + + +
- + translateX + + + + + +
- + translateY + + + + + +
Properties
+ +-
+
+
- + _transform + + + + + +
- + _x + + + + + +
- + _y + + + + + +
Methods
+ + +_addTransform
+
+
+ -
+
+
-
+
+
type+ +
+
+ -
+
+
args+ +
+
+
Adds a transform to the shape.
+_draw
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Draws the shape.
+_fillChangeHandler
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Adds a fill to the shape node.
+_getDefaultFill
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Value function for fill attribute
+Returns:
+ +_getDefaultStroke
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Value function for stroke attribute
+Returns:
+ +_parsePathData
+
+
+ -
+
+
-
+
+
val+ +
+
+
Parses path data string and call mapped methods.
+Parameters:
+ +-
+
+
-
+
+
val+ String + + + + +++ + +The path data
+
+
+
_setGradientFill
+
+
+ -
+
+
-
+
+
type+ +
+
+
Creates a gradient fill
+Parameters:
+ +-
+
+
-
+
+
type+ String + + + + +++ + +gradient type
+
+
+
_setGraphic
+
+
+ -
+
+
-
+
+
render+ +
+
+
Set the Graphic instance for the shape.
+Parameters:
+ +-
+
+
-
+
+
render+ Graphic | Node | HTMLElement | String + + + + +++ + +This param is used to determine the graphic instance. If it is a +
+Graphicinstance, it will be assigned to thegraphicattribute. Otherwise, a new Graphic instance will be created +and rendered into the dom element that the render represents.
+
+
_strokeChangeHandler
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Adds a stroke to the shape node.
+_updateHandler
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Updates Shape based on attribute changes.
_updateTransform
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Applies all transforms.
+addClass
+
+
+ -
+
+
-
+
+
className+ +
+
+
Add a class name to each node.
+Parameters:
+ +-
+
+
-
+
+
className+ String + + + + +++ + +the class name to add to the node's class attribute
+
+
+
compareTo
+
+
+ -
+
+
-
+
+
refNode+ +
+
+
Compares nodes to determine if they match. +Node instances can be compared to each other and/or HTMLElements.
+Parameters:
+ +-
+
+
-
+
+
refNode+ HTMLElement | Node + + + + +++ + +The reference node to compare to the node.
+
+
+
Returns:
+ +contains
+
+
+ -
+
+
-
+
+
needle+ +
+
+
Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
+Parameters:
+ +-
+
+
-
+
+
needle+ SVGShape | HTMLElement + + + + +++ + +The possible node or descendent
+
+
+
Returns:
+ +createNode
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Creates the dom node for the shape.
+Returns:
+ +destroy
+
+
+ ()
+
+
+
+
+
+
+
+ protected
+
+
+
+
+
+
+
+
+
+
+
+
+ Implementation for shape destruction
+destroy
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Destroys the shape instance.
+getBounds
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns the bounds for a shape.
+ +Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix. +The calculated bounding box is used by the graphic instance to calculate its viewBox.
+Returns:
+ +getXY
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Gets the current position of the node in page coordinates.
+Returns:
+ +init
+
+
+ ()
+
+
+
+
+
+
+
+ protected
+
+
+
+
+
+
+
+
+
+
+
+
+ Init method, invoked during construction.
+Calls initializer method.
initializer
+
+
+ ()
+
+
+
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+
+
+
+
+ Initializes the shape
+on
+
+
+ -
+
+
-
+
+
type+ +
+
+ -
+
+
callback+ +
+
+
Overrides default on method. Checks to see if its a dom interaction event. If so,
+return an event attached to the node element. If not, return the normal functionality.
removeClass
+
+
+ -
+
+
-
+
+
className+ +
+
+
Removes a class name from each node.
+Parameters:
+ +-
+
+
-
+
+
className+ String + + + + +++ + +the class name to remove from the node's class attribute
+
+
+
rotate
+
+
+ -
+
+
-
+
+
deg+ +
+
+
Rotates the shape clockwise around it transformOrigin.
+Parameters:
+ +-
+
+
-
+
+
deg+ Number + + + + +++ + +The degree of the rotation.
+
+
+
scale
+
+
+ -
+
+
-
+
+
val+ +
+
+
Specifies a 2d scaling operation.
+Parameters:
+ +-
+
+
-
+
+
val+ Number + + + + ++ ++ + +
+
+
set
+
+
+ -
+
+
-
+
+
name+ +
+
+ -
+
+
value+ +
+
+
Sets the value of an attribute.
+Parameters:
+ +-
+
+
-
+
+
name+ String | Object + + + + +++ + +The name of the attribute. Alternatively, an object of key value pairs can +be passed in to set multiple attributes at once.
+
+
+ -
+
+
value+ Any + + + + +++ + +The value to set the attribute to. This value is ignored if an object is received as +the name param.
+
+
+
setXY
+
+
+ -
+
+
-
+
+
Contains+ +
+
+
Set the position of the shape in page coordinates, regardless of how the node is positioned.
+Parameters:
+ +-
+
+
-
+
+
Contains+ Array + + + + +++ + +x & y values for new position (coordinates are page-based)
+
+
+
skew
+
+
+ -
+
+
-
+
+
x+ +
+
+ -
+
+
y+ +
+
+
Skews the shape around the x-axis and y-axis.
+skewX
+
+
+ -
+
+
-
+
+
x+ +
+
+
Skews the shape around the x-axis.
+Parameters:
+ +-
+
+
-
+
+
x+ Number + + + + +++ + +x-coordinate
+
+
+
skewY
+
+
+ -
+
+
-
+
+
y+ +
+
+
Skews the shape around the y-axis.
+Parameters:
+ +-
+
+
-
+
+
y+ Number + + + + +++ + +y-coordinate
+
+
+
test
+
+
+ -
+
+
-
+
+
selector+ +
+
+
Test if the supplied node matches the supplied selector.
+Parameters:
+ +-
+
+
-
+
+
selector+ String + + + + +++ + +The CSS selector to test against.
+
+
+
Returns:
+ +toFront
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Places the shape above all other shapes.
+toFront
+
+
+ ()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Places the shape underneath all other shapes.
+translate
+
+
+ -
+
+
-
+
+
x+ +
+
+ -
+
+
y+ +
+
+
Specifies a 2d translation.
+translateX
+
+
+ -
+
+
-
+
+
x+ +
+
+
Translates the shape along the x-axis. When translating x and y coordinates,
+use the translate method.
Parameters:
+ +-
+
+
-
+
+
x+ Number + + + + +++ + +The value to translate.
+
+
+
translateY
+
+
+ -
+
+
-
+
+
y+ +
+
+
Translates the shape along the y-axis. When translating x and y coordinates,
+use the translate method.
Parameters:
+ +-
+
+
-
+
+
y+ Number + + + + +++ + +The value to translate.
+
+
+
Properties
+ + +_transform
+ String
+
+
+
+
+ private
+
+
+
+
+
+
+
+
+ Storage for the transform attribute.
+_x
+ Unknown
+
+
+
+
+ protected
+
+
+
+
+
+
+
+
+ Storage for x attribute.
+_y
+ Unknown
+
+
+
+
+ protected
+
+
+
+
+
+
+
+
+ Storage for y attribute.
+Attributes
+ + +data
+ String
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+fill
+ Object
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contains information about the fill of the shape. +
-
+
- color
- The color of the fill. +
- opacity
- Number between 0 and 1 that indicates the opacity of the fill. The default value is 1. +
- type
- Type of fill.
+
-
+
- solid
- Solid single color fill. (default) +
- linear
- Linear gradient fill. +
- radial
- Radial gradient fill. +
+
If a linear or radial is specified as the fill type. The following additional property is used:
+
-
+
- stops
- An array of objects containing the following properties:
+
-
+
- color
- The color of the stop. +
- opacity
- Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. + Note: No effect for IE 6 - 8 +
- offset
- Number between 0 and 1 indicating where the color stop is positioned. +
+ - rotation
- 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.) +
- r
- Radius of the gradient circle. +
- fx
- Focal point x-coordinate of the gradient. +
- fy
- Focal point y-coordinate of the gradient. +
- cx
-
+
The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
+Note: Currently, this property is not implemented for corresponding
+CanvasShapeand +VMLShapeclasses which are used on Android or IE 6 - 8.
+ - cy
-
+
The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
+Note: Currently, this property is not implemented for corresponding
+CanvasShapeandVMLShape+ classes which are used on Android or IE 6 - 8.
+
Linear gradients also have the following property:
+Radial gradients have the following additional properties:
+graphic
+ SVGGraphic
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ readonly
+
+
+
+
+ Reference to the parent graphic instance
+height
+ Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates the height of the shape
+node
+ HTMLElement
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ readonly
+
+
+
+
+ Dom node for the shape.
+stroke
+ Object
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contains information about the stroke of the shape. +
-
+
- color
- The color of the stroke. +
- weight
- Number that indicates the width of the stroke. +
- opacity
- Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1. +
- dashstyle 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. +
- linecap
- Specifies the linecap for the stroke. The following values can be specified:
+
-
+
- butt (default)
- Specifies a butt linecap. +
- square
- Specifies a sqare linecap. +
- round
- Specifies a round linecap. +
+ - linejoin
- Specifies a linejoin for the stroke. The following values can be specified:
+
-
+
- round (default)
- Specifies that the linejoin will be round. +
- bevel
- Specifies a bevel for the linejoin. +
- miter limit
- 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. +
+
transform
+ String
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A string containing, in order, transform operations applied to the shape instance. The transform string can contain the following values:
+
+
-
+
- rotate
- Rotates the shape clockwise around it transformOrigin. +
- translate
- Specifies a 2d translation. +
- skew
- Skews the shape around the x-axis and y-axis. +
- scale
- Specifies a 2d scaling operation. +
- translateX
- Translates the shape along the x-axis. +
- translateY
- Translates the shape along the y-axis. +
- skewX
- Skews the shape around the x-axis. +
- skewY
- Skews the shape around the y-axis. +
- matrix
- Specifies a 2D transformation matrix comprised of the specified six values. +
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.
var myRect = new Y.Rect({
+ type:"rect",
+ width: 50,
+ height: 40,
+ transform: "rotate(45)"
+ };
+The code below would apply translate and rotate to an existing shape.
myRect.set("transform", "translate(40, 50) rotate(45)");
+transformOrigin
+ Array
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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].
+visible
+ Boolean
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates whether the shape is visible.
+width
+ Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates the width of the shape
+x
+ Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates the x position of shape.
+y
+ Number
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indicates the y position of shape.
+