11 Painting: Filling, Stroking and Marker Symbols

Contents

• 11.1 Introduction
• 11.2 Specifying paint
• 11.3 Fill Properties
• 11.4 Stroke Properties
• 11.5 Controlling visibility
• 11.6 Markers
  • 11.6.1 Introduction
  • 11.6.2 The Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element
  • 11.6.3 Marker properties
  • 11.6.4 Details on how markers are rendered
• 11.7 Rendering properties
  • 11.7.1 Color interpolation properties: Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½color-interpolation-filtersÄ�ā‚¬ā„¢
  • 11.7.2 The Ä�ā‚¬ļæ½color-renderingÄ�ā‚¬ā„¢ property
  • 11.7.3 The Ä�ā‚¬ļæ½shape-renderingÄ�ā‚¬ā„¢ property
  • 11.7.4 The Ä�ā‚¬ļæ½text-renderingÄ�ā‚¬ā„¢ property
  • 11.7.5 The Ä�ā‚¬ļæ½image-renderingÄ�ā‚¬ā„¢ property
• 11.8 Inheritance of painting properties
• 11.9 DOM interfaces
  • 11.9.1 Interface SVGPaint
  • 11.9.2 Interface SVGMarkerElement

11.1 Introduction

Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ elements, Ä�ā‚¬ļæ½textÄ�ā‚¬ā„¢ elements and basic shapes can be filled (which means painting the interior of the object) and stroked (which means painting along the outline of the object). Filling and stroking both can be thought of in more general terms as painting operations.

Certain elements (i.e., Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ elements) can also have marker symbols drawn at their vertices.

With SVG, you can paint (i.e., fill or stroke) with:

• a single color
• a gradient (linear or radial)
• a pattern (vector or image, possibly tiled)
• custom paints available via extensibility

SVG uses the general notion of a paint server. Paint servers are specified using a IRI reference on a Ä�ā‚¬ļæ½fillÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½strokeÄ�ā‚¬ā„¢ property. Gradients and patterns are just specific types of paint servers.

11.2 Specifying paint

Properties Ä�ā‚¬ļæ½fillÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½strokeÄ�ā‚¬ā„¢ take on a value of type <paint>, which is specified as follows:

none

Indicates that no paint is applied.

currentColor

Indicates that painting is done using the current animated value of the color specified by the Ä�ā‚¬ļæ½colorÄ�ā‚¬ā„¢ property. This mechanism is provided to facilitate sharing of color attributes between parent grammars such as other (non-SVG) XML. This mechanism allows you to define a style in your HTML which sets the Ä�ā‚¬ļæ½colorÄ�ā‚¬ā„¢ property and then pass that style to the SVG user agent so that your SVG text will draw in the same color.

<color> [<icccolor>]

<color> is the explicit color (in the sRGB color space [SRGB]) to be used to paint the current object. SVG supports all of the syntax alternatives for <color> defined in CSS2 ([CSS2], section 4.3.6), with the exception that SVG contains an expanded list of recognized color keywords names. If an optional ICC color specification [ICC42] is provided, then the user agent searches the color profile description database for a color profile description entry whose name descriptor matches the <name> part of the <icccolor> and uses the last matching entry that is found. (If no match is found, then the ICC color specification is ignored.) The comma and/or whitespace separated list of <number>s is a set of ICC-profile-specific color values. (In most cases, the <number>s will be in the range 0 to 1.) On platforms which support ICC-based color management, the <icccolor> gets precedence over the <color> (which is in the sRGB color space). Note that color interpolation occurs in an RGB color space even if an ICC-based color specification is provided (see Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½color-interpolation-filtersÄ�ā‚¬ā„¢). For more on ICC-based colors, refer to Color profile descriptions.

<funciri>
Ä€Ā Ä€Ā Ä€Ā [ none |
Ä€Ā Ä€Ā Ä€Ā Ä€Ā Ä€Ā Ä€Ā currentColor |
Ä€Ā Ä€Ā Ä€Ā Ä€Ā Ä€Ā Ä€Ā <color> [<icccolor>] ]

The <funciri> is used to identify a paint server such as a gradient, a pattern or a custom paint defined by an extension (see Extensibility). The <funciri> points to the paint server (e.g., a gradient or pattern) to be used to paint the current object. If the IRI reference is not valid (e.g., it points to an object that doesn't exist or the object is not a valid paint server), then the paint method following the <funciri> (i.e., none | currentColor | <color> [<icccolor>] is used if provided; otherwise, the document is in error (see Error processing).

11.3 Fill Properties

The Ä�ā‚¬ļæ½fillÄ�ā‚¬ā„¢ property paints the interior of the given graphical element. The area to be painted consists of any areas inside the outline of the shape. To determine the inside of the shape, all subpaths are considered, and the interior is determined according to the rules associated with the current value of the Ä�ā‚¬ļæ½fill-ruleÄ�ā‚¬ā„¢ property. The zero-width geometric outline of a shape is included in the area to be painted.

The fill operation fills open subpaths by performing the fill operation as if an additional "closepath" command were added to the path to connect the last point of the subpath with the first point of the subpath. Thus, fill operations apply to both open subpaths within Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ elements (i.e., subpaths without a closepath command) and Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ elements.

The Ä�ā‚¬ļæ½fill-ruleÄ�ā‚¬ā„¢ property indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies "inside"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of "inside" is not so obvious.

The Ä�ā‚¬ļæ½fill-ruleÄ�ā‚¬ā„¢ property provides two options for how the inside of a shape is determined:

nonzero

This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside. The following drawing illustrates the nonzero rule:

View this example as SVG (SVG-enabled browsers only)

evenodd

This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside. The following drawing illustrates the evenodd rule:

View this example as SVG (SVG-enabled browsers only)

(Note: the above explanations do not specify what to do if a path segment coincides with or is tangent to the ray. Since any ray will do, one may simply choose a different ray that does not have such problem intersections.)

Ä�ā‚¬ļæ½fill-opacityÄ�ā‚¬ā„¢ specifies the opacity of the painting operation used to paint the interior the current object. (See Painting shapes and text.)

<opacity-value>

The opacity of the painting operation used to fill the current object, as a <number>. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (See Clamping values which are restricted to a particular range.)

Related properties: Ä�ā‚¬ļæ½stroke-opacityÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½opacityÄ�ā‚¬ā„¢.

11.4 Stroke Properties

The following are the properties which affect how an element is stroked.

In all cases, all stroking properties which are affected by directionality, such as those having to do with dash patterns, must be rendered such that the stroke operation starts at the same point at which the graphics element starts. In particular, for Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ elements, the start of the path is the first point of the initial "moveto" command.

For stroking properties such as dash patterns whose computations are dependent on progress along the outline of the graphics element, distance calculations are required to utilize the SVG user agent's standard Distance along a path algorithms.

When stroking is performed using a complex paint server, such as a gradient or a pattern, the stroke operation must be identical to the result that would have occurred if the geometric shape defined by the geometry of the current graphics element and its associated stroking properties were converted to an equivalent Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element and then filled using the given paint server.

The Ä�ā‚¬ļæ½strokeÄ�ā‚¬ā„¢ property paints along the outline of the given graphical element.

A subpath (see Paths) consisting of a single moveto shall not be stroked. Any zero length subpath shall not be stroked if the Ä�ā‚¬ļæ½stroke-linecapÄ�ā‚¬ā„¢ property has a value of butt but shall be stroked if the Ä�ā‚¬ļæ½stroke-linecapÄ�ā‚¬ā„¢ property has a value of round or square, producing respectively a circle or a square centered at the given point. Examples of zero length subpaths include 'M 10,10 L 10,10', 'M 20,20 h 0', 'M 30,30 z' and 'M 40,40 c 0,0 0,0 0,0'.

This property specifies the width of the stroke on the current object. If a <percentage> is used, the value represents a percentage of the current viewport. (See Units.)

A zero value causes no stroke to be painted. A negative value is an error (see Error processing).

Ä�ā‚¬ļæ½stroke-linecapÄ�ā‚¬ā„¢ specifies the shape to be used at the end of open subpaths when they are stroked. For further details see the path implementation notes.

butt

See drawing below.

round

See drawing below.

square

See drawing below.

View this example as SVG (SVG- and CSS-enabled browsers only)

Ä�ā‚¬ļæ½stroke-linejoinÄ�ā‚¬ā„¢ specifies the shape to be used at the corners of paths or basic shapes when they are stroked. For further details see the path implementation notes.

miter

See drawing below.

round

See drawing below.

bevel

See drawing below.

View this example as SVG (SVG- and CSS-enabled browsers only)

When two line segments meet at a sharp angle and miter joins have been specified for Ä�ā‚¬ļæ½stroke-linejoinÄ�ā‚¬ā„¢, it is possible for the miter to extend far beyond the thickness of the line stroking the path. The Ä�ā‚¬ļæ½stroke-miterlimitÄ�ā‚¬ā„¢ imposes a limit on the ratio of the miter length to the Ä�ā‚¬ļæ½stroke-widthÄ�ā‚¬ā„¢. When the limit is exceeded, the join is converted from a miter to a bevel.

<miterlimit>

The limit on the ratio of the miter length to the Ä�ā‚¬ļæ½stroke-widthÄ�ā‚¬ā„¢. The value of <miterlimit> must be a <number> greater than or equal to 1. Any other value is an error (see Error processing).

The ratio of miter length (distance between the outer tip and the inner corner of the miter) to Ä�ā‚¬ļæ½stroke-widthÄ�ā‚¬ā„¢ is directly related to the angle (theta) between the segments in user space by the formula:

miterLength / stroke-width = 1 / sin ( theta / 2 )

For example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.

Ä�ā‚¬ļæ½stroke-dasharrayÄ�ā‚¬ā„¢ controls the pattern of dashes and gaps used to stroke paths. <dasharray> contains a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke-dasharray:Ä€Ā 5,3,2 is equivalent to stroke-dasharray:Ä€Ā 5,3,2,5,3,2.

none

Indicates that no dashing is used. If stroked, the line is drawn solid.

<dasharray>

A list of comma and/or white space separated <length>s (which can have a unit identifier) and <percentage>s. A percentage represents a distance as a percentage of the current viewport (see Units). A negative value is an error (see Error processing). If the sum of the values is zero, then the stroke is rendered as if a value of none were specified. For further details see the path implementation notes.

The grammar for <dasharray> is as follows:

dasharray ::= (length | percentage) (comma-wsp dasharray)?

Ä�ā‚¬ļæ½stroke-dashoffsetÄ�ā‚¬ā„¢ specifies the distance into the dash pattern to start the dash.

If a <percentage> is used, the value represents a percentage of the current viewport (see Units).

Values can be negative.

Ä�ā‚¬ļæ½stroke-opacityÄ�ā‚¬ā„¢ specifies the opacity of the painting operation used to stroke the current object. (See Painting shapes and text.)

<opacity-value>

The opacity of the painting operation used to stroke the current object, as a <number>. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. (See Clamping values which are restricted to a particular range.)

Related properties: Ä�ā‚¬ļæ½fill-opacityÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½opacityÄ�ā‚¬ā„¢.

11.5 Controlling visibility

SVG uses two properties, Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢, to control the visibility of graphical elements or (in the case of the Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ property) container elements.

The differences between the two properties are as follows:

• When applied to a container element, setting Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢, however, only applies to individual graphics elements. Setting Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ to hidden on a Ä�ā‚¬ļæ½gÄ�ā‚¬ā„¢ will make its children invisible as long as the children do not specify their own Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ properties as visible. Note that Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ is not an inheritable property.
• When the Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ property is set to none, then the given element does not become part of the rendering tree. With Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ set to hidden, however, processing occurs as if the element were part of the rendering tree and still taking up space, but not actually rendered onto the canvas. This distinction has implications for the Ä�ā‚¬ļæ½tspanÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½trefÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½altGlyphÄ�ā‚¬ā„¢ elements, event processing, for bounding box calculations and for calculation of clipping paths. If Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ is set to none on a Ä�ā‚¬ļæ½tspanÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½trefÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½altGlyphÄ�ā‚¬ā„¢ element, then the text string is ignored for the purposes of text layout; however, if Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ is set to hidden, the text string is used for text layout (i.e., it takes up space) even though it is not rendered on the canvas. Regarding events, if Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ is set to none, the element receives no events; however, if Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ is set to hidden, the element might still receive events, depending on the value of property Ä�ā‚¬ļæ½pointer-eventsÄ�ā‚¬ā„¢. The geometry of a graphics element with Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ set to none is not included in bounding box and clipping paths calculations; however, even if Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ is to hidden, the geometry of the graphics element still contributes to bounding box and clipping path calculations.

A value of display:Ä€Ā none indicates that the given element and its children shall not be rendered directly (i.e., those elements are not present in the rendering tree). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent.

The Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ property only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting display:Ä€Ā none on a Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element will prevent that element from getting rendered directly onto the canvas, but the Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element can still be referenced by a Ä�ā‚¬ļæ½textPathÄ�ā‚¬ā„¢ element; furthermore, its geometry will be used in text-on-a-path processing even if the Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ has display:Ä€Ā none.

The Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ property affects direct rendering into offscreen canvases also, such as occurs with the implementation model for masks. Thus, setting display:Ä€Ā none on a child of a Ä�ā‚¬ļæ½maskÄ�ā‚¬ā„¢ will prevent the given child element from being rendered as part of the mask. Similarly, setting display:Ä€Ā none on a child of a Ä�ā‚¬ļæ½clipPathÄ�ā‚¬ā„¢ element will prevent the given child element from contributing to the clipping path.

Elements with display:Ä€Ā none do not take up space in text layout operations, do not receive events, and do not contribute to bounding box and clipping paths calculations.

Except for any additional information provided in this specification, the normative definition of the Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ property is the CSS2 definition ([CSS2], section 9.2.6).

visible

The current graphics element is visible.

hidden or collapse

The current graphics element is invisible (i.e., nothing is painted on the canvas).

Note that if the Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ property is set to hidden on a Ä�ā‚¬ļæ½tspanÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½trefÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½altGlyphÄ�ā‚¬ā„¢ element, then the text is invisible but still takes up space in text layout calculations.

Depending on the value of property Ä�ā‚¬ļæ½pointer-eventsÄ�ā‚¬ā„¢, graphics elements which have their Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ property set to hidden still might receive events.

Except for any additional information provided in this specification, the normative definition of the Ä�ā‚¬ļæ½visibilityÄ�ā‚¬ā„¢ property is the CSS2 definition ([CSS2], section 11.2).

11.6 Markers

11.6.1 Introduction

A marker is a symbol which is attached to one or more vertices of Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ elements. Typically, markers are used to make arrowheads or polymarkers. Arrowheads can be defined by attaching a marker to the start or end vertices of Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ elements. Polymarkers can be defined by attaching a marker to all vertices of a Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ element.

The graphics for a marker are defined by a Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element. To indicate that a particular Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element should be rendered at the vertices of a particular Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ element, set one or more marker properties (Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½marker-startÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½marker-midÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½marker-endÄ�ā‚¬ā„¢) to reference the given Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element.

Example Marker draws a triangular marker symbol as an arrowhead at the end of a path.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="2in" 
     viewBox="0 0 4000 2000" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <desc>Placing an arrowhead at the end of a path.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100" 
        marker-end="url(#Triangle)"  />
</svg>

Example Marker

View this example as SVG (SVG-enabled browsers only)

Markers can be animated. The animated effects will show on all current uses of the markers within the document.

11.6.2 The Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element defines the graphics that is to be used for drawing arrowheads or polymarkers on a given Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ element.

Markers are drawn such that their reference point (i.e., attributes Ä�ā‚¬ļæ½refXÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½refYÄ�ā‚¬ā„¢) is positioned at the given vertex. In other words, a translation transformation is constructed by the user agent to achieve the effect of having point (Ä�ā‚¬ļæ½refXÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½refYÄ�ā‚¬ā„¢) within the marker content's coordinate system (after any transformations due to the Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½preserveAspectRatioÄ�ā‚¬ā„¢ attributes) align exactly with the given vertex.

SVG's user agent style sheet sets the Ä�ā‚¬ļæ½overflowÄ�ā‚¬ā„¢ property for Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ elements to hidden, which causes a rectangular clipping path to be created at the bounds of the marker tile. Unless the Ä�ā‚¬ļæ½overflowÄ�ā‚¬ā„¢ property is overridden, any graphics within the marker which goes outside of the marker rectangle will be clipped.

The contents of the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ are relative to a new coordinate system. Attribute Ä�ā‚¬ļæ½markerUnitsÄ�ā‚¬ā„¢ determines an initial scale factor for transforming the graphics in the marker into the user coordinate system for the referencing element. An additional set of transformations might occur if there is a Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ attribute, in which case the coordinate system for the contents of the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ will be transformed due to the processing of attributes Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½preserveAspectRatioÄ�ā‚¬ā„¢. If there is no Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ attribute, then the assumed default value for the the Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ attribute has the origin of the viewBox coincident with the origin of the viewport and the width/height of the viewBox the same as the width/height of the viewport.

Properties inherit into the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element from its ancestors; properties do not inherit from the element referencing the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element.

Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ elements are never rendered directly; their only usage is as something that can be referenced using the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½marker-startÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½marker-endÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½marker-midÄ�ā‚¬ā„¢ properties. The Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ property does not apply to the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element; thus, Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ elements are not directly rendered even if the Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ property is set to a value other than none, and Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ elements are available for referencing even when the Ä�ā‚¬ļæ½displayÄ�ā‚¬ā„¢ property on the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element or any of its ancestors is set to none.

Event attributes and event listeners attached to the contents of a Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element are not processed; only the rendering aspects of Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ elements are processed.

11.6.3 Marker properties

Ä�ā‚¬ļæ½marker-startÄ�ā‚¬ā„¢ defines the arrowhead or polymarker that shall be drawn at the first vertex of the given Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element or basic shape. Ä�ā‚¬ļæ½marker-endÄ�ā‚¬ā„¢ defines the arrowhead or polymarker that shall be drawn at the final vertex. Ä�ā‚¬ļæ½marker-midÄ�ā‚¬ā„¢ defines the arrowhead or polymarker that shall be drawn at every other vertex (i.e., every vertex except the first and last). Note that for a Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element which ends with a closed sub-path, the last vertex is the same as the initial vertex on the given sub-path. In this case, if Ä�ā‚¬ļæ½marker-endÄ�ā‚¬ā„¢ does not equal none, then it is possible that two markers will be rendered on the given vertex. One way to prevent this is to set Ä�ā‚¬ļæ½marker-endÄ�ā‚¬ā„¢ to none. (Note that the same comment applies to Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢ elements.)

none

Indicates that no marker symbol shall be drawn at the given vertex (vertices).

<funciri>

The <funciri> is a Functional IRI reference to the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element which shall be used as the arrowhead symbol or polymarker at the given vertex or vertices. If the IRI reference is not valid (e.g., it points to an object that is undefined or the object is not a Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element), then the marker(s) shall not be drawn.

The Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ property specifies the marker symbol that shall be used for all points on the sets the value for all vertices on the given Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element or basic shape. It is a short-hand for the three individual marker properties:

11.6.4 Details on how markers are rendered

Markers are drawn after the given object is filled and stroked.

For each marker that is drawn, a temporary new user coordinate system is established so that the marker will be positioned and sized correctly, as follows:

• The axes of the temporary new user coordinate system are aligned according to the Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢ attribute on the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element and the slope of the curve at the given vertex. (Note: if there is a discontinuity at a vertex, the slope is the average of the slopes of the two segments of the curve that join at the given vertex. If a slope cannot be determined, the slope is assumed to be zero.)
• A temporary new coordinate system is established by attribute Ä�ā‚¬ļæ½markerUnitsÄ�ā‚¬ā„¢. If Ä�ā‚¬ļæ½markerUnitsÄ�ā‚¬ā„¢ equals 'strokeWidth', then the temporary new user coordinate system is the result of scaling the current user coordinate system by the current value of property Ä�ā‚¬ļæ½stroke-widthÄ�ā‚¬ā„¢. If Ä�ā‚¬ļæ½markerUnitsÄ�ā‚¬ā„¢ equals 'userSpaceOnUse', then no extra scale transformation is applied.
• An additional set of transformations might occur if the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element includes a Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ attribute, in which case additional transformations are set up to produce the necessary result due to attributes Ä�ā‚¬ļæ½viewBoxÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½preserveAspectRatioÄ�ā‚¬ā„¢.
• If the Ä�ā‚¬ļæ½overflowÄ�ā‚¬ā„¢ property on the Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element indicates that the marker needs to be clipped to its viewport, then an implicit clipping path is established at the bounds of the viewport.

The rendering effect of a marker is as if the contents of the referenced Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element were deeply cloned into a separate non-exposed DOM tree for each instance of the marker. Because the cloned DOM tree is non-exposed, the SVG DOM does not show the cloned instance of the marker.

For user agents that support Styling with CSS, the conceptual deep cloning of the referenced Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) and property inheritance on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.

For illustrative purposes, we'll repeat the marker example shown earlier:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="2in" 
     viewBox="0 0 4000 2000" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth"
      markerWidth="4" markerHeight="3"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <desc>Placing an arrowhead at the end of a path.
  </desc>
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100" 
        marker-end="url(#Triangle)"  />
</svg>

The rendering effect of the above file will be visually identical to the following:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4in" height="2in" 
     viewBox="0 0 4000 2000" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>File which produces the same effect
      as the marker example file, but without
      using markers.
  </desc>
  <rect x="10" y="10" width="3980" height="1980"
       fill="none" stroke="blue" stroke-width="10" />
  <!-- The path draws as before, but without the marker properties -->
  <path d="M 1000 750 L 2000 750 L 2500 1250"
        fill="none" stroke="black" stroke-width="100"  />
  <!-- The following logic simulates drawing a marker 
       at final vertex of the path. -->
  <!-- First off, move the origin of the user coordinate system
       so that the origin is now aligned with the end point of the path. -->
  <g transform="translate(2500,1250)" >
    <!-- Rotate the coordinate system 45 degrees because
         the marker specified orient="auto" and the final segment
         of the path is going in the direction of 45 degrees. -->
    <g transform="rotate(45)" >
      <!-- Scale the coordinate system to match the coordinate system
           indicated by the 'markerUnits' attributes, which in this case has
           a value of 'strokeWidth'. Therefore, scale the coordinate system
           by the current value of the 'stroke-width' property, which is 100. -->
      <g transform="scale(100)" >
        <!-- Translate the coordinate system by 
             (-refX*viewBoxToMarkerUnitsScaleX, -refY*viewBoxToMarkerUnitsScaleY)
             in order that (refX,refY) within the marker will align with the vertex.
             In this case, we use the default value for preserveAspectRatio
             ('xMidYMid meet'), which means find a uniform scale factor
             (i.e., viewBoxToMarkerUnitsScaleX=viewBoxToMarkerUnitsScaleY)
             such that the viewBox fits entirely within the viewport ('meet') and 
             is center-aligned ('xMidYMid'). In this case, the uniform scale factor
             is markerHeight/viewBoxHeight=3/10=.3. Therefore, translate by
             (-refX*.3,-refY*.3)=(0*.3,-5*.3)=(0,-1.5). -->
        <g transform="translate(0,-1.5)" >
          <!-- There is an implicit clipping path because the user agent style
               sheet says that the 'overflow' property for markers has the value
               'hidden'. To achieve this, create a clipping path at the bounds
               of the viewport. Note that in this case the viewport extends
               0.5 units to the left and right of the viewBox due to 
               a uniform scale factor, different ratios for markerWidth/viewBoxWidth
               and markerHeight/viewBoxHeight, and 'xMidYMid' alignment -->
          <clipPath id="cp1" >
            <rect x="-0.5" y="0" width="4" height="3" />
          </clipPath>
          <g clip-path="url(#cp1)" >
            <!-- Scale the coordinate system by the uniform scale factor
                 markerHeight/viewBoxHeight=3/10=.3 to set the coordinate
                 system to viewBox units. -->
            <g transform="scale(.3)" >
              <!-- This 'g' element carries all property values that result from
                   cascading and inheritance of properties on the original 'marker' element.
                   In this example, neither fill nor stroke was specified on the 'marker'
                   element or any ancestors of the 'marker', so the initial values of
                   "black" and "none" are used, respectively. -->
             <g fill="black" stroke="none" >
                <!-- Expand out the contents of the 'marker' element. -->
                <path d="M 0 0 L 10 5 L 0 10 z" />
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

View this example as SVG (SVG-enabled browsers only)

11.7 Rendering properties

11.7.1 Color interpolation properties: Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½color-interpolation-filtersÄ�ā‚¬ā„¢

The SVG user agent performs color interpolations and compositing at various points as it processes SVG content. Two properties, Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½color-interpolation-filtersÄ�ā‚¬ā„¢, control which color space is used for particular categories of graphics operations. The following table shows which property applies to which graphics operations:

Both properties choose between color operations occurring in the sRGB color space or in a (light energy linear) linearized RGB color space. Having chosen the appropriate color space, component-wise linear interpolation is used.

The conversion formulas between the sRGB color space (i.e., nonlinear with 2.2 gamma curve) and the linearized RGB color space (i.e., color values expressed as sRGB tristimulus values without a gamma curve) can be found in the sRGB specification [SRGB]. For illustrative purposes, the following formula shows the conversion from sRGB to linearized RGB:

  R[sRGB] = R[sRGB-8bit] / 255
  G[sRGB] = G[sRGB-8bit] / 255
  B[sRGB] = B[sRGB-8bit] / 255
If R[sRGB], G[sRGB], B[sRGB] <= 0.04045
  R[linearRGB] = R[sRGB] / 12.92
  G[linearRGB] = G[sRGB] / 12.92
  B[linearRGB] = B[sRGB] / 12.92
else if R[sRGB], G[sRGB], B[sRGB] > 0.04045
  R[linearRGB] = ((R[sRGB] + 0.055) / 1.055) ^ 2.4
  G[linearRGB] = ((G[sRGB] + 0.055) / 1.055) ^ 2.4
  B[linearRGB] = ((B[sRGB] + 0.055) / 1.055) ^ 2.4
  R[linearRGB-8bit] = R[linearRGB] * 255
  G[linearRGB-8bit] = G[linearRGB] * 255
  B[linearRGB-8bit] = B[linearRGB] * 255

Out-of-range color values, if supported by the user agent, also are converted using the above formulas. (See Clamping values which are restricted to a particular range.)

auto

Indicates that the user agent can choose either the sRGB or linearRGB spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.

sRGB

Indicates that color interpolation should occur in the sRGB color space.

linearRGB

Indicates that color interpolation should occur in the linearized RGB color space as described above.

The Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ property specifies the color space for gradient interpolations, color animations and alpha compositing.

When a child element is blended into a background, the value of the Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ property on the child determines the type of blending, not the value of the Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ on the parent. For gradients which make use of the Ä�ā‚¬ļæ½xlink:hrefÄ�ā‚¬ā„¢ attribute to reference another gradient, the gradient uses the Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ property value from the gradient element which is directly referenced by the Ä�ā‚¬ļæ½fillÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½strokeÄ�ā‚¬ā„¢ property. When animating colors, color interpolation is performed according to the value of the Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ property on the element being animated.

auto

Indicates that the user agent can choose either the sRGB or linearRGB spaces for filter effects color operations. This option indicates that the author doesn't require that color operations occur in a particular color space.

sRGB

Indicates that filter effects color operations should occur in the sRGB color space.

linearRGB

Indicates that filter effects color operations should occur in the linearized RGB color space.

The Ä�ā‚¬ļæ½color-interpolation-filtersÄ�ā‚¬ā„¢ property specifies the color space for imaging operations performed via filter effects.

Note that Ä�ā‚¬ļæ½color-interpolation-filtersÄ�ā‚¬ā„¢ has a different initial value than Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢. Ä�ā‚¬ļæ½color-interpolation-filtersÄ�ā‚¬ā„¢ has an initial value of linearRGB, whereas Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ has an initial value of sRGB. Thus, in the default case, filter effects operations occur in the linearRGB color space, whereas all other color interpolations occur by default in the sRGB color space.

11.7.2 The Ä�ā‚¬ļæ½color-renderingÄ�ā‚¬ā„¢ property

The creator of SVG content might want to provide a hint to the implementation about how to make speed vs. quality tradeoffs as it performs color interpolation and compositing. The Ä�ā‚¬ļæ½color-renderingÄ�ā‚¬ā„¢ property provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations.

Ä�ā‚¬ļæ½color-renderingÄ�ā‚¬ā„¢ takes precedence over Ä�ā‚¬ļæ½color-interpolation-filtersÄ�ā‚¬ā„¢. For example, assume color-rendering:Ä€Ā optimizeSpeed and color-interpolation-filters:Ä€Ā linearRGB. In this case, the SVG user agent should perform color operations in a way that optimizes performance, which might mean sacrificing the color interpolation precision as specified by color-interpolation-filters:Ä€Ā linearRGB.

auto

Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.

optimizeSpeed

Indicates that the user agent shall emphasize rendering speed over quality. For RGB display devices, this option will sometimes cause the user agent to perform color interpolation and compositing in the device RGB color space.

optimizeQuality

Indicates that the user agent shall emphasize quality over rendering speed.

11.7.3 The Ä�ā‚¬ļæ½shape-renderingÄ�ā‚¬ā„¢ property

The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders vector graphics elements such as Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ elements and basic shapes such as circles and rectangles. The Ä�ā‚¬ļæ½shape-renderingÄ�ā‚¬ā„¢ property provides these hints.

auto

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.

optimizeSpeed

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.

crispEdges

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.

geometricPrecision

Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.

11.7.4 The Ä�ā‚¬ļæ½text-renderingÄ�ā‚¬ā„¢ property

The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The Ä�ā‚¬ļæ½text-renderingÄ�ā‚¬ā„¢ property provides these hints.

auto

Indicates that the user agent shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.

optimizeSpeed

Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause the user agent to turn off text anti-aliasing.

optimizeLegibility

Indicates that the user agent shall emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.

geometricPrecision

Indicates that the user agent shall emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.

11.7.5 The Ä�ā‚¬ļæ½image-renderingÄ�ā‚¬ā„¢ property

The creator of SVG content might want to provide a hint to the implementation about how to make speed vs. quality tradeoffs as it performs image processing. The Ä�ā‚¬ļæ½image-renderingÄ�ā‚¬ā„¢ property provides a hint to the SVG user agent about how to optimize its image rendering.

auto

Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed. The user agent shall employ a resampling algorithm at least as good as nearest neighbor resampling, but bilinear resampling is strongly preferred. For Conforming High-Quality SVG Viewers, the user agent shall employ a resampling algorithm at least as good as bilinear resampling.

optimizeQuality

Indicates that the user agent shall emphasize quality over rendering speed. The user agent shall employ a resampling algorithm at least as good as bilinear resampling.

optimizeSpeed

Indicates that the user agent shall emphasize rendering speed over quality. The user agent should use a resampling algorithm which achieves the goal of fast rendering, with the requirement that the resampling algorithm shall be at least as good as nearest neighbor resampling. If performance goals can be achieved with higher quality algorithms, then the user agent should use the higher quality algorithms instead of nearest neighbor resampling.

In all cases, resampling must be done in a truecolor (e.g., 24-bit) color space even if the original data and/or the target device is indexed color.

11.8 Inheritance of painting properties

The values of any of the painting properties described in this chapter can be inherited from a given object's parent. Painting, however, is always done on each graphics element individually, never at the container element (e.g., a Ä�ā‚¬ļæ½gÄ�ā‚¬ā„¢) level. Thus, for the following SVG, even though the gradient fill is specified on the Ä�ā‚¬ļæ½gÄ�ā‚¬ā„¢, the gradient is simply inherited through the Ä�ā‚¬ļæ½gÄ�ā‚¬ā„¢ element down into each rectangle, each of which is rendered such that its interior is painted with the gradient.

Example Inheritance

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="7cm" height="2cm" viewBox="0 0 700 200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Gradients apply to leaf nodes
  </desc>
  <g>
    <defs>
      <linearGradient id="MyGradient" gradientUnits="objectBoundingBox">
        <stop offset="0%" stop-color="#F60" />
        <stop offset="100%" stop-color="#FF6" />
      </linearGradient>
    </defs>
    <rect x="1" y="1" width="698" height="198"
          fill="none" stroke="blue" stroke-width="2" />
    <g fill="url(#MyGradient)" >
      <rect x="100" y="50" width="200" height="100"/>
      <rect x="400" y="50" width="200" height="100"/>
   </g>
  </g>
</svg>

Example Inheritance

View this example as SVG (SVG-enabled browsers only)

Any painting properties defined in terms of the object's bounding box use the bounding box of the graphics element to which the operation applies. Note that text elements are defined such that any painting operations defined in terms of the object's bounding box use the bounding box of the entire Ä�ā‚¬ļæ½textÄ�ā‚¬ā„¢ element. (See the discussion of object bounding box units and text elements.)

11.9 DOM interfaces

11.9.1 Interface SVGPaint

The SVGPaint interface corresponds to basic type <paint> and represents the values of properties Ä�ā‚¬ļæ½fillÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½strokeÄ�ā‚¬ā„¢.

Note: The SVGPaint interface is deprecated, and may be dropped from future versions of the SVG specification.

interface SVGPaint : SVGColor {

  // Paint Types
  const unsigned short SVG_PAINTTYPE_UNKNOWN = 0;
  const unsigned short SVG_PAINTTYPE_RGBCOLOR = 1;
  const unsigned short SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR = 2;
  const unsigned short SVG_PAINTTYPE_NONE = 101;
  const unsigned short SVG_PAINTTYPE_CURRENTCOLOR = 102;
  const unsigned short SVG_PAINTTYPE_URI_NONE = 103;
  const unsigned short SVG_PAINTTYPE_URI_CURRENTCOLOR = 104;
  const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR = 105;
  const unsigned short SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR = 106;
  const unsigned short SVG_PAINTTYPE_URI = 107;

  readonly attribute unsigned short paintType;
  readonly attribute DOMString uri;

  void setUri(in DOMString uri);
  void setPaint(in unsigned short paintType, in DOMString uri, in DOMString rgbColor, in DOMString iccColor) raises(SVGException);
};

Constants in group Ä�ā‚¬ļæ½Paint TypesÄ�ā‚¬ĀÆ:

SVG_PAINTTYPE_UNKNOWN (unsigned short)

The paint type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_PAINTTYPE_RGBCOLOR (unsigned short)

An sRGB color has been specified without an alternative ICC color specification.

SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR (unsigned short)

An sRGB color has been specified along with an alternative ICC color specification.

SVG_PAINTTYPE_NONE (unsigned short)

Corresponds to a none value on a <paint> specification.

SVG_PAINTTYPE_CURRENTCOLOR (unsigned short)

Corresponds to a currentColor value on a <paint> specification.

SVG_PAINTTYPE_URI_NONE (unsigned short)

A URI has been specified, along with an explicit none as the backup paint method in case the URI is unavailable or invalid.

SVG_PAINTTYPE_URI_CURRENTCOLOR (unsigned short)

A URI has been specified, along with an sRGB color as the backup paint method in case the URI is unavailable or invalid.

SVG_PAINTTYPE_URI_RGBCOLOR (unsigned short)

A URI has been specified, along with an sRGB color as the backup paint method in case the URI is unavailable or invalid.

SVG_PAINTTYPE_URI_RGBCOLOR_ICCCOLOR (unsigned short)

A URI has been specified, along with both an sRGB color and alternate ICC color as the backup paint method in case the URI is unavailable or invalid.

SVG_PAINTTYPE_URI (unsigned short)

Only a URI has been specified.

Attributes:

paintType (readonly unsigned short)

The type of paint, identified by one of the SVG_PAINTTYPE_* constants defined on this interface.

uri (readonly DOMString)

When the paintType specifies a URI, this attribute holds the URI string. When the paintType does not specify a URI, this attribute is null.

Operations:

void setUri(in DOMString uri)

Sets the paintType to SVG_PAINTTYPE_URI_NONE and sets uri to the specified value.

Parameters

1. DOMString uri
   The URI for the desired paint server.

void setPaint(in unsigned short paintType, in DOMString uri, in DOMString rgbColor, in DOMString iccColor)

Sets the paint as specified by the parameters. If paintType requires a URI, then uri must be non-null; otherwise, uri must be null. If paintType requires an RGBColor, then rgbColor must be a string that matches <color>; otherwise, rgbColor must be null. If paintType requires an SVGICCColor, then iccColor must be a string that matches <icccolor>; otherwise, iccColor must be null.

Parameters

1. unsigned short paintType
   One of the defined constants for paintType.
2. DOMString uri
   The URI for the desired paint server, or null.
3. DOMString rgbColor
   The specification of an sRGB color, or null.
4. DOMString iccColor
   The specification of an ICC color, or null.

Exceptions

SVGException, code SVG_INVALID_VALUE_ERR

Raised if one of the parameters has an invalid value.

11.9.2 Interface SVGMarkerElement

interface SVGMarkerElement : SVGElement,
                             SVGLangSpace,
                             SVGExternalResourcesRequired,
                             SVGStylable,
                             SVGFitToViewBox {

  // Marker Unit Types
  const unsigned short SVG_MARKERUNITS_UNKNOWN = 0;
  const unsigned short SVG_MARKERUNITS_USERSPACEONUSE = 1;
  const unsigned short SVG_MARKERUNITS_STROKEWIDTH = 2;

  // Marker Orientation Types
  const unsigned short SVG_MARKER_ORIENT_UNKNOWN = 0;
  const unsigned short SVG_MARKER_ORIENT_AUTO = 1;
  const unsigned short SVG_MARKER_ORIENT_ANGLE = 2;

  readonly attribute SVGAnimatedLength refX;
  readonly attribute SVGAnimatedLength refY;
  readonly attribute SVGAnimatedEnumeration markerUnits;
  readonly attribute SVGAnimatedLength markerWidth;
  readonly attribute SVGAnimatedLength markerHeight;
  readonly attribute SVGAnimatedEnumeration orientType;
  readonly attribute SVGAnimatedAngle orientAngle;

  void setOrientToAuto() raises(DOMException);
  void setOrientToAngle(in SVGAngle angle) raises(DOMException);
};

Constants in group Ä�ā‚¬ļæ½Marker Unit TypesÄ�ā‚¬ĀÆ:

SVG_MARKERUNITS_UNKNOWN (unsigned short)

The marker unit type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_MARKERUNITS_USERSPACEONUSE (unsigned short)

The value of attribute Ä�ā‚¬ļæ½markerUnitsÄ�ā‚¬ā„¢ is 'userSpaceOnUse'.

SVG_MARKERUNITS_STROKEWIDTH (unsigned short)

The value of attribute Ä�ā‚¬ļæ½markerUnitsÄ�ā‚¬ā„¢ is 'strokeWidth'.

Constants in group Ä�ā‚¬ļæ½Marker Orientation TypesÄ�ā‚¬ĀÆ:

SVG_MARKER_ORIENT_UNKNOWN (unsigned short)

The marker orientation is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.

SVG_MARKER_ORIENT_AUTO (unsigned short)

Attribute Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢ has value 'auto'.

SVG_MARKER_ORIENT_ANGLE (unsigned short)

Attribute Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢ has an angle value.

Attributes:

refX (readonly SVGAnimatedLength)

Corresponds to attribute Ä�ā‚¬ļæ½refXÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element.

refY (readonly SVGAnimatedLength)

Corresponds to attribute Ä�ā‚¬ļæ½refYÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element.

markerUnits (readonly SVGAnimatedEnumeration)

Corresponds to attribute Ä�ā‚¬ļæ½markerUnitsÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element. One of the Marker Unit Types defined on this interface.

markerWidth (readonly SVGAnimatedLength)

Corresponds to attribute Ä�ā‚¬ļæ½markerWidthÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element.

markerHeight (readonly SVGAnimatedLength)

Corresponds to attribute Ä�ā‚¬ļæ½markerHeightÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element.

orientType (readonly SVGAnimatedEnumeration)

Corresponds to attribute Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element. One of the Marker Orientation Types defined on this interface.

orientAngle (readonly SVGAnimatedAngle)

Corresponds to attribute Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢ on the given Ä�ā‚¬ļæ½markerÄ�ā‚¬ā„¢ element. If markerUnits is SVG_MARKER_ORIENT_ANGLE, the angle value for attribute Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢; otherwise, it will be set to zero.

Operations:

void setOrientToAuto()

Sets the value of attribute Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢ to 'auto'.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.

void setOrientToAngle(in SVGAngle angle)

Sets the value of attribute Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢ to the given angle.

Parameters

1. SVGAngle angle
   The angle value to use for attribute Ä�ā‚¬ļæ½orientÄ�ā‚¬ā„¢.

Exceptions

DOMException, code NO_MODIFICATION_ALLOWED_ERR

Raised on an attempt to change the value of a read only attribute.