This chapter is from the book
This chapter is from the book
This chapter is from the book
Other SVG DOM Interfaces
This section describes SVG DOM objects other than those that relate to the basic graphic shape elements and that relate to topics discussed earlier in this chapter.
The SVGGradientElement Object
Three SVG DOM objects are directly related to the linearGradient and radialGradient elements: the SVGGradientElement object, the SVGLinearGradientElement object, and the SVGRadialGradientElement object.
The SVGGradientElement object has the properties and methods of the SVGElement object (described in Chapter 2), the SVGURIReference object, the SVGExternalResourcesRequired object, the SVGStylable object, and the SVGUnitTypes object.
The SVGGradientElement object has the following constants associated with it:
SVGGradientElement.SVG_SPREADMETHOD_UNKNOWN—This constant is of type short and has a value of 0.
SVGGradientElement.SVG_SPREADMETHOD_PAD—This constant is of type short and has a value of 1.
SVGGradientElement.SVG_SPREADMETHOD_REFLECT—This constant is of type short and has a value of 2.
SVGGradientElement.SVG_SPREADMETHOD_REPEAT—This constant is of type short and has a value of 3.
The SVGGradientElement object has the following properties:
gradientUnits—of type SVGAnimatedEnumeration
gradientTransform—of type SVGAnimatedTransformList
spreadMethod—of type SVGAnimatedEnumeration
The SVGGradientElement object has no specific methods.
The SVGLinearGradientElement Object
The SVGLinearGradientElement object is the DOM representation of the linearGradient element. The SVGLinearGradientElement object has the properties of the SVGGradientElement, plus the following properties:
x1—of type SVGAnimatedLength
y1—of type SVGAnimatedLength
x2—of type SVGAnimatedLength
y2—of type SVGAnimatedLength
The SVGLinearGradientElement object has no methods specific to it.
The SVGPaint Object
The SVGPaint object has the properties and methods of the SVGColor object (which is described in Chapter 4).
The SVGPaint object has the following constants associated with it:
SVGPaint.SVG_PAINTTYPE_UNKNOWN—The constant is of type short and has a value of 0.
SVGPaint.SVG_PAINTTYPE_RGBCOLOR—The constant is of type short and has a value of 1.
SVGPaint.SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR—The constant is of type short and has a value of 2.
SVGPaint.SVG_PAINTTYPE_NONE—The constant is of type short and has a value of 101.
SVGPaint.SVG_PAINTTYPE_CURRENTCOLOR—The constant is of type short and has a value of 102.
SVGPaint.SVG_PAINTTYPE_URI_NONE—The constant is of type short and has a value of 103.
SVGPaint.SVG_PAINTTYPE_URI_CURRENTCOLOR—The constant is of type short and has a value of 104.
SVGPaint.SVG_PAINTTYPE_URI_RGBCOLOR—The constant is of type short and has a value of 105.
SVGPaint.SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR—The constant is of type short and has a value of 106.
SVGPaint.SVG_PAINTTYPE_URI—The constant is of type short and has a value of 107.
In addition, the SVGPaint object has the following properties:
paintType—of type unsigned short
uri—of type DOMString
The SVGPaint object has the following methods:
setUri(uri)—The method returns a value of type void. The uri argument is of type DOMString.
setPaint(paintType,uri,rgbColor,iccColor)—The method returns a value of type void. The paintType argument is of type unsigned short; the uri, rgbColor, and iccColor arguments are of type DOMString.
The SVGPatternElement Object
The SVGPatternElement object is the SVG DOM representation of the pattern element. The properties of the SVGPatternElement object correspond closely to the attributes of the pattern element.
The SVGPatternElement object has the properties and methods of the SVGElement object, the SVGURIReference object, the SVGTests object, the SVGLangSpace object, the SVGExternalResourcesRequired object, the SVGStylable obect, the SVGFitToViewBox object, and the SVGUnitTypes object.
In addition, the SVGPatternElement object has the following properties:
patternUnits—of type SVGAnimatedEnumeration
patternContentUnits—of type SVGAnimatedEnumeration
patternTransform—of type SVGAnimatedTransformList
x—of type SVGAnimatedLength
y—of type SVGAnimatedLength
width—of type SVGAnimatedLength
height—of type SVGAnimatedLength
The SVGPatternElement object has no methods specific to it.
The SVGRadialGradientElement Object
The SVGRadialGradientElement object is the DOM representation of the radialGradient element. The SVGRadialGradientElement object has the properties of the SVGGradientElement, plus the following properties:
cx—of type SVGAnimatedLength
cy—of type SVGAnimatedLength
r—of type SVGAnimatedLength
fx—of type SVGAnimatedLength
fy—of type SVGAnimatedLength
The SVGRadialGradientElement object has no methods specific to it.
The SVGStopElement Object
The SVGStopElement object has the properties and methods of the SVGElement object and the SVGStylable object.
In addition, the SVGStopElement object has the following property:
- offset—of type SVGAnimatedNumber
The SVGStopElement object has no methods specific to it.
The SVGSwitchElement Object
The SVGSwitchElement object has the properties and methods of the SVGElement object, the SVGTests object, the SVGLangSpace object, the SVGExternalResourcesRequired object, the SVGStylable object, the SVGTransformable object, and the DOM Level 2 Events EventTarget object (events::EventTarget).
To complete this section on the SVG DOM, let's look at an example of how to script an object representing an element described earlier in this chapter.
Creating a Line Using the SVG DOM
Listing 3.26 is an example of creating a line. The line element is created using the createElement() method of the SVGDocument object. The attributes needed to describe the position of the two ends of the line element and its style attribute are added using the setAttribute() method.
Listing 3.26 MakeLine.svg—Creating a Line Using JavaScript and the SVG DOM
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="200px" onload="MakeLine()">
<script type="text/javascript">
<![CDATA[
function MakeLine(){
SVGDoc = evt.getTarget().getOwnerDocument();
SVGRoot = SVGDoc.getDocumentElement();
myLine = SVGDoc.createElement("line");
myLine.setAttribute("x1", 50);
myLine.setAttribute("y1", 100);
myLine.setAttribute("x2", 375);
myLine.setAttribute("y2", 100);
myLine.setAttribute("style", "stroke:red; stroke-width:4");
SVGRoot.appendChild(myLine);
}
]]>
</script>
<rect x="75" y="75" width="300" height="50" style="fill:red; opacity:0.4"/>
</svg>