Home > Articles

  • Print
  • + Share This
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>
  • + Share This
  • 🔖 Save To Your Account