Two types of paint servers. From left to right: A linear gradient. A pattern.
This section coversPaint Servers, a method which allows thefill orstroke of an object to be defined by a resource found elsewhere. It allows resources to be reused throughout a document. See the sectionPainting: Filling and Stroking for a general discussion of filling and stroking objects.
SVG defines several types of paint servers:
| SVG 2 Requirement: | Arbitrary fills for shapes. |
|---|---|
| Resolution: | SVG 2 shall support filling and stroking from arbitrary elements. |
| Purpose: | To allow for example videos or images to be used as a fill source. |
| Owner: | Alex? (no action) |
Two types of paint servers. From left to right: A linear gradient. A pattern.
Paint servers are used by including aURL reference in afill orstroke property (i.e. fill="url(#MyLightPurple)").
properties inherit into a paint-server element from its ancestors; properties donot inherit from the element referencing the paint server element.
Paint-server elements are never rendered directly; their only usage is as something that can be referenced using thefill andstroke properties. Thedisplay value for these elements must always be set tonone by theuser agent style sheet, and this declaration must have importance over any other CSS rule or presentation attribute. Paint-server elements are available for referencing even when thedisplay property on the paint-server element or any of its ancestors is set tonone.
Most paint server elements accept an‘href’ attribute, which can be used to define a compatible paint server element as a template. Attributes defined for the template element are used instead of the initial value if corresponding attributes are not specified on the current element. Furthermore, if the current element does not have any child content other thandescriptive elements, than the child content of the template element is cloned to replace it.
The exclusion of descriptive content is new in SVG 2 for‘pattern’, consistent with the behavior of gradients, and with changes to make descriptive content valid for any SVG element.
Also new: template cross-references may be to external file resources (different chapters in SVG 1.1 had inconsistent guidance on this point), and the "inheritance" of child elements is represented through a shadow tree.
Templating can be indirect to an arbitrary level(subject to security limits on external file resources,which can make a reference invalid).Thus, if the referenced template element does not have relevant child contentor does not define the specified attribute,then the attribute value or cloned content is derivedfrom another element referenced by the template's own‘href’ attribute.
The description of each‘href’ attribute in this chapter definesthe limits of the templating process, as follows:
If any of the specified attributes are not defined on the current element, or if the current element has no child elements other thandescriptive elements, the user agent mustprocess the URL to identify the referenced resource. If the URL reference is notinvalid, then the URL's target element is used as the template element, as follows:
For any of the specified attributes not defined on the current element, the user agent must determine the value of the attribute for the template element and use it as the value for the current element. The template value is derived from recursive cross-references if required. The initial value for the attribute is only substituted after all valid URL references are exhausted.
If the current element has no child elements other thandescriptive elements, the user agent must generate ashadow tree for this element, which must behave equivalently to ause-element shadow tree, except that the host is the current paint server element. Thecorresponding elements for theelement instances cloned into the shadow tree are:
When a paint-server element has a shadow tree,theelement instances in that treemust be used in rendering the paint server effect,as if they were the paint server element's own children.
Theuse-element shadow tree model for templating allows cloned content to inherit different styles than the original. This behavior is newly defined in SVG 2; SVG 1.1 did not define how styles applied to inherited paint server content.
Gradients consist of smooth color transitions between points on adrawing surface. SVG provides for three types of gradients:
Once a gradient is defined, agraphics element can befilled or stroked with the gradient by setting thefillorstroke properties to reference the gradient.
Color transitions for linear and radial gradients are defined by a series of colorstops along a gradient vector. A gradient normal defines how the colors in a vector are painted to the surface. For a linear gradient, a normal is a line perpendicular to the vector. For a radial gradient, a normal is a circle intersecting the vector at a right angle. Each gradient normal is painted with one color determined by the vector.
Linear and radial gradients with the gradient vector indicated. The vector consists of three stops shown by small circles. One gradient normal is shown for each gradient.
For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop.
$V = C0.rgba + (C1.rgba - C0.rgba) * ((D - C0.offset) / (C1.offset - C0.offset));
Where, for each channel:
When agraphics element references a gradient, conceptually thegraphics element should take a copy of the gradient vector with gradient normals and treat it as part of its own geometry. Any transformations applied to thegraphics element geometry also apply to the copied gradient vector and gradient normals. Any gradient transforms that are specified on the reference gradient are applied before anygraphics element transformations are applied to the gradient.
Linear gradients are defined by a‘linearGradient’ element.
Note that the‘x1’,‘y1’,‘x2’ and‘y2’ attributes on a‘linearGradient’ are not presentation attributes; the used value is not affected by CSS styles. The‘gradientTransform’ attribute is a presentation attribute for thetransform property.
Defines the coordinate system for attributes‘x1’,‘y1’,‘x2’ and‘y2’.
IfgradientUnits="userSpaceOnUse",‘x1’,‘y1’,‘x2’, and‘y2’ represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via afill orstroke property) and then applying the transform specified by attribute‘gradientTransform’. Percentages represent values relative to the current SVG viewport.
IfgradientUnits="objectBoundingBox", the user coordinate system for attributes‘x1’,‘y1’,‘x2’ and‘y2’ is established using the bounding box of the element to which the gradient is applied (seeObject bounding box units) and then applying the transform specified by attribute‘gradientTransform’. Percentages represent values relative to the bounding box for the object.
WhengradientUnits="objectBoundingBox" and‘gradientTransform’ is the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the gradient normal which is initially perpendicular to the gradient vector within object bounding box space may render non-perpendicular relative to the gradient vector in user space. If the gradient vector is parallel to one of the axes of the bounding box, the gradient normal will remain perpendicular. This transformation is due to application of the non-uniform scaling transformation from bounding box space to user coordinate system.
Contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e.,'userSpaceOnUse' or'objectBoundingBox').This allows for things such as skewing the gradient.This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert fromobject bounding box units to user coordinate system.
‘x1’,‘y1’,‘x2’ and‘y2’ define agradient vector for the linear gradient. Thisgradient vector provides starting and ending points onto which thegradient stops are mapped. The values of‘x1’,‘y1’,‘x2’ and‘y2’ can be either numbers or percentages.
See‘x1’.
See‘x1’.
See‘x1’.
Indicates what happens if the gradient starts or ends inside the bounds of thetarget rectangle.
Illustration of the three possible values forspreadMethod, from left to right: pad, reflect, repeat. The gradient vector spans from 40% to 60% of the bounding box width.
AURL reference to a template gradient element; to be valid, the reference must be to a different‘linearGradient’ or a‘radialGradient’ element.
Refer to the process forusing paint servers as templates, and to the common handling defined forURL reference attributes anddeprecated XLink attributes.
The specified attributes that will be copied from the template are:
If‘x1’ =‘x2’ and‘y1’ =‘y2’, then the area to be painted will be painted as asingle color using the color and opacity of the lastgradient stop.
Example lingrad01shows how to fill a rectangle by referencing a linear gradient paint server.
<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 200" > <title>Example lingrag01</title> <desc>Fill a rectangle using a linear-gradient paint server.</desc> <defs> <linearGradient> <stop offset="5%" stop-color="#A8F" /> <stop offset="95%" stop-color="#FDC" /> </linearGradient> </defs> <!-- The rectangle is filled using a linear-gradient paint server --> <rect fill="url(#MyGradient)"stroke="black"stroke-width="2"x="25" y="25" width="250" height="150"/></svg>
Example lingrad01
Radial gradients are defined by a‘radialGradient’ element.
Note that the‘cx’,‘cy’, and‘r’ attributes on a‘radialGradient’ are not presentation attributes; the used value is not affected by CSS styles. The‘gradientTransform’ attribute is a presentation attribute for thetransform property.
Defines the coordinate system for attributes‘cx’,‘cy’,‘r’,‘fx’,‘fy’, and‘fr’.
IfgradientUnits="userSpaceOnUse",‘cx’,‘cy’,‘r’,‘fx’,‘fy’, and‘fr’ represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via afill orstroke property) and then applying the transform specified by attribute‘gradientTransform’. Percentages represent values relative to the current SVG viewport.
IfgradientUnits="objectBoundingBox", the user coordinate system for attributes‘cx’,‘cy’,‘r’,‘fx’,‘fy’, and‘fr’ is established using the bounding box of the element to which the gradient is applied (seeObject bounding box units) and then applying the transform specified by attribute‘gradientTransform’. Percentages represent values relative to the bounding box for the object.
WhengradientUnits="objectBoundingBox" and‘gradientTransform’ is the identity matrix, then the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the non-uniform scaling transformation from bounding box space to user coordinate system.
Contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e.,'userSpaceOnUse' or'objectBoundingBox').This allows for things such as skewing the gradient.This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert fromobject bounding box units to user coordinate system.
‘cx’,‘cy’ and‘r’ define the end circle for the radial gradient. The gradient will be drawn such that the 100%gradient stop is mapped to the perimeter of this end circle.
See‘cx’.
See‘cx’.
A negative value is an error (seeError processing).
‘fx’,‘fy’, and‘fr’ define the startcircle for the radial gradient. The gradient will be drawn such that the 0%gradient stop is mapped to the perimeter of this start circle.
If attribute‘fx’ is not specified,‘fx’ will coincide with the presentational value of‘cx’ for the element whether the value for 'cx' was inherited or not. If the element references an element that specifies a value for 'fx', then the value of 'fx' is inherited from the referenced element.
This diagram shows how the geometric attributes are defined for the case where‘fr’ is 50% of‘r’. The small circle marks the center of the outermost circle (‘cx’,‘cy’), while the cross marks the center of the innermost circle (‘fx’,‘fy’). The dashed lines show two gradient vectors. Vectors connect corresponding points on the inner and outer most circles. The region outside the outer circle is painted with the laststop-color while the region inside the inner circle is painted with the firststop-color.
See‘fx’.
If attribute‘fy’ is not specified,‘fy’ will coincide with the presentational value of‘cy’ for the element whether the value for 'cy' was inherited or not. If the element references an element that specifies a value for 'fy', then the value of 'fy' is inherited from the referenced element.
New in SVG 2. Added to align with Canvas.
‘fr’ is the radius of the focal circle. See‘fx’.
A negative value is an error (seeError processing).
If the attribute is not specified, the effect is as if avalue of'0%' werespecified. If the element references an element thatspecifies a value for 'fr', then the value of 'fr' isinherited from the referenced element.
| SVG 2 Requirement: | Allow specifying focal circle radius in radial gradients. |
|---|---|
| Resolution: | Add an‘fr’ attribute to‘radialGradient’> for SVG 2. |
| Purpose: | To align with Canvas. The zero-offset stop would be along the circle defined by the‘fx’,‘fy’ and‘fr’ attributes. |
| Owner: | Erik (ACTION-3098) |
Indicates what happens if the gradient starts or ends inside the bounds of the object(s) being painted by the gradient. Has the same values and meanings as the‘spreadMethod’ attribute on‘linearGradient’ element.
AURL reference to a template gradient element; to be valid, the reference must be to a‘linearGradient’ element or a different‘radialGradient’ element.
Refer to the process forusing paint servers as templates, and to the common handling defined forURL reference attributes anddeprecated XLink attributes.
The specified attributes that will be copied from the template are:
Refer to the common handling defined forURL reference attributes anddeprecated XLink attributes.
| SVG 2 Requirement: | Clarify radial gradients with focal point on the circle. |
|---|---|
| Resolution: | When the focal point is on the circle edge, with repeat, then the distance between the first and last stop for the repeating colors is 0 and the paint should generate a color that is the average of all the gradient stops. |
| Purpose: | To improve interoperability of radial gradients. |
| Owner: | Erik (ACTION-3097) |
| Note: | SVG 1.1 does not define what to do when the focal point is on the circle edge, with 'repeat'. The distance between the first and last stop for the repeating colors is 0. It was resolved that the paint should generate a color that is the weighted average (by offset) of all the gradient stops. |
Changed in SVG 2. SVG 1.1 required that the focalpoint, if outside the end circle, be moved to be on the endcircle. The change was made to align with Canvas.
Allowing the focal point to lie outside the endcircle was resolved at theRigiKaltbad working group meeting.
If the start circle defined by‘fx’,‘fy’ and‘fr’ liesoutside the end circle defined by‘cx’,‘cy’, and‘r’, effectivelya cone is created, touched by the two circles. Areas outside the cone stay untouched bythe gradient (transparent black).
If the start circle fully overlaps with the end circle, nogradient is drawn. The area stays untouched (transparent black).
A radial gradient with the focal (start) circle outside the end circle. The focal circle is the smaller circle on the right. The gradient hasspreadMethod="reflect".
Two radial gradients withspreadMethod="repeat". On the left, the focal point is just inside the right side of the circle defined by‘cx’,‘cy’, and‘r’. On the right, the focal point is on the circle. In this case, the area painted to the right of the circumference has a fill equal to the weighted average of the colors in the gradient vector.
The treatment of the area to the right of the gradientin the right-hand side of the above figure is different from that ofCanvas where the area would be transparent black. The difference is tomaintain compatibility with SVG 1.1.
The color space for the weighted average is thesame as in which the gradient is interpolated. SeeRigiKaltbad working group meeting.
Example radgrad01shows how to fill a rectangle by referencing a radial gradient paintserver.
<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" > <title>Example radgrad01</title> <desc>Fill a rectangle by referencing a radial gradient paint server.</desc> <defs> <radialGradient gradientUnits="userSpaceOnUse" cx="150" cy="100" r="100"> <stop offset="0%" stop-color="#A8F" /> <stop offset="50%" stop-color="#FDC" /> <stop offset="100%" stop-color="#A8F" /> </radialGradient> </defs> <!-- The rectangle is filled using a radial gradient paint server --> <rect fill="url(#MyGradient)"stroke="black"stroke-width="2"x="25" y="25" width="250" height="150"/></svg>
Example radgrad01
The vector of colors to use in a gradient isdefined by the‘stop’ elements that are child elements to a‘linearGradient’, or‘radialGradient’element.
In SVG 1.1, the above read: "The ramp ofcolors..." but "ramp" is used nowhere else in this section.
Indicates were the gradient stop is placed. For lineargradients, the‘offset’ attribute represents a locationalong thegradient vector. For radial gradients, itrepresents a fractional distance from the edge of theinnermost/smallest circle to the edge of the outermost/largestcircle.
Thestop-color property indicates what color to use at that gradient stop. The keywordcurrentColor and ICC colors can be specified in the same manner as within a<paint> specification for thefill andstroke properties.
With respect to gradients, SVG treats the 'transparent' keyword differently than CSS. SVG does not calculate gradients in pre-multiplied space, so 'transparent' really means transparent black. Specifying astop-color with the value 'transparent' is equivalent to specifying astop-color with the value 'black' and astop-opacity with the value '0'.
Thestop-opacity property defines the opacity of a given gradient stop. The opacity value used for the gradient calculation is the product of the value ofstop-opacity and the opacity of the value ofstop-color. Forstop-color value types of that don't include explicit opacity information, the opacity of that component must be treated as 1.
If two gradient stops have the same offset value, then the latter gradient stop controls the color value at the overlap point. In particular:
<stop offset="0" stop-color="white"/><stop offset=".2" stop-color="red"/><stop offset=".2" stop-color="blue"/><stop offset="1" stop-color="black"/>
will have approximately the same effect as:
<stop offset="0" stop-color="white"/><stop offset=".1999999999" stop-color="red"/><stop offset=".2" stop-color="blue"/><stop offset="1" stop-color="black"/>
which is a gradient that goes smoothly from white to red, then abruptly shifts from red to blue, and then goes smoothly from blue to black.
A pattern is used tofill orstrokean object using a pre-defined graphic object which can be replicated("tiled") at fixed intervals inx andy to cover theareas to be painted. Patterns are defined using a‘pattern’element and then referenced by propertiesfill andstroke on a givengraphics element to indicate that thegiven element shall be filled or stroked with the pattern.
Attributes‘x’,‘y’,‘width’,‘height’and‘patternUnits’ define a reference rectangle somewhereon the infinite canvas. The reference rectangle has its top/leftat (x, y) and its bottom/right at(x + width, y + height).The tiling theoretically extends a series of such rectangles to infinity in Xand Y (positive and negative), with rectangles starting at(x + m*width, y + n*height) for each possible integer value formandn.
Note that the‘x’,‘y’,‘width’ and‘height’ attributes on a‘pattern’ are not presentation attributes; the used value is not affected by CSS styles. The‘patternTransform’ attribute is a presentation attribute for thetransform property.
Defines the coordinate system for attributes‘x’,‘y’,‘width’ and‘height’.
IfpatternUnits="userSpaceOnUse",‘x’,‘y’,‘width’ and‘height’ represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the‘pattern’ element is referenced (i.e., the user coordinate system for the element referencing the‘pattern’ element via afill orstroke property) and then applying the transform specified by attribute‘patternTransform’. Percentages represent values relative to the current SVG viewport.
IfpatternUnits="objectBoundingBox", the user coordinate system for attributes‘x’,‘y’,‘width’ and‘height’ is established using the bounding box of the element to which the pattern is applied (seeObject bounding box units) and then applying the transform specified by attribute‘patternTransform’. Percentages represent values relative to the bounding box for the object.
Defines the coordinate system for the contents of the‘pattern’. Note that this attribute has no effect ifattribute‘viewBox’ is specified.
IfpatternContentUnits="userSpaceOnUse", the user coordinate system for the contents of the‘pattern’ element is the coordinate system that results from taking the current user coordinate system in place at the time when the‘pattern’ element is referenced (i.e., the user coordinate system for the element referencing the‘pattern’ element via afill orstroke property) and then applying the transform specified by attribute‘patternTransform’.
IfpatternContentUnits="objectBoundingBox", the user coordinate system for the contents of the‘pattern’ element is established using the bounding box of the element to which the pattern is applied (seeObject bounding box units) and then applying the transform specified by attribute‘patternTransform’.
Contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system (i.e.,'userSpaceOnUse' or'objectBoundingBox').This allows for things such as skewing the pattern tiles.This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert fromobject bounding box units to user coordinate system.
‘x’,‘y’,‘width’ and‘height’ indicate how the pattern tiles are placed and spaced. These attributes represent coordinates and values in the coordinate space specified by the combination of attributes‘patternUnits’ and‘patternTransform’.
See‘x’.
See‘x’.
A negative value is an error (seeError processing). A value of zero disables rendering of the element (i.e., no paint is applied).
See‘x’.
A negative value is an error (seeError processing). A value of zero disables rendering of the element (i.e., no paint is applied).
AURL reference to a template element, which must be a different‘pattern’ element to be valid.
Refer to the process forusing paint servers as templates, and to the common handling defined forURL reference attributes anddeprecated XLink attributes.
The specified attributes that will be copied from the template are:
SVG'suser agent style sheet setstheoverflow property for‘pattern’ elements tohidden, which causes a rectangular clippingpath to be created at the bounds of the pattern tile. Unless theoverflow property is overridden, any graphics within the patternwhich goes outside of the pattern rectangle will be clipped.Example pattern01 below shows theeffect of clipping to the pattern tile.
Note that if theoverflow property is set tovisible the rendering behavior for the pattern outside the bounds of the pattern is currently undefined. A future version of SVG may require the overflow to be shown. SVG implementers are encouraged to render the overflow as this is the behavior expected by authors. If overflow is rendered, the pattern tiles should be rendered left to right in rows and the rows from top to bottom.
The contents of the‘pattern’ are relative to a new coordinatesystem. If there is a‘viewBox’ attribute, then the new coordinatesystem is fitted into the region defined by the‘x’,‘y’,‘width’,‘height’ and‘patternUnits’ attributes on the‘pattern’ element using the standard rules for‘viewBox’ and‘preserveAspectRatio’. If there is no‘viewBox’ attribute, thenthe new coordinate system has its origin at (x, y),wherex is established by the‘x’ attribute on the‘pattern’ element, andy is established by the‘y’attribute on the‘pattern’ element. Thus, in the following example:
<pattern x="10" y="10" width="20" height="20"> <rect x="5" y="5" width="10" height="10"/></pattern>
the rectangle has its top/left located 5 units to the right and 5units down from the origin of the pattern tile.
The‘viewBox’ attribute introduces a supplemental transformationwhich is applied on top of any transformations necessary to create a newpattern coordinate system due to attributes‘x’,‘y’,‘width’,‘height’ and‘patternUnits’.
Event attributes and event listeners attachedto the contents of a‘pattern’ element are not processed;only the rendering aspects of‘pattern’ elements areprocessed.
Example pattern01shows how to fill a rectangle by referencing a pattern paintserver. Note how the blue stroke of each triangle has beenslightly clipped at the top and the left. This is due to SVG'suser agent style sheet settingtheoverflow property for‘pattern’ elements tohidden, which causes the pattern to be clippedto the bounds of the pattern tile.
<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 200" > <title>Example pattern01</title> <desc>Fill an ellipse using a pattern paint server.</desc> <defs> <pattern patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50" viewBox="0 0 10 10" > <path d="M 0 0 L 7 0 L 3.5 7 z" fill="plum" stroke="blue" /> </pattern> </defs> <!-- The ellipse is filled using a triangle pattern paint server --> <ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="2" cx="150" cy="100" rx="125" ry="75" /></svg>
Example pattern01
TheSVGGradientElement interface is used as a base interfacefor gradient paint server element interfaces.
[Exposed=Window]interfaceSVGGradientElement :SVGElement { // Spread Method Types const unsigned shortSVG_SPREADMETHOD_UNKNOWN = 0; const unsigned shortSVG_SPREADMETHOD_PAD = 1; const unsigned shortSVG_SPREADMETHOD_REFLECT = 2; const unsigned shortSVG_SPREADMETHOD_REPEAT = 3; [SameObject] readonly attributeSVGAnimatedEnumerationgradientUnits; [SameObject] readonly attributeSVGAnimatedTransformListgradientTransform; [SameObject] readonly attributeSVGAnimatedEnumerationspreadMethod;};SVGGradientElement includesSVGURIReference;The numeric spread method type constants defined onSVGGradientElementare used to represent the keyword values that the‘spreadMethod’attribute can take. Their meanings are as follows:
| Constant | Meaning |
|---|---|
| SVG_SPREADMETHOD_PAD | Thepad keyword. |
| SVG_SPREADMETHOD_REFLECT | Thereflect keyword. |
| SVG_SPREADMETHOD_REPEAT | Therepeat keyword. |
| SVG_SPREADMETHOD_UNKNOWN | Some other value. |
ThegradientUnits IDL attributereflects the‘gradientUnits’ content attribute.Thenumeric type values for‘gradientUnits’attributes on gradient elements are as follows:
| Value | Numeric type value |
|---|---|
| userSpaceOnUse | SVG_UNIT_TYPE_USERSPACEONUSE |
| objectBoundingBox | SVG_UNIT_TYPE_OBJECTBOUNDINGBOX |
ThegradientTransform IDLattributereflects the computed value of thetransform propertyand the'gradientTransform' presentation attributefor‘linearGradient’ and‘radialGradient’ elements.
ThespreadMethod IDL attributereflects the‘spreadMethod’ content attribute.Thenumeric type values for‘spreadMethod’attributes on gradient elements are as described above in thenumeric spread type constant table.
AnSVGLinearGradientElement object represents an‘linearGradient’in the DOM.
[Exposed=Window]interfaceSVGLinearGradientElement :SVGGradientElement { [SameObject] readonly attributeSVGAnimatedLengthx1; [SameObject] readonly attributeSVGAnimatedLengthy1; [SameObject] readonly attributeSVGAnimatedLengthx2; [SameObject] readonly attributeSVGAnimatedLengthy2;};Thex1,y1,x2 andy2 IDL attributesreflect the‘x1’,‘y1’,‘x2’ and‘y2’content attributes, respectively
AnSVGRadialGradientElement object represents an‘radialGradient’in the DOM.
[Exposed=Window]interfaceSVGRadialGradientElement :SVGGradientElement { [SameObject] readonly attributeSVGAnimatedLengthcx; [SameObject] readonly attributeSVGAnimatedLengthcy; [SameObject] readonly attributeSVGAnimatedLengthr; [SameObject] readonly attributeSVGAnimatedLengthfx; [SameObject] readonly attributeSVGAnimatedLengthfy; [SameObject] readonly attributeSVGAnimatedLengthfr;};Thecx,cy,r,fx,fy andfr IDL attributesreflect the‘cx’,‘cy’,‘r’,‘fx’,‘fy’ and‘fr’ content attributes, respectively
AnSVGStopElement object represents a‘stop’ elementin the DOM.
[Exposed=Window]interfaceSVGStopElement :SVGElement { [SameObject] readonly attributeSVGAnimatedNumberoffset;};Theoffset IDL attributereflects the‘offset’ content attribute.
Note thatSVGStopElement does not have areflecting IDL attribute for its‘path’ attribute.
AnSVGPatternElement object represents a‘pattern’ elementin the DOM.
[Exposed=Window]interfaceSVGPatternElement :SVGElement { [SameObject] readonly attributeSVGAnimatedEnumerationpatternUnits; [SameObject] readonly attributeSVGAnimatedEnumerationpatternContentUnits; [SameObject] readonly attributeSVGAnimatedTransformListpatternTransform; [SameObject] readonly attributeSVGAnimatedLengthx; [SameObject] readonly attributeSVGAnimatedLengthy; [SameObject] readonly attributeSVGAnimatedLengthwidth; [SameObject] readonly attributeSVGAnimatedLengthheight;};SVGPatternElement includesSVGFitToViewBox;SVGPatternElement includesSVGURIReference;ThepatternUnitsandpatternContentUnitsIDL attributesreflect the‘patternUnits’ and‘patternContentUnits’ content attributes, respectively.Thenumeric type values for‘patternUnits’ and‘patternContentUnits’ are as follows:
| Value | Numeric type value |
|---|---|
| userSpaceOnUse | SVG_UNIT_TYPE_USERSPACEONUSE |
| objectBoundingBox | SVG_UNIT_TYPE_OBJECTBOUNDINGBOX |
ThepatternTransform IDLattributereflects the computed value of thetransform propertyand the‘patternTransform’ presentation attribute.
Thex,y,width andheightIDL attributesreflect the‘x’,‘y’,‘width’ and‘height’ content attributes, respectively.