The 'stroke' property paints along the outline of the given graphical element.

A subpath (see Paths) consisting of a single moveto is not stroked. A subpath consisting of a moveto and lineto to the same exact location or a subpath consisting of a moveto and a closepath will be stroked only if the 'stroke-linecap' property is set to "round", producing a circle centered at the given point.

<width>

The width of the stroke on the current object, expressed as a <length>. If a percentage is used, the <width> is expressed as a percentage of the current viewport. (See Processing rules when using absolute unit identifiers and percentages.)
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.

butt

See drawing below.

round

See drawing below.

square

See drawing below.

'stroke-linejoin' specifies the shape to be used at the corners of paths (or other vector shapes) that are stroked. when they are stroked.

miter

See drawing below.

round

See drawing below.

bevel

See drawing below.

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-linewidth'.

<miterlimit>

The limit on the ratio of the miter length to the 'stroke-linewidth'. The value of <miterlimit> must be a number greater than or equal to 1. Any other value is an error (see Error processing).

'stroke-dasharray' controls the pattern of dashes and gaps used to stroke paths. <dasharray> contains a list of comma-separated (with optional white space) <number>s that specify the lengths of alternating dashes and gaps in user units. 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-separated <length>'s (with optional white space), each of which can have a unit identifier , including specification of a percentage. A percentage represents a distance as a percentage of the current viewport. (See Processing rules when using absolute unit identifiers and percentages.) A negative <length> value is an error (see Error processing). If the sum of the <length>'s is zero, then the stroke is rendered as if a value of none were specified.

'stroke-dashoffset' specifies the distance into the dash pattern to start the dash.

<dashoffset>

A <length>. If a percentage is used, the <width> is expressed as a percentage of the current viewport
(See Processing rules when using absolute unit identifiers and percentages.)
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. 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 content. Either property can make an element invisible.

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 only make its children invisible if the children set their own 'visibility' properties to inherit (or, of course, hidden). Note that 'visibility' is not an inheritable property.
• When the 'display' property is set to none, then rendering occurs as if the given element and its children were not in the document. With 'visibility' set to hidden, however, processing occurs as if the element were still in the document and still taking up space, but just not rendered onto the canvas. This distinction has implications for the 'tspan', 'tref' and 'glyphRun' elements and event processing. If 'display' is set to none on a 'tspan', 'tref' or 'glyphRun' 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'.

A value of display: none indicates that the given element and its children shall not be rendered (i.e., document rendering occurs as if the given element and its children were not part of the document). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent.

Except for any additional information provided in this specification, the normative definition of the property is in [CSS2].

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 'glyphRun' element, then the text is invisible but still takes up space in calculations of text layout.

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 property is in [CSS2].

11.6 Markers

11.6.1 Introduction

To use a marker symbol for arrowheads or polymarkers, you need to define a 'marker' element which defines the marker symbol and then refer to that 'marker' element using the various marker properties (i.e., 'marker-start', 'marker-end', 'marker-mid' or 'marker') on the given 'path' element or vector graphic shape. Here is an example which draws a triangular marker symbol that is drawn as an arrowhead at the end of a path:

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

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

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' element or vector graphic shape.
 

<!ENTITY % markerExt "" >
<!ELEMENT marker (desc|title|metadata|defs|
                   path|text|rect|circle|ellipse|line|polyline|polygon|
                   use|image|svg|g|view|switch|a|altGlyphDef|
                   script|style|symbol|marker|clipPath|mask|
                   linearGradient|radialGradient|pattern|filter|cursor|font|
                   animate|set|animateMotion|animateColor|animateTransform|
                   color-profile|font-face
                   %ceExt;%markerExt;)* >
<!ATTLIST marker
  %stdAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All;
  viewBox %ViewBoxSpec; #IMPLIED
  preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
  refX %Coordinate; #IMPLIED
  refY %Coordinate; #IMPLIED
  markerUnits (strokeWidth | userSpaceOnUse | userSpace) #IMPLIED
  markerWidth  %Length; #IMPLIED
  markerHeight %Length; #IMPLIED
  orient CDATA #IMPLIED >

Markers are drawn such that their reference point (i.e., attributes refX and refY) is positioned at the given vertex.

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 vector graphic 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).

none

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

<uri>

The <uri> is a URI reference to the ID of a 'marker' element which shall be used as the arrowhead symbol or polymarker at the given vertex (vertices). If the URI 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 vector graphic 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.

Each marker is drawn into a temporary viewport. The temporary viewport and its associated temporary viewport coordinate system are such that:

• The axes of the temporary viewport 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.)
• The size of a single unit in X and Y in the temporary viewport coordinate system (and correspondingly in the user coordinate system associated with that viewport) is determined by the value of attribute markerUnits.
  If markerUnits equals strokeWidth, the temporary viewport coordinate system is scaled by the current value of property 'stroke-width'.
  If markerUnits equals userSpaceOnUse, then no extra scale transformation is applied.
  If markerUnits equals userSpace, then a scale transformation is applied to map X-axis and Y-axis length measurements in the current user coordinate system to the corresponding X-axis and Y-axis length measurements in the user coordinate system of the 'marker' element such that the length measurements represent the same distances within the initial viewport coordinate system.
• Attributes markerWidth and markerHeight on the 'marker' element determine the width and height of the temporary viewport expressed in the temporary viewer coordinate system.
• The origin of the temporary viewport coordinate system is at a point translated from the given vertex by (-markerWidth * refX / viewBoxWidth, -markerHeight * refY / viewBoxHeight) in the temporary viewport coordinate system, where:
  • markerWidth and markerHeight are the values of attributes markerWidth and markerHeight on the 'marker' element
  • refX and refY are the values of attributes refX and refY on the 'marker' element
  • viewBoxWidth and viewBoxHeight are the width and height values on on the viewBox attribute on the 'marker' element, respectively.
    If the viewBox attribute is not specified, then viewBoxWidth and viewBoxHeight are assumed to have the same values as markerWidth and markerHeight.

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

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

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

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 20000629//EN" 
  "http://www.w3.org/TR/2000/WD-SVG-20000629/DTD/svg-20000629.dtd">
<svg width="4in" height="3in" 
     viewBox="0 0 4000 3000" >

  <desc>File which produces the same effect
      as the marker example file, but without
      using markers.
  </desc>
  <!-- The path draws as before, but without the marker properties -->
  <path d="M 1000 1000 L 2000 1000 L 2500 1500"
        style="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,1500)" >

    <!-- Now, 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)" >

      <!-- Now, scale the coordinate system by the current value of
           the 'stroke-width' property, which is 100. -->
      <g transform="scale(100)" >

        <!-- Now, translate the coordinate system by
             (-markerWidth * refX / viewBoxWidth, -markerHeight * refY / viewBoxHeight)
             so that (refX,refY) within the marker will align with the vertex. 
             Since refX is zero, there is no horizontal translation.
             Since markerWidth is 3, refY is 5 and height of the viewBox is 10,
             translate in Y by -3*5/10 = -1.5 -->
        <g transform="translate(0,-1.5)" >

          <!-- Establish a new viewport with an 'svg' element.
               The width/height of the viewport are 2 and 3 times
               the current stroke-width. -->
          <svg width="2" height="3" viewBox="0 0 10 10"" >

            <!-- Expand out the contents of the 'marker' element. -->
            <path d="M 0 0 L 10 5 L 0 10 z" />
          </svg>
        </g>
      </g>
    </g>
  </g>
</svg>

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

11.7 Rendering properties

The SVG user agent performs color interpolations and compositing in the following cases:

• when rendering gradients
• when performing color animations (see 'animateColor')
• when performing alpha blending/compositing of graphics elements into the current background
• when performing various filter effects

The 'color-interpolation' property specifies whether color interpolations and compositing shall be performed in the sRGB [SRGB] color space or in a (light energy linear) linearized RGB color space.

The conversion formulas between sRGB color space and linearized RGB color space is can be found in [SRGB]. The following formula shows the conversion from sRGB to linearized RGB:

  R'[sRGB] = R[sRGB] / 255
  G'[sRGB] = G[sRGB] / 255
  B'[sRGB] = B[sRGB] / 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

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 linearRGBspaces 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 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:

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.

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.

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.

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.

optimizeSpeed

Indicates that the user agent shall emphasize rendering speed over quality. This option will sometimes cause the user agent to use a bilinear image resampling algorithm.

optimizeQuality

Indicates that the user agent shall emphasize quality over rendering speed. This option will sometimes cause the user agent to use a bicubic image resampling algorithm.

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 leaf-node individually, never at the '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.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000629//EN" 
  "http://www.w3.org/TR/2000/WD-SVG-20000629/DTD/svg-20000629.dtd">
<svg width="7cm" height="2cm">
  <desc>Gradients apply to leaf nodes
  </desc>
  <g>
    <defs>
      <linearGradient id="MyGradient" gradientUnits="objectBoundingBox">
        <stop offset="0%" style="stop-color:#F60"/>
        <stop offset="100%" style="stop-color:#FF6"/>
      </linearGradient>
    </defs>
    <g style="fill:url(#MyGradient)">
      <rect x="1cm" y="1cm" width="2cm" height="1cm"/>
      <rect x="4cm" y="1cm" width="2cm" height="1cm"/>
   </g>
  </g>
</svg>

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

11.9 DOM interfaces

The following interfaces are defined below: SVGPaint, SVGMarkerElement.

Interface SVGPaint

The SVGPaint interface corresponds to basic type <paint> and represents the values of properties 'fill' and 'stroke'.

IDL Definition

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;

  readonly attribute unsigned short paintType;
  readonly attribute DOMString      uri;

  void setUri ( in DOMString uri );
  void setPaint ( in unsigned short paintType, in DOMString uri, in css::RGBColor rgbColor, in SVGICCColor iccColor );
};

Definition group Paint Types

Defined constants

SVG_PAINTTYPE_UNKNOWN		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		An sRGB color has been specified without an alternative ICC color specification.
SVG_PAINTTYPE_RGBCOLOR_ICCCOLOR		An sRGB color has been specified along with an alternative ICC color specification.
SVG_PAINTTYPE_NONE		Corresponds to a 'none' value on a <paint> specification.
SVG_PAINTTYPE_CURRENTCOLOR		Corresponds to a 'currentColor' value on a <paint> specification.
SVG_PAINTTYPE_URI_NONE		A URI has been specified, along with either an explicit or an implicit 'none' as the backup paint method in case the URI is unavailable or invalid.
SVG_PAINTTYPE_URI_CURRENTCOLOR		A URI has been specified, along with 'currentColor' as the backup paint method in case the URI is unavailable or invalid.
SVG_PAINTTYPE_URI_RGBCOLOR		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		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.

Attributes

readonly unsigned short paintType

The type of paint, identified by one of the constants above.

readonly DOMString uri

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

Methods

setUri

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

Parameters

in DOMString uri

The URI for the desired paint server.

No Return Value

No Exceptions

setPaint

Sets the paintType as specified by the parameters. If paintType requires a URI, then uri must be non-null and a valid string; otherwise, uri must be null. If paintType requires an RGBColor, then rgbColor must be a valid RGBColor object; otherwise, rgbColor must be null. If paintType requires an SVGICCColor, then iccColor must be a valid SVGICCColor object; otherwise, iccColor must be null.

Parameters

in unsigned short paintType		One of the defined constants for paintType.
in DOMString uri		The URI for the desired paint server, or null.
in css::RGBColor rgbColor		The specification of an sRGB color, or null.
in SVGICCColor iccColor		The specification of an ICC color, or null.

No Return Value

No Exceptions

Interface SVGMarkerElement

The SVGMarkerElement interface corresponds to the 'marker' element.

IDL Definition

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_USERSPACE      = 2;
  const unsigned short SVG_MARKERUNITS_STROKEWIDTH    = 3;
  // 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;

           attribute SVGAnimatedLength      refX;
                       // raises DOMException on setting
           attribute SVGAnimatedLength      refY;
                       // raises DOMException on setting
           attribute SVGAnimatedEnumeration markerUnits;
                       // raises DOMException on setting
           attribute SVGAnimatedLength      markerWidth;
                       // raises DOMException on setting
           attribute SVGAnimatedLength      markerHeight;
                       // raises DOMException on setting
  readonly attribute SVGAnimatedEnumeration orientType;
  readonly attribute SVGAnimatedAngle      orientAngle;

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

Definition group Marker Unit Types

Defined constants

SVG_MARKERUNITS_UNKNOWN		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		The value of attribute markerUnits is 'userSpaceOnUse'.
SVG_MARKERUNITS_USERSPACE		The value of attribute markerUnits is 'userSpace'.
SVG_MARKERUNITS_STROKEWIDTH		The value of attribute markerUnits is 'strokeWidth'.

Definition group Marker Orientation Types

Defined constants

SVG_MARKER_ORIENT_UNKNOWN		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		Attribute orient has value 'auto'.
SVG_MARKER_ORIENT_ANGLE		Attribute orient has an angle value.

Attributes

SVGAnimatedLength refX

Corresponds to attribute refX on the given 'marker' element.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.

SVGAnimatedLength refY

Corresponds to attribute refY on the given 'marker' element.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.

SVGAnimatedEnumeration markerUnits

Corresponds to attribute markerUnits on the given 'marker' element. One of the Marker Units Types defined above.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.

SVGAnimatedLength markerWidth

Corresponds to attribute markerWidth on the given 'marker' element.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.

SVGAnimatedLength markerHeight

Corresponds to attribute markerHeight on the given 'marker' element.

Exceptions on setting

DOMException

NO_MODIFICATION_ALLOWED_ERR: Raised when the node is readonly.

readonly SVGAnimatedEnumeration orientType

Corresponds to attribute orient on the given 'marker' element. One of the Marker Orientation Types defined above.

readonly SVGAnimatedAngle orientAngle

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.

Methods

setOrientToAuto

Sets the value of attribute orient to 'auto'.

No Parameters

No Return Value

No Exceptions

setOrientToAngle

Sets the value of attribute orient to the given angle.

Parameters

in SVGAngle angle

The angle value to use for attribute orient.

No Return Value

No Exceptions