- The line Element
- The rect Element
- The circle Element
- The ellipse Element
- The polyline Element
- The polygon Element
- Color in SVG
- Gradients in SVG
- SVG Patterns
- SVG DOM Interfaces for the SVG Basic Shapes
- Other SVG DOM Interfaces
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
SVG DOM Interfaces for the SVG Basic Shapes
In this section, we will examine the SVG DOM interfaces that correspond to the SVG elements we looked at earlier in the chapter. The interfaces are described in an order similar to that in which elements were presented earlier in the chapter.
The SVGLineElement Object
The SVGLineElement object is the SVG DOM representation of a line element. The SVGLineElement object is accessed when you want to manipulate a line element in an SVG document. The properties of the SVGLineElement object correspond closely to the attributes of a line element.
The SVGLineElement object has the properties and methods of the SVGElement object (described in Chapter 2, "Document Structure in SVG"), the SVGTests object, the SVGLangSpace object, the SVGExternalResourcesRequired object, the SVGStylable object, the SVGTransformable object, and the EventTarget object of the DOM 2 Events specification.
The SVGLineElement object has the following properties:
x1—of type SVGAnimatedLength
y1—of type SVGAnimatedLength
x2—of type SVGAnimatedLength
y2—of type SVGAnimatedLength
The SVGLineElement object has no methods specific to it.
The SVGRectElement Object
The SVGRectElement object is the SVG DOM representation of a rect element. The SVGRectElement object allows the attributes of a rect element to be accessed and manipulated using a scripting language. The properties of the SVGRectElement object correspond closely to the attributes of a rect element.
The SVGRectElement object has the properties and methods of the SVGElement object (described in Chapter 2), the SVGTests object, the SVGLangSpace object, the SVGExternalResourcesRequired object, the SVGStylable object, the SVGTransformable object, and the EventTarget object of the DOM 2 Events specification.
In addition, the SVGRectElement object has the following properties:
x—of type SVGAnimatedLength
y—of type SVGAnimatedLength
width—of type SVGAnimatedLength
height—of type SVGAnimatedLength
rx—of type SVGAnimatedLength
ry—of type SVGAnimatedLength
The SVGRectElement object has no methods specific to it.
The SVGCircleElement Object
The SVGCircleElement object is the SVG DOM representation of a circle element. The SVGCircleElement object allows the attributes of a circle element to be accessed and manipulated programmatically. The properties of the SVGCircleElement object correspond closely to the attributes of a circle element.
The SVGCircleElement object has the properties and methods of the SVGElement object (described in Chapter 2), the SVGTests object, the SVGLangSpace object, the SVGExternalResourcesRequired object, the SVGStylable object, the SVGTransformable object, and the EventTarget object of the DOM 2 Events specification.
The SVGCircleElement object has the following properties:
cx—of type SVGAnimatedLength
cy—of type SVGAnimatedLength
r—of type SVGAnimatedLength
The SVGCircleElement object has no methods specific to it.
The SVGEllipseElement Object
The SVGEllipseElement object is the SVG DOM representation of an ellipse element. The properties of the SVGEllipseElement object correspond closely to the attributes of an ellipse element.
The SVGEllipseElement object has the properties and methods of the SVGElement object (described in Chapter 2), the SVGTests object, the SVGLangSpace object, the SVGExternalResourcesRequired object, the SVGStylable object, the SVGTransformable object, and the EventTarget object of the DOM 2 Events specification.
The SVGEllipseElement object has the following properties:
cx—of type SVGAnimatedLength
cy—of type SVGAnimatedLength
rx—of type SVGAnimatedLength
ry—of type SVGAnimatedLength
The SVGEllipseElement object has no methods specific to it.
The SVGPolylineElement Object
The SVGPolylineElement object is the SVG DOM representation of a polyline element.
The SVGPolylineElement object has the properties and methods of the SVGElement object (described in Chapter 2), the SVGTests object, the SVGLangSpace object, the SVGExternalResourcesRequired object, the SVGStylable object, the SVGTransformable object, the SVGAnimatedPoints object, and the EventTarget object of the DOM 2 Events specification.
The SVGPolylineElement object has no specific properties or methods.
The SVGPolygonElement Object
The SVGPolygonElement object is the SVG DOM representation of a polygon element.
The SVGPolygonElement object has the properties and methods of the SVGElement object (described in Chapter 2), the SVGTests object, the SVGLangSpace object, the SVGExternalResourcesRequired object, the SVGStylable object, the SVGTransformable object, the SVGAnimatedPoints object, and the EventTarget object of the DOM 2 Events specification.
The SVGPolygonElement object has no specific properties or methods.