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:
<paint>: |
none |
currentColor | <color>
[<icccolor>] | <funciri> [ none | currentColor | <color>
[<icccolor>] ] |
inherit
|
- 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
- ‘fill’
-
Value: |
<paint> (See Specifying
paint) |
Initial: |
black |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
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.
- ‘fill-rule’
-
Value: |
nonzero | evenodd |
inherit
|
Initial: |
nonzero |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
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’
-
Value: |
<opacity-value> |
inherit
|
Initial: |
1 |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
‘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.
- ‘stroke’
-
Value: |
<paint> (See Specifying
paint) |
Initial: |
none |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
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'.
- ‘stroke-width’
-
Value: |
<percentage> | <length> |
inherit
|
Initial: |
1 |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
Yes |
Media: |
visual |
Animatable: |
yes |
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’
-
Value: |
butt | round | square |
inherit
|
Initial: |
butt |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
‘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’
-
Value: |
miter | round | bevel |
inherit
|
Initial: |
miter |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
‘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)
- ‘stroke-miterlimit’
-
Value: |
<miterlimit> |
inherit
|
Initial: |
4 |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
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:
1 | 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’
-
Value: |
none | <dasharray> |
inherit
|
Initial: |
none |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
yes (see below) |
Media: |
visual |
Animatable: |
yes (non-additive) |
‘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’
-
Value: |
<percentage> | <length> |
inherit
|
Initial: |
0 |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
see prose |
Media: |
visual |
Animatable: |
yes |
‘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’
-
Value: |
<opacity-value> |
inherit
|
Initial: |
1 |
Applies to: |
shapes and text content
elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
‘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.
- ‘display’
-
Value: |
inline | block | list-item |
run-in | compact | marker |
table | inline-table | table-row-group |
table-header-group |
table-footer-group | table-row | table-column-group
| table-column |
table-cell | table-caption | none |
inherit
|
Initial: |
inline |
Applies to: |
‘svg’, ‘g’, ‘switch’, ‘a’,
‘foreignObject’, graphics elements (including the
‘text’ element) and text sub-elements (i.e.,
‘tspan’, ‘tref’, ‘altGlyph’,
‘textPath’) |
Inherited: |
no |
Percentages: |
N/A |
Media: |
all |
Animatable: |
yes |
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).
- ‘visibility’
-
Value: |
visible | hidden | collapse |
inherit
|
Initial: |
visible |
Applies to: |
graphics elements (including the ‘text’ element) and
text sub-elements (i.e., ‘tspan’, ‘tref’,
‘altGlyph’, ‘textPath’ and ‘a’) |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
- 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.
‘marker’
- Categories:
- Container element
- Content model:
- Any number of the following elements, in any order:
- animation elements — ‘animate’, ‘animateColor’, ‘animateMotion’, ‘animateTransform’, ‘set’
- descriptive elements — ‘desc’, ‘metadata’, ‘title’
- shape elements — ‘circle’, ‘ellipse’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’
- structural elements — ‘defs’, ‘g’, ‘svg’, ‘symbol’, ‘use’
- gradient elements — ‘linearGradient’, ‘radialGradient’
- ‘a’
- ‘altGlyphDef’
- ‘clipPath’
- ‘color-profile’
- ‘cursor’
- ‘filter’
- ‘font’
- ‘font-face’
- ‘foreignObject’
- ‘image’
- ‘marker’
- ‘mask’
- ‘pattern’
- ‘script’
- ‘style’
- ‘switch’
- ‘text’
- ‘view’
- Attributes:
- core attributes — ‘id’, ‘xml:base’, ‘xml:lang’, ‘xml:space’
- presentation attributes — ‘alignment-baseline’, ‘baseline-shift’, ‘clip’, ‘clip-path’, ‘clip-rule’, ‘color’, ‘color-interpolation’, ‘color-interpolation-filters’, ‘color-profile’, ‘color-rendering’, ‘cursor’, ‘direction’, ‘display’, ‘dominant-baseline’, ‘enable-background’, ‘fill’, ‘fill-opacity’, ‘fill-rule’, ‘filter’, ‘flood-color’, ‘flood-opacity’, ‘font-family’, ‘font-size’, ‘font-size-adjust’, ‘font-stretch’, ‘font-style’, ‘font-variant’, ‘font-weight’, ‘glyph-orientation-horizontal’, ‘glyph-orientation-vertical’, ‘image-rendering’, ‘kerning’, ‘letter-spacing’, ‘lighting-color’, ‘marker-end’, ‘marker-mid’, ‘marker-start’, ‘mask’, ‘opacity’, ‘overflow’, ‘pointer-events’, ‘shape-rendering’, ‘stop-color’, ‘stop-opacity’, ‘stroke’, ‘stroke-dasharray’, ‘stroke-dashoffset’, ‘stroke-linecap’, ‘stroke-linejoin’, ‘stroke-miterlimit’, ‘stroke-opacity’, ‘stroke-width’, ‘text-anchor’, ‘text-decoration’, ‘text-rendering’, ‘unicode-bidi’, ‘visibility’, ‘word-spacing’, ‘writing-mode’
- ‘class’
- ‘style’
- ‘externalResourcesRequired’
- ‘viewBox’
- ‘preserveAspectRatio’
- ‘refX’
- ‘refY’
- ‘markerUnits’
- ‘markerWidth’
- ‘markerHeight’
- ‘orient’
- DOM Interfaces:
Attribute definitions:
-
markerUnits = "strokeWidth |
userSpaceOnUse"
- Defines the coordinate system for attributes
‘markerWidth’, ‘markerHeight’ and the
contents of the ‘marker’.
If markerUnits="strokeWidth",
‘markerWidth’, ‘markerHeight’ and the contents
of the ‘marker’ represent values in a coordinate system
which has a single unit equal the size in user units of the
current stroke width (see the ‘stroke-width’ property) in
place for the graphic object referencing the marker.
If markerUnits="userSpaceOnUse",
‘markerWidth’, ‘markerHeight’ and the contents
of the ‘marker’ represent values in the current
user coordinate system in place for the graphic object
referencing the marker (i.e., the user coordinate system for
the element referencing the ‘marker’ element via a
‘marker’, ‘marker-start’, ‘marker-mid’
or ‘marker-end’ property).
If attribute ‘markerUnits’ is not specified, then the effect
is as if a value of 'strokeWidth'
were specified.
Animatable: yes.
-
refX = "<coordinate>"
- The x-axis coordinate of the reference point which is
to be aligned exactly at the marker position. The
coordinate is defined in the coordinate system after
application of the ‘viewBox’ and ‘preserveAspectRatio’
attributes.
If the attribute is not specified, the effect is as if a
value of "0" were specified.
Animatable:
yes.
-
refY = "<coordinate>"
- The y-axis coordinate of the reference point which is
to be aligned exactly at the marker position. The
coordinate is defined in the coordinate system after
application of the ‘viewBox’ and ‘preserveAspectRatio’
attributes.
If the attribute is not specified, the effect is as if a
value of "0" were specified.
Animatable:
yes.
-
markerWidth = "<length>"
- Represents the width of the viewport into which the
marker is to be fitted when it is rendered.
A negative value is an error (see Error processing).
A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a
value of "3" were specified.
Animatable:
yes.
-
markerHeight = "<length>"
- Represents the height of the viewport into which the
marker is to be fitted when it is rendered.
A negative value is an error (see Error processing).
A value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a
value of "3" were specified.
Animatable:
yes.
-
orient = "auto | <angle>"
-
Indicates how the marker is rotated.
A value of 'auto' indicates that the marker is
oriented such that its positive x-axis is pointing as
follows:
-
If there is a path segment coming into the
vertex and another path segment going out of the vertex,
the marker's positive x-axis should point toward the
angle bisector for the angle at the given vertex, where
that angle has one side consisting of tangent vector for
the path segment going into the vertex and the other side
the tangent vector for the path segment going out of the
vertex. Note:
- If the tangent vectors are the same, the angle bisector equals the two tangent vectors.
- If an incoming and an outgoing vertex produce a zero vector the direction of marker is undefined.
-
If there is only a path segment going into the vertex (e.g.,
the last vertex on an open path), the marker's positive
x-axis should point in the same direction as the tangent
vector for the path segment going into the vertex.
-
If there is only a path segment going out of the vertex
(e.g., the first vertex on an open path), the marker's
positive x-axis should point in the same direction as the
tangent vector for the path segment going out of the
vertex. (Refer to
‘path’
element implementation notes for a more thorough
discussion of the directionality of path segments.)
In all cases for closed subpaths (e.g., subpaths which
end with a 'closepath'
command), the orientation of the marker corresponding to
the initial point of the subpath is calculated assuming
that:
- the path segment going into the vertex is the path
segment corresponding to the closepath
- the path segment coming out of the vertex is the
first path segment in the subpath
When a 'closepath'
command is followed by a command other than a 'moveto'
command, then the orientation of the marker corresponding
to the 'closepath'
command is calculated assuming that:
- the path segment going into the vertex is the path
segment corresponding to the closepath
- the path segment coming out of the vertex is the
first path segment of the subsequent subpath
A <angle> value represents a
particular orientation in the user space of the graphic
object referencing the marker. For example, if a value of
"0" is given, then the marker will be drawn such that its
x-axis will align with the x-axis of the user space of
the graphic object referencing the marker. If the
attribute is not specified, the effect is as if a value
of "0" were specified.
Animatable: yes
(non-additive).
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.)
- ‘marker-start’
- ‘marker-mid’
- ‘marker-end’
-
Value: |
none | <funciri> |
inherit
|
Initial: |
none |
Applies to: |
‘path’, ‘line’, ‘polyline’ and
‘polygon’ elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
- 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:
- ‘marker’
-
Value: |
see individual properties |
Initial: |
see individual properties |
Applies to: |
‘path’, ‘line’, ‘polyline’ and
‘polygon’ elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <?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. -->
<strong><g transform= "translate(2500,1250)" ></strong>
<!-- 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. -->
<strong><g transform= "rotate(45)" ></strong>
<!-- 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. -->
<strong><g transform= "scale(100)" ></strong>
<!-- 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). -->
<strong><g transform= "translate(0,-1.5)" ></strong>
<!-- 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 -->
<strong><clipPath id= "cp1" >
<rect x= "-0.5" y= "0" width= "4" height= "3" />
</clipPath></strong>
<strong><g clip-path= "url(#cp1)" ></strong>
<!-- Scale the coordinate system by the uniform scale factor
markerHeight/viewBoxHeight=3/10=.3 to set the coordinate
system to viewBox units. -->
<strong><g transform= "scale(.3)" ></strong>
<!-- 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. -->
<strong><g fill= "black" stroke= "none" ></strong>
<!-- Expand out the contents of the 'marker' element. -->
<strong><path d= "M 0 0 L 10 5 L 0 10 z" /></strong>
<strong></g></strong>
<strong></g></strong>
<strong></g></strong>
<strong></g></strong>
<strong></g></strong>
<strong></g></strong>
<strong></g></strong>
</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:
Graphics operation |
Corresponding property |
interpolating between gradient stops (see Gradient) |
‘color-interpolation’ |
interpolating color when performing color
animations with either ‘animate’ or ‘animateColor’
|
‘color-interpolation’ |
alpha
compositing of graphics elements
into the current background |
‘color-interpolation’ |
filter effects |
‘color-interpolation-filters’ |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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.)
- ‘color-interpolation’
-
Value: |
auto | sRGB | linearRGB |
inherit
|
Initial: |
sRGB |
Applies to: |
container
elements, graphics
elements, ‘animate’ and ‘animateColor’
|
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
- 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.
- ‘color-interpolation-filters’
-
Value: |
auto | sRGB | linearRGB |
inherit
|
Initial: |
linearRGB |
Applies to: |
filter
primitives |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
- 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.
- ‘color-rendering’
-
Value: |
auto | optimizeSpeed | optimizeQuality |
inherit
|
Initial: |
auto |
Applies to: |
container
elements, graphics
elements, ‘animate’ and ‘animateColor’
|
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
- 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.
- ‘shape-rendering’
-
Value: |
auto | optimizeSpeed | crispEdges |
geometricPrecision |
inherit
|
Initial: |
auto |
Applies to: |
shapes |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
- 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.
- ‘text-rendering’
-
Value: |
auto | optimizeSpeed | optimizeLegibility |
geometricPrecision |
inherit
|
Initial: |
auto |
Applies to: |
‘text’ elements |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
- 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.
- ‘image-rendering’
-
Value: |
auto | optimizeSpeed | optimizeQuality |
inherit
|
Initial: |
auto |
Applies to: |
images |
Inherited: |
yes |
Percentages: |
N/A |
Media: |
visual |
Animatable: |
yes |
- 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);
};
-
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.
-
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.
- void setUri(in DOMString uri)
-
Sets the paintType to SVG_PAINTTYPE_URI_NONE and sets uri
to the specified value.
-
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.
-
unsigned short paintType
One of the defined constants for paintType.
-
DOMString uri
The URI for the desired paint server, or null.
-
DOMString rgbColor
The specification of an sRGB color, or null.
-
DOMString iccColor
The specification of an ICC color, or null.
- SVGException, code SVG_INVALID_VALUE_ERR
- Raised if one of the
parameters has an invalid value.
11.9.2 Interface SVGMarkerElement
The SVGMarkerElement interface corresponds to the
‘marker’ element.
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);
};
-
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'.
-
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.
-
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.
- void setOrientToAuto()
-
Sets the value of attribute ‘orient’ to
'auto'.
- 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.
-
SVGAngle angle
The angle value to use for attribute ‘orient’.
- DOMException, code NO_MODIFICATION_ALLOWED_ERR
- Raised on an attempt
to change the value of a read only attribute.