Search completed in 1.13 seconds.
Animatable CSS properties - CSS: Cascading Style Sheets
the
animatable properties are: -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-line-clamp -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-size block-size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom ...
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit;
animatable: yes baseline-shift it allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.
... value: auto|baseline|super|sub|<percentage>|<length>|inherit;
animatable: yes clip deprecated it defines what portion of an element is visible.
... value: auto|<shape()>|inherit;
animatable: yes clip-path it binds the element it is applied to with a given <clippath> element.
...And 57 more matches
x - SVG: Scalable Vector Graphics
value list of <length> default value none
animatable yes feblend for <feblend>, x defines the minimum x coordinate for the rendering area of the primitive.
... value <length> | <percentage> default value 0%
animatable yes fecolormatrix for <fecolormatrix>, x defines the minimum x coordinate for the rendering area of the primitive.
... value <length> | <percentage> default value 0%
animatable yes fecomponenttransfer for <fecomponenttransfer>, x defines the minimum x coordinate for the rendering area of the primitive.
...And 34 more matches
y - SVG: Scalable Vector Graphics
value list of <length> default value none
animatable yes feblend for <feblend>, y defines the minimum y coordinate for the rendering area of the primitive.
... value <length> | <percentage> default value 0%
animatable yes fecolormatrix for <fecolormatrix>, y defines the minimum y coordinate for the rendering area of the primitive.
... value <length> | <percentage> default value 0%
animatable yes fecomponenttransfer for <fecomponenttransfer>, y defines the minimum y coordinate for the rendering area of the primitive.
...And 34 more matches
height - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 100%
animatable yes fecolormatrix for <fecolormatrix>, height defines the vertical length for the rendering area of the primitive.
... value <length> | <percentage> default value 100%
animatable yes fecomponenttransfer for <fecomponenttransfer>, height defines the vertical length for the rendering area of the primitive.
... value <length> | <percentage> default value 100%
animatable yes fecomposite for <fecomposite>, height defines the vertical length for the rendering area of the primitive.
...And 22 more matches
width - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 100%
animatable yes fecolormatrix for <fecolormatrix>, width defines the horizontal length for the rendering area of the primitive.
... value <length> | <percentage> default value 100%
animatable yes fecomponenttransfer for <fecomponenttransfer>, width defines the horizontal length for the rendering area of the primitive.
... value <length> | <percentage> default value 100%
animatable yes fecomposite for <fecomposite>, width defines the horizontal length for the rendering area of the primitive.
...And 22 more matches
xlink:href - SVG: Scalable Vector Graphics
value <iri> default value none
animatable yes altglyph for <altglyph>, xlink:href defines the reference either to a <glyph> element in an svg document fragment or to an <altglyphdef> element.
... value <iri> default value none
animatable no animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, xlink:href defines the reference to the element which is the target of this animation and which therefore will be modified over time.
... value <iri> default value none
animatable no color-profile for <color-profile>, xlink:href defines the location of an icc profile resource.
...And 15 more matches
fill - SVG: Scalable Vector Graphics
value <paint> default value black
animatable yes note: as a presentation attribute fill can be used as a css property.
... value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove
animatable no animatecolor warning: as of svg animation 2 <animatecolor> is deprecated and shouldn't be used.
... value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove
animatable no animatemotion for <animatemotion>, fill defines the final state of the animation.
...And 13 more matches
href - SVG: Scalable Vector Graphics
value <url> default value none
animatable yes animate, animatemotion, animatetransform, set for the <animate>, <animatemotion>, <animatetransform>, and <set>, href defines a url referring to the element which is the target of this animation element and which therefore will be modified over time.
... value <url> default value none
animatable no discard for <discard>, href defines a url referring the target element to discard.
... value <url> default value none
animatable no feimage for <feimage>, href defines a url referring to an image resource or to an element.
...And 11 more matches
<pattern> - SVG: Scalable Vector Graphics
value type: <length>|<percentage>; default value: 0;
animatable: yes href this attribute reference a template pattern that provides default values for the <pattern> attributes.
... value type: <url>; default value: none;
animatable: yes patterncontentunits this attribute defines the coordinate system for the contents of the <pattern>.
... value type: userspaceonuse|objectboundingbox; default value: userspaceonuse;
animatable: yes note: this attribute has no effect if a viewbox attribute is specified on the <pattern> element.
...And 8 more matches
<radialGradient> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 50%;
animatable: yes cy this attribute defines the y coordinate of the end circle of the radial gradient.
... value type: <length> ; default value: 50%;
animatable: yes fr this attribute defines the radius of the start circle of the radial gradient.
... value type: <length> ; default value: 50%;
animatable: yes fx this attribute defines the x coordinate of the start circle of the radial gradient.
...And 7 more matches
<svg> - SVG: Scalable Vector Graphics
value type: <string> ; default value: none;
animatable: no contentscripttype deprecated since svg 2 the default scripting language used by the svg fragment.
... value type: <string> ; default value: application/ecmascript;
animatable: no contentstyletype deprecated since svg 2 the default style sheet language used by the svg fragment.
... value type: <string> ; default value: text/css;
animatable: no height the displayed height of the rectangular viewport.
...And 7 more matches
<a> - SVG: Scalable Vector Graphics
value type: <string> ; default value: none;
animatable: no href the url or url fragment the hyperlink points to.
... value type: <url> ; default value: none;
animatable: yes hreflang the human language of the url or url fragment that the hyperlink points to.
... value type: <string> ; default value: none;
animatable: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background).
...And 6 more matches
<linearGradient> - SVG: Scalable Vector Graphics
et="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox;
animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system.
... value type: <transform-list> ; default value: identity transform;
animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template.
... value type: <url> ; default value: none;
animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient.
...And 6 more matches
<altGlyph> - SVG: Scalable Vector Graphics
value type: <list-of-coordinates> ; default value: absolute x-coordinate of ancestor <text> or <tspan>;
animatable: yes y this attribute defines the corresponding absolute y-coordinates for rendering the element.
... value type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>;
animatable: yes dx this attribute indicates a shift along the x-axis on the position of the element.
... value type: <list-of-coordinates> ; default value: relative x-coordinate of ancestor <text> or <tspan>;
animatable: yes dy this attribute indicates a shift along the x-axis on the position of the element.
...And 5 more matches
<marker> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 3;
animatable: yes markerunits this attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>.
... value type: userspaceonuse|strokewidth ; default value: strokewidth;
animatable: yes markerwidth this attribute defines the width of the marker viewport.
... value type: <length> ; default value: 3;
animatable: yes orient this attribute defines the orientation of the marker relative to the shape it is attached to.
...And 5 more matches
<symbol> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: auto;
animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
...; default value: xmidymid meet;
animatable: yes refx this attribute determines the x coordinate of the reference point of the symbol.
... value type: <length>|<percentage>|left|center|right ; default value: 0;
animatable: yes refy this attribute determines the y coordinate of the reference point of the symbol.
...And 5 more matches
<textPath> - SVG: Scalable Vector Graphics
value type: <url> ; default value: none;
animatable: yes lengthadjust where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves.
... value type: spacing|spacingandglyphs; default value: spacing;
animatable: yes method which method to render individual glyphs along the path.
... value type: align|stretch ; default value: align;
animatable: yes path the path on which the text should be rendered.
...And 5 more matches
dx - SVG: Scalable Vector Graphics
value list of <length> default value none
animatable yes fedropshadow for <fedropshadow>, dx defines the x offset of the droped shadow.
... value <number> default value 2
animatable yes feoffset for <feoffset>, dx defines the x offset of the filter input graphic.
... value <number> default value 0
animatable yes glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used.
...And 4 more matches
dy - SVG: Scalable Vector Graphics
value list of <length> default value none
animatable yes fedropshadow for <fedropshadow>, dy defines the y offset of the dropped shadow.
... value <number> default value 2
animatable yes feoffset for <feoffset>, dy defines the y offset of the filter input graphic.
... value <number> default value 0
animatable yes glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used.
...And 4 more matches
pathLength - SVG: Scalable Vector Graphics
value <number> default value none
animatable yes ellipse for <ellipse>, pathlength lets authors specify a total length for the ellipse, in user units.
... value <number> default value none
animatable yes line for <line>, pathlength lets authors specify a total length for the line, in user units.
... value <number> default value none
animatable yes path for <path>, pathlength lets authors specify a total length for the path, in user units.
...And 4 more matches
preserveAspectRatio - SVG: Scalable Vector Graphics
default value xmidymid meet
animatable yes image for <image>, preserveaspectratio defines how the referenced image should fit in the rectangle define by the <image> element.
... default value xmidymid meet
animatable yes marker for <marker>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport.
... default value xmidymid meet
animatable yes pattern for <pattern>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport.
...And 4 more matches
<rect> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0;
animatable: yes y the y coordinate of the rect.
... value type: <length>|<percentage> ; default value: 0;
animatable: yes width the width of the rect.
... value type: auto|<length>|<percentage> ; default value: auto;
animatable: yes height the height of the rect.
...And 4 more matches
<text> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0;
animatable: yes y the y coordinate of the starting point of the text baseline.
... value type: <length>|<percentage> ; default value: 0;
animatable: yes dx shifts the text position horizontally from a previous text element.
... value type: <length>|<percentage> ; default value: none;
animatable: yes dy shifts the text position vertically from a previous text element.
...And 4 more matches
<tspan> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none;
animatable: yes y the y coordinate of the starting point of the text baseline.
... value type: <length>|<percentage> ; default value: none;
animatable: yes dx shifts the text position horizontally from a previous text element.
... value type: <length>|<percentage> ; default value: none;
animatable: yes dy shifts the text position vertically from a previous text element.
...And 4 more matches
SVG Core Attributes - SVG: Scalable Vector Graphics
value: any valid id string;
animatable: no lang participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in.
... value: any valid language id;
animatable: no tabindex the tabindex svg attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
... value type: <integer>;
animatable: no xml:base specifies a base iri other than the base iri of the document.
...And 3 more matches
<mask> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 120%;
animatable: yes maskcontentunits this attribute defines the coordinate system for the contents of the <mask>.
... value type: userspaceonuse|objectboundingbox ; default value: userspaceonuse;
animatable: yes maskunits this attribute defines defines the coordinate system for attributes x, y, width and height on the <mask>.
... value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox;
animatable: yes x this attribute defines the x-axis coordinate of the top-left corner of the masking area.
...And 3 more matches
<use> - SVG: Scalable Vector Graphics
value type: <url> ; default value: none;
animatable: yes xlink:href an <iri> reference to an element/fragment that needs to be duplicated.
... value type: <iri> ; default value: none;
animatable: yes x the x coordinate of the use element.
... value type: <coordinate> ; default value: 0;
animatable: yes y the y coordinate of the use element.
...And 3 more matches
viewBox - SVG: Scalable Vector Graphics
value <number>?, <number>?, <number>?, <number> default value none
animatable yes pattern for <pattern>, viewbox defines the position and dimension for the content of the pattern tile.
... value <number>?, <number>?, <number>?, <number> default value none
animatable yes svg for <svg>, viewbox defines the position and dimension for the content of the <svg> element.
... value <number>?, <number>?, <number>?, <number> default value none
animatable yes symbol for <symbol>, viewbox defines the position and dimension for the content of the <symbol> element.
...And 2 more matches
<ellipse> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0;
animatable: yes cy the y position of the ellipse.
... value type: <length>|<percentage> ; default value: 0;
animatable: yes rx the radius of the ellipse on the x axis.
... value type: auto|<length>|<percentage> ; default value: auto;
animatable: yes ry the radius of the ellipse on the y axis.
...And 2 more matches
<line> - SVG: Scalable Vector Graphics
value type: <length>|<percentage>|<number> ; default value: 0;
animatable: yes x2 defines the x-axis coordinate of the line ending point.
... value type: <length>|<percentage>|<number> ; default value: 0;
animatable: yes y1 defines the y-axis coordinate of the line starting point.
... value type: <length>|<percentage>|<number> ; default value: 0;
animatable: yes y2 defines the y-axis coordinate of the line ending point.
...And 2 more matches
SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
value: false|true;
animatable: no requiredextensions list all the browser specific capabilities that must be supported by the borwser to be allowed to render the associated element.
... value: a list of space-separated uri;
animatable: no requiredfeatures deprecated since svg 2 list all the features, as defined is the svg 1.1 specification, that must be supported by the borwser to be allowed to render the associated element..
... value: a list of space-separated uri;
animatable: no systemlanguage indicates which language the user must have chosen to render the associated element.
... value: a list of comma-separated language id;
animatable: no ...
<circle> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0;
animatable: yes cy the y-axis coordinate of the center of the circle.
... value type: <length>|<percentage> ; default value: 0;
animatable: yes r the radius of the circle.
... value type: <length> ; default value: 0;
animatable: yes pathlength the total length for the circle's circumference, in user units.
... value type: <number> ; default value: none;
animatable: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that element.
<foreignObject> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: auto;
animatable: yes width the width of the foreignobject.
... value type: <length>|<percentage> ; default value: auto;
animatable: yes x the x coordinate of the foreignobject.
... value type: <length>|<percentage> ; default value: 0;
animatable: yes y the y coordinate of the foreignobject.
... value type: <length>|<percentage> ; default value: 0;
animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element.
<script> - SVG: Scalable Vector Graphics
value type: <string>; default value: ?;
animatable: yes href the url to the script to load.
... value type: <url> ; default value: none;
animatable: no type this attribute defines type of the script language to use.
... value type: <string>; default value: application/ecmascript;
animatable: no xlink:href deprecated since svg 2 the url to the script to load.
... value type: <url> ; default value: none;
animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<script>' in that specification.
cx - SVG: Scalable Vector Graphics
value <length-percentage> default value 0
animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for circles.
... value <length-percentage> default value 0
animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses.
... value <length> default value 50%
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cx="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="100%" id="mygradient100"> <stop ...
cy - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0
animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for circles.
... value <length> | <percentage> default value 0
animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses.
... value <length> default value 50%
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cy="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="100%" id="mygradient100"> <stop ...
d - SVG: Scalable Vector Graphics
value <string> default value none
animatable yes glyph warning: as of svg2 <glyph> is deprecated and shouldn't be used.
... value <string> default value none
animatable yes note: the point of origin (the coordinate 0,0) is usually the upper left corner of the context.
... value <string> default value none
animatable yes path commands path commands are instructions that define a path to be drawn.
in2 - SVG: Scalable Vector Graphics
value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive
animatable yes fecomposite for <fecomposite>, in2 defines the second input image to the compositing operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive
animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive
animatable yes specifications specification status comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification.
kernelUnitLength - SVG: Scalable Vector Graphics
value <number-optional-number> default value pixel in offscreen bitmap
animatable yes <number-optional-number> the first number is the x value.
... value <number-optional-number> default value pixel in offscreen bitmap
animatable yes fespecularlighting for the <fespecularlighting>, kernelunitlength indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveunits) for the x and y coordinate, respectively, in the surface normal calculation formulas.
... value <number-optional-number> default value pixel in offscreen bitmap
animatable yes specifications specification status comment filter effects module level 1the definition of 'kernelunitlength for <fespecularlighting>' in that specification.
<animateMotion> - SVG: Scalable Vector Graphics
value type: <number>*; default value: none;
animatable: no path this attribute defines the path of the motion, using the same syntax as the d attribute.
... value type: <string>; default value: none;
animatable: no rotate this attribute defines a rotation applied to the elment animated along a path, usually to make it pointing in the direction of the animation.
... value type: <number>|auto|auto-reverse; default value: 0;
animatable: no note: for <animatemotion> the default value for the calcmode attribute is paced animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes this element implements the svganimatemotionelement interface.
<feDropShadow> - SVG: Scalable Vector Graphics
value type: <number>; default value: 2;
animatable: yes dy this attribute defines the y offset of the drop shadow.
... value type: <number>; default value: 2;
animatable: yes stddeviation this attribute defines the standard deviation for the blur operation in the drop shadow.
... value type: <number>; default value: 2;
animatable: yes global attributes core attributes most notably: id styling attributes class, style filter primitive attributes height, in, result, x, y, width presentation attributes most notably: flood-color, flood-opacity usage notes categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <script>, <set> specifications specification status comment filter effects module level 1the definition of '<fedropshadow>' in that specification.
<stop> - SVG: Scalable Vector Graphics
value type: <number>|<percentage>; default value: 0;
animatable: yes stop-color this attribute defines the color of the gradient stop.
... value type: currentcolor|<color>|<icccolor>; default value: black;
animatable: yes stop-opacity this attribute defines the opacity of the gradient stop.
... value type: <opacity>; default value: 1;
animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: color, display, stop-color, stop-opacity, visibility usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> specifications specification status comment scalable vector graphics (svg) 2the definition of '<stop>' in that specification.
<style> - SVG: Scalable Vector Graphics
value type: <string>; default value: text/css;
animatable: no media this attribute defines to which media the style applies.
... value type: <string>; default value: all;
animatable: no title this attribute the title of the style sheet which can be used to switch between alternate style sheets.
... value type: <string>; default value: none;
animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<style>' in that specification.
Element.getAnimations() - Web APIs
the getanimations() method of the element interface (specified on the
animatable mixin) returns an array of all animation objects affecting this element or which are scheduled to do so in future.
... promise.all( elem.getanimations({ subtree: true }) .map(animation => animation.finished) ).then(() => elem.remove()); specifications specification status comment web animationsthe definition of '
animatable.getanimations()' in that specification.
Element - Web APIs
it implements the properties of parentnode, childnode, nondocumenttypechildnode, and
animatable.
... methods inherits methods from its parents node, and its own parent, eventtarget, and implements those of parentnode, childnode, nondocumenttypechildnode, and
animatable.
Index - Web APIs
1111 element.getanimations() api,
animatable, css, css animations, css transitions, element, experimental, method, reference, transitions, web animations, getanimations, waapi, web animations api the getanimations() method of the element interface (specified on the
animatable mixin) returns an array of all animation objects affecting this element or which are scheduled to do so in future.
... 2231 keyframeeffect api, animation, animations, experimental, interface, keyframeeffect, reference, web animations, web animations api the keyframeeffect interface of the web animations api lets us create sets of
animatable properties and values, called keyframes.
KeyframeEffect.setKeyframes() - Web APIs
attributes keyframes may specify property-value pairs for any of the
animatable css properties.
...it's just for reference here, this will have no effect on animation since "float" is not an
animatable css property.
Keyframe Formats - Web APIs
attributes keyframes may specify property-value pairs for any of the
animatable css properties.
...it's just for reference here, this will have no effect on animation since "float" is not an
animatable css property.
attributeType - SVG: Scalable Vector Graphics
imatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto
animatable no css this value specifies that the value of attributename is the name of a css property defined as
animatable.
... xml this value specifies that the value of attributename is the name of an xml attribute defined as
animatable in the default xml namespace for the target element.
begin - SVG: Scalable Vector Graphics
value <begin-value-list> default value 0s
animatable no the <begin-value-list> is a semicolon-separated list of values.
... value <begin-value-list> default value 0s
animatable no the definition of <begin-value-list> is the same as for the other animation elements.
edgeMode - SVG: Scalable Vector Graphics
value duplicate | wrap | none default value duplicate
animatable yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
... value duplicate | wrap | none default value none
animatable yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
gradientUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value objectboundingbox
animatable yes userspaceonuse this value indicates that the attributes 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 a fill or stroke property) and then applying the transform specified by attr...
... value userspaceonuse | objectboundingbox default value objectboundingbox
animatable yes 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 a fill or stroke property) and then applying the transform specified by attribute gradientt...
horiz-adv-x - SVG: Scalable Vector Graphics
value <number> default value none
animatable no <number> this value indicates the horizontal advance of the glyph.
... value <number> default value <font>ʼs horiz-adv-x value
animatable no <number> this value indicates the horizontal advance of the glyph.
name - SVG: Scalable Vector Graphics
value <name> default value none
animatable yes <name> this value is the name which is used as the first parameter for icc color specifications within fill, stroke, stop-color, flood-color and lighting-color property values to identify the color profile to use for the icc color specification and the name which can be the value of the color-profile property.
... value <name> default value none
animatable yes <name> this value specifies the name of a local font.
operator - SVG: Scalable Vector Graphics
value over | in | out | atop | xor | lighter | arithmetic default value over
animatable yes over this value indicates that the source graphic defined in the in attribute is placed over the destination graphic defined in the in2 attribute.
... value erode | dilate default value erode
animatable yes erode this value thins the source graphic defined in the in attribute.
path - SVG: Scalable Vector Graphics
value <path-data> default value none
animatable no <path-data> this value defines the motion path along which the referenced element is animated.
... value <path-data> default value path specified in href
animatable yes <path-data> this value defines the text path along which the glyphs of the <text> element are aligned.
points - SVG: Scalable Vector Graphics
value [ <number>+ ]# default value none
animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
... value [ <number>+ ]# default value none
animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
r - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0
animatable yes note: starting with svg2, r is a geometry property meaning this attribute can also be used as a css property for circles.
... value <length> | <percentage> default value 50%
animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'r' in that specification.
refX - SVG: Scalable Vector Graphics
value <length-percentage> | <number> | left | center | right default value 0
animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... value <length> | left | center | right default value none
animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
refY - SVG: Scalable Vector Graphics
value <length-percentage> | <number> | top | center | bottom default value 0
animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... value <length> | top | center | bottom default value none
animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
rx - SVG: Scalable Vector Graphics
value <length> | <percentage> | auto default value auto
animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for ellipses.
... value <length> | <percentage> | auto default value auto
animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for rects.
ry - SVG: Scalable Vector Graphics
value <length> | <percentage> | auto default value auto
animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for ellipses.
... value <length> | <percentage> | auto default value auto
animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for rects.
specularExponent - SVG: Scalable Vector Graphics
value <number> default value 1
animatable yes fespotlight for <fespotlight>, specularexponent defines the exponent value controlling the focus for the light source.
... value <number> default value 1
animatable yes specifications specification status comment filter effects module level 1the definition of 'specularexponent for <fespecularlighting>' in that specification.
surfaceScale - SVG: Scalable Vector Graphics
value <number> default value 1
animatable yes fediffuselighting for <fediffuselighting>, surfacescale defines the height of the surface.
... value <number> default value 1
animatable yes specifications specification status comment filter effects module level 1the definition of 'surfacescale for <fediffuselighting>' in that specification.
to - SVG: Scalable Vector Graphics
value <value> default value none
animatable no the exact value type for this attribute depend on the value of the attribute that will be animated.
... value <value> default value none
animatable no the exact value type for this attribute depend on the value of the attribute that will be animated.
type - SVG: Scalable Vector Graphics
usage context for the <animatetransform> elements categories none value translate | scale | rotate | skewx | skewy
animatable no normative document svg 1.1 (2nd edition) for the <fecolormatrix> element categories none value matrix | saturate | huerotate | luminancetoalpha
animatable yes normative document svg 1.1 (2nd edition) for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements categories none value identit...
...y | table | discrete | linear | gamma
animatable yes normative document svg 1.1 (2nd edition) for the <feturbulence> element categories none value fractalnoise | turbulence
animatable yes normative document svg 1.1 (2nd edition) for the <style> and <script> elements categories none value <content-type>
animatable no normative document svg 1.1 (2nd edition) : script svg 1.1 (2nd edition) : style example elements the following elements can use the values attribute <animatetransform> <fecolormatrix> <fefunca> <fefuncb> <fefuncg> <fefuncr> <feturbulence> <script> <style> ...
values - SVG: Scalable Vector Graphics
value <list-of-values> default value none
animatable no <list-of-values> the value holds a semicolon-separated list of one or more values.
... value <list-of-numbers> default value if type="matrix", identity matrix, if type="saturate", 1, resulting in identity matrix, if type="huerotate", 0, resulting in identity matrix
animatable yes <list-of-numbers> the value is a list of numbers, which is interpreted differently depending on the value of the type attribute: for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ...
vert-adv-y - SVG: Scalable Vector Graphics
value <number> default value 1 em as of units-per-em
animatable no <number> this value indicates the default vertical advance of the glyph in vertical direction glyph, missing-glyph for <glyph> and <missing-glyph> elements, vert-adv-y specifies the vertical advance for a glyph in vertical orientation.
... value <number> default value <font>ʼs vert-adv-y value
animatable no <number> this value indicates the vertical advance of the glyph in vertical direction specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'vert-adv-y for <glyph> and <missing-glyph>' in that specification.
x1 - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vecto...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0%
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop o...
x2 - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector ...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100%
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop ...
y1 - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0%
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to.
y2 - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector u...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0%
animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to.
z - SVG: Scalable Vector Graphics
value <number> default value 1
animatable yes fespotlight for <fespotlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element.
... value <number> default value 1
animatable yes specifications specification status comment filter effects module level 1the definition of 'z for <fepointlight>' in that specification.
<path> - SVG: Scalable Vector Graphics
value type: <string> ; default value: '';
animatable: yes pathlength this attribute lets authors specify the total length for the path, in user units.
... value type: <number> ; default value: none;
animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, ari...
<polygon> - SVG: Scalable Vector Graphics
value type: <number>+ ; default value: "";
animatable: yes pathlength this attribute lets specify the total length for the path, in user units.
... value type: <number> ; default value: none;
animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, ari...
<polyline> - SVG: Scalable Vector Graphics
--> <polyline points="0,100 50,25 50,75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; default value: "";
animatable: yes pathlength this attribute lets specify the total length for the path, in user units.
... value type: <number> ; default value: none;
animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, ari...
KeyframeEffect - Web APIs
the keyframeeffect interface of the web animations api lets us create sets of
animatable properties and values, called keyframes.
SVGAngle - Web APIs
every svgangle object operates in one of two modes: reflect the base value of a reflected
animatable attribute (being exposed through the baseval member of an svganimatedangle), be detached, which is the case for svgangle objects created with svgsvgelement.createsvgangle().
The 'X' property - Web APIs
usage context name x value <length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual computed value absolute length or percentage
animatable yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
animation - CSS: Cascading Style Sheets
h(function (node, index) { node.addeventlistener('animationstart', function () { togglebutton(button[index], 'pause'); }); node.addeventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are
animatable is available; it's worth noting that this description is also valid for css transitions.
accent-height - SVG: Scalable Vector Graphics
value <number> default value value of ascent
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'accent-height' in that specification.
accumulate - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value none | sum default value none
animatable no sum specifies that each repeat iteration after the first builds upon the last value of the previous iteration.
additive - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value replace | sum default value replace
animatable no sum specifies that the animation will add to the underlying value of the attribute and other lower priority animations.
alignment-baseline - SVG: Scalable Vector Graphics
sentation attribute, it can be applied to any element but it has effect only on the following four elements: <tspan>, <tref>, <altglyph>, and <textpath> usage notes value auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom default value auto
animatable yes auto the value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent.
alphabetic - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value 0
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'alphabetic' in that specification.
amplitude - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> usage notes value <number> default value 1
animatable yes specifications specification status comment filter effects module level 1the definition of 'amplitude' in that specification.
arabic-form - SVG: Scalable Vector Graphics
only one element is using this attribute: <glyph> context notes value initial | medial | terminal | isolated default value isolated
animatable no initial this value indicates that the glyph represents the initial form.
ascent - SVG: Scalable Vector Graphics
value <number> default value difference between units-per-em and vert-origin-y
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'ascent' in that specification.
attributeName - SVG: Scalable Vector Graphics
olor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none
animatable no <name> this value indicates the name of the css property or attribute of the target element to be animated.
azimuth - SVG: Scalable Vector Graphics
<filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'azimuth' in that specification.
baseFrequency - SVG: Scalable Vector Graphics
er id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.05" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 0
animatable yes <number-optional-number> if two numbers are provided, the first one represents the base frequency in the horizontal direction and the second one the base frequency in the vertical direction.
baseProfile - SVG: Scalable Vector Graphics
only one element is using this attribute: <svg> context notes value profile name default value none
animatable no example <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg" baseprofile="full"> ...
baseline-shift - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <tref>, and <tspan> usage notes value <length-percentage> | sub | super default value 0
animatable yes sub the dominant-baseline is shifted to the default position for subscripts.
bbox - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <string> default value none
animatable no <string> a comma-separated list of exactly four numbers specifying, in order, the lower left x, lower left y, upper right x, and upper right y of the bounding box for the complete font.
bias - SVG: Scalable Vector Graphics
usage notes value <number> default value 0
animatable yes one application of bias is when it is desirable to have 0.5 gray value be the zero response of the filter.
by - SVG: Scalable Vector Graphics
attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributename="width" fill="freeze" by="50" dur="3s"/> </rect> </svg> usage notes value see below default value none
animatable no the exact value type for this attribute depends on the value of the attribute that will be animated.
calcMode - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value discrete | linear | paced | spline default value linear
animatable no discrete this specifies that the animation function will jump from one value to the next without any interpolation.
cap-height - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'cap-height' in that specification.
class - SVG: Scalable Vector Graphics
usage context categories none value <list-of-class-names>
animatable yes normative document svg 1.1 (2nd edition): the class attribute list-of-ts <list-of-ts> (where t is some type.) a list consists of a separated sequence of values.
clip-path - SVG: Scalable Vector Graphics
this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-shape> || <geometry-box> ] | none default value none
animatable yes <geometry-box> an extra information to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box.
clip-rule - SVG: Scalable Vector Graphics
/> </g> as a presentation attribute, it also can be used as a property directly inside a css stylesheet usage context categories presentation attribute value nonzero | evenodd | inherit
animatable yes normative document svg 1.1 (2nd edition) nonzero see description of fill-rule property.
clip - SVG: Scalable Vector Graphics
value auto | rect() default value auto
animatable yes the value auto defines a clipping path along the bounds of the viewport created by the given element.the value rect() defines a clipping rectangle following the following syntax: rect(<top>, <right>, <bottom>, <left>).
clipPathUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value userspaceonuse
animatable yes userspaceonuse this value indicates that all coordinates inside the <clippath> element refer to the user coordinate system as defined when the clipping path was created.
color-interpolation-filters - SVG: Scalable Vector Graphics
een elements: <fespotlight>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> usage notes value auto | srgb | linearrgb default value linearrgb
animatable yes auto indicates that the user agent can choose either the srgb or linearrgb spaces for color interpolation.
color-interpolation - SVG: Scalable Vector Graphics
<animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> usage notes value auto | srgb | linearrgb default value srgb
animatable yes auto indicates that the user agent can choose either the srgb or linearrgb spaces for color interpolation.
color-profile - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following element: <image> usage notes value auto | srgb | <name> | <iri> default value auto
animatable yes auto all colors are presumed to be defined in the srgb color space unless a more precise embedded profile is specified within content data.
color-rendering - SVG: Scalable Vector Graphics
%" color-rendering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-rendering="optimizespeed" fill="url(#gradient)" style="transform: translatex(240px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto
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.
color - SVG: Scalable Vector Graphics
usage notes value <color> | inherit default value depends on user agent
animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g color="green"> <rect width="50" height="50" fill="currentcolor" /> <circle r="25" cx="70" cy="70" stroke="currentcolor" fill="none" stroke-width="5" /> </g> </svg> specifications specification status comment scalable vector gr...
contentScriptType - SVG: Scalable Vector Graphics
usage notes value one of the content types specified in the media types default value application/ecmascript
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'contentscripttype' in that specification.
contentStyleType - SVG: Scalable Vector Graphics
usage notes value one of the content types specified in the media types default value text/css
animatable no since css is the only widely deployed style sheet language for online styling and it's already defined as default value if contentstyletype is ommitted, the attribute is not well supported in user agents.
cursor - SVG: Scalable Vector Graphics
usage context categories presentation attribute value [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit
animatable yes normative document svg 1.1 (2nd edition) <funciri> functional notation for a reference.
descent - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value value of vert-origin-y
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'descent' in that specification.
diffuseConstant - SVG: Scalable Vector Graphics
c" diffuseconstant="2"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1
animatable yes specifications specification status comment filter effects module level 1the definition of 'diffuseconstant' in that specification.
direction - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr
animatable yes specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification.
display - SVG: Scalable Vector Graphics
&& list-item<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid
animatable yes for a description of the values, please refer to the css display property.
divisor - SVG: Scalable Vector Graphics
color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <number> default value sum of all values in kernelmatrix or 1 if sum is 0
animatable yes <number> this value defines the divisor.
dominant-baseline - SVG: Scalable Vector Graphics
roke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top default value auto
animatable yes auto if this property occurs on a <text> element, then the computed value depends on the value of the writing-mode attribute.
dur - SVG: Scalable Vector Graphics
tributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite
animatable no <clock-value> this value specifies the length of the simple duration.
elevation - SVG: Scalable Vector Graphics
<filter id="distantlight2"> <fediffuselighting> <fedistantlight elevation="45" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'elevation' in that specification.
enable-background - SVG: Scalable Vector Graphics
default value accumulate
animatable no accumulate if an ancestor container element has a property value of enable-background: new, then all graphics elements within the current container element are rendered both onto the parent container elementʼs background image canvas and onto the target device.
end - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> usage notes default value none value <end-value-list>
animatable no the <end-value-list> is a semicolon-separated list of values.
exponent - SVG: Scalable Vector Graphics
"5"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1
animatable yes <number> if the type attribute of the component element is set to gamma, this value specifies the exponent of the gamma function specifications specification status comment filter effects module level 1the definition of 'exponent' in that specification.
fill-opacity - SVG: Scalable Vector Graphics
umber --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a css property --> <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" /> </svg> usage notes value [0-1] | <percentage> default value 1
animatable yes note: svg2 introduces percentage values for fill-opacity, however, it is not widely supported yet (see browser compatibility below) as a consequence, it is best practices to set opacity with a value in the range [0-1].
fill-rule - SVG: Scalable Vector Graphics
--> <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/> </svg> usage notes value nonzero | evenodd default value nonzero
animatable yes the fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined: nonzero the value nonzero determines the "insideness" of a point in the shape 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.
filter - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="10" y="10" width="80" height="80" filter="url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none
animatable yes for a description of the values see the css filter property.
filterRes - SVG: Scalable Vector Graphics
only one element is using this attribute: <filter> usage notes value <number-optional-number> default value none
animatable yes <number-optional-number> this value takes one or two values, the first one outlining the resolution in horizontal direction, the second one in vertical direction.
filterUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <filter> usage notes value userspaceonuse | objectboundingbox default value objectboundingbox
animatable yes userspaceonuse x, y, width and height represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the <filter> element is referenced (i.e., the user coordinate system for the element referencing the <filter> element via a filter attribute).
flood-color - SVG: Scalable Vector Graphics
> </filter> <filter id="flood2"> <feflood flood-color="seagreen" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </svg> usage notes value color initial value black
animatable yes specifications specification status comment filter effects module level 1the definition of 'flood-color' in that specification.
flood-opacity - SVG: Scalable Vector Graphics
id="flood2"> <feflood flood-color="seagreen" flood-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </svg> usage notes value <alpha-value> initial value 1
animatable yes <alpha-value> a number or percentage indicating the opacity value to use across the current filter primitive subregion.
font-family - SVG: Scalable Vector Graphics
svg"> <text y="20" font-family="arial, helvetica, sans-serif">sans serif</text> <text x="100" y="20" font-family="monospace">monospace</text> </svg> usage notes value [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace default value depends on user agent
animatable yes for a description of the values, please refer to the css font-family property.
font-size - SVG: Scalable Vector Graphics
nts: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium
animatable yes for a description of the values, please refer to the css font-size property.
font-stretch - SVG: Scalable Vector Graphics
to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> usage notes value <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> default value normal
animatable yes specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-style - SVG: Scalable Vector Graphics
ments: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal
animatable yes for a description of the values, please refer to the css font-style property.
font-variant - SVG: Scalable Vector Graphics
me> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ] default value normal
animatable yes for a description of the values, please refer to the css font-variant property.
font-weight - SVG: Scalable Vector Graphics
s: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-weight="normal">normal text</text> <text x="100" y="20" font-weight="bold">bold text</text> </svg> usage notes value normal | bold | bolder | lighter | <number> default value normal
animatable yes for a description of the values, please refer to the css font-weight property.
format - SVG: Scalable Vector Graphics
two elements are using this attribute: <altglyph> and <glyphref> context notes value <string> default value none
animatable no <string> this value specifies the format of the given font.
fr - SVG: Scalable Vector Graphics
="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0
animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="1...
from - SVG: Scalable Vector Graphics
attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100"> <animate attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> usage notes value see below default value none
animatable no the exact value type for this attribute depends on the value of the attribute that will be animated.
fx - SVG: Scalable Vector Graphics
animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="1...
fy - SVG: Scalable Vector Graphics
animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="1...
g1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <hkern> and <vkern> context notes value <name># default value none
animatable no <name># this value indicates a comma-separated sequence of glyph names (i.e., values that match glyph-name attributes on <glyph> elements) which identify a set of possible first glyphs in the kerning pair.
g2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <hkern> and <vkern> context notes value <name># default value none
animatable no <name># this value indicates a comma-separated sequence of glyph names (i.e., values that match glyph-name attributes on <glyph> elements) which identify a set of possible second glyphs in the kerning pair.
glyph-name - SVG: Scalable Vector Graphics
only one element is using this attribute: <glyph> context notes value <name># default value none
animatable no <name># this value specifies a comma-separated list of names for the glyph.
glyph-orientation-horizontal - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value <angle> default value 0deg
animatable no <angle> the value of the angle is restricted to 0, 90, 180, and 270 degrees.
glyph-orientation-vertical - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value auto | <angle> default value auto
animatable no auto fullwidth ideographic and fullwidth latin text will be set with a glyph orientation of 0 degrees.
glyphRef - SVG: Scalable Vector Graphics
two elements are using this attribute: <altglyph> and <glyphref> usage notes value <string> default value none
animatable yes <string> this value represents the glyph identifier.
gradientTransform - SVG: Scalable Vector Graphics
offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default value identity transform value <transform-list>
animatable yes <transform-list> a list of transformation functions specifying some additional transformation from the gradient coordinate system onto the target coordinate system.
hanging - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the alignment coordinate for the glyphs.
horiz-origin-x - SVG: Scalable Vector Graphics
only one element is using this attribute: <font> usage notes value <number> default value 0
animatable no <number> this value indicates the x-coordinate of the origin of a glyph for horizontally oriented text.
horiz-origin-y - SVG: Scalable Vector Graphics
only one element is using this attribute: <font> usage notes value <number> default value 0
animatable no <number> this value indicates the x-coordinate of the origin of a glyph for horizontally oriented text.
id - SVG: Scalable Vector Graphics
<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![cdata[ #smallrect { stroke: #000066; fill: #00cc00; } ]]> </style> <rect id="smallrect" x="10" y="10" width="100" height="100" /> </svg> usage notes value <id> default value none
animatable no <id> specifies the element's id.
ideographic - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the alignment coordinate for the glyphs.
image-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following element: <image> usage notes value auto | optimizespeed | optimizequality default value auto
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.
in - SVG: Scalable Vector Graphics
splacementmap>, <fedropshadow>, <fegaussianblur>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile> usage notes value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive
animatable yes sourcegraphic this keyword represents the graphics elements that were the original input into the <filter> element.
intercept - SVG: Scalable Vector Graphics
.8"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'intercept' in that specification.
k - SVG: Scalable Vector Graphics
two elements are using this attribute: <hkern> and <vkern> context notes value <number> default value none
animatable no <number> this value indicates the amount for decreasing the spacing between the two glyphs in the kerning pair.
k1 - SVG: Scalable Vector Graphics
href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'k1' in that specification.
k2 - SVG: Scalable Vector Graphics
href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'k2' in that specification.
k3 - SVG: Scalable Vector Graphics
href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'k3' in that specification.
k4 - SVG: Scalable Vector Graphics
href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'k4' in that specification.
kernelMatrix - SVG: Scalable Vector Graphics
mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none
animatable yes <list of numbers> the list of <number>s that make up the kernel matrix for the convolution.
kerning - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; font: 36px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 150 125" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="70" kerning="0">number</text> <text x="10" y="110" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto
animatable yes auto this value indicates that the spacing between glyphs is adjusted based on kerning tables that are included in the font that will be used.
lang - SVG: Scalable Vector Graphics
<svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none
animatable no <language-tag> this value specifies the language used for the element.
lengthAdjust - SVG: Scalable Vector Graphics
</text> </g> </svg> usage notes value spacing | spacingandglyphs default value spacing
animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'lengthadjust' in that specification.
letter-spacing - SVG: Scalable Vector Graphics
nts: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.5">smaller letter-spacing</text> </svg> usage notes value normal | <length> default value normal
animatable yes for a description of the values, please refer to the css letter-spacing property.
lighting-color - SVG: Scalable Vector Graphics
lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value color default value white
animatable yes specifications specification status comment filter effects module level 1the definition of 'lighting-color' in that specification.
limitingConeAngle - SVG: Scalable Vector Graphics
x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="40" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'limitingconeangle' in that specification.
local - SVG: Scalable Vector Graphics
only one element is using this attribute: <color-profile> usage notes value <string> default value none
animatable no <string> this value specifies the unique id for a locally stored color profile as specified by international color consortium.
marker-end - SVG: Scalable Vector Graphics
="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-end="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none
animatable yes none indicates that no marker symbol shall be drawn at the final vertex.
marker-mid - SVG: Scalable Vector Graphics
.org/2000/svg"> <defs> <marker id="circle" markerwidth="8" markerheight="8" refx="4" refy="4"> <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-mid="url(#circle)"/> </svg> usage notes value none | <marker-ref> default value none
animatable yes none indicates that no marker symbol shall be drawn at the given vertices.
marker-start - SVG: Scalable Vector Graphics
5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-start="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none
animatable yes none indicates that no marker symbol shall be drawn at the first vertex.
markerHeight - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3
animatable yes <length-percentage> this value defines either an absolute or a relative height of the marker.
markerUnits - SVG: Scalable Vector Graphics
usage notes value userspaceonuse | strokewidth default value strokewidth
animatable yes userspaceonuse this value specifies that the markerwidth and markerunits attributes and the contents of the <marker> element 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).
markerWidth - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3
animatable yes <length-percentage> this value defines either an absolute or a relative width of the marker.
mask - SVG: Scalable Vector Graphics
s a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> usage notes value see the css property mask default value none
animatable yes specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
maskContentUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value userspaceonuse
animatable yes userspaceonuse this value indicates that all coordinates inside the <mask> element refer to the user coordinate system as defined when the mask was created.
maskUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value objectboundingbox
animatable yes userspaceonuse this value indicates that all coordinates for the geometry attributes refer to the user coordinate system as defined when the mask was created.
mathematical - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the alignment coordinate for the glyphs.
max - SVG: Scalable Vector Graphics
butename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none
animatable no <clock-value> specifies the length of the maximum value of the active duration, measured in local time.
media - SVG: Scalable Vector Graphics
<svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all
animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied.
method - SVG: Scalable Vector Graphics
value align | stretch default value align
animatable yes align this value indicates that the characters should be rendered so that they are not stretched or warped.
min - SVG: Scalable Vector Graphics
tributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0
animatable no <clock-value> specifies the length of the minimum value of the active duration, measured in local time.
mode - SVG: Scalable Vector Graphics
f="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal
animatable yes for a description of the values, see <blend-mode>.
numOctaves - SVG: Scalable Vector Graphics
r id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <integer> default value 1
animatable yes <integer> defines the number of octaves.
onclick - SVG: Scalable Vector Graphics
op>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none
animatable no specifications specification status comment scalable vector graphics (svg) 2the definition of 'onclick' in that specification.
opacity - SVG: Scalable Vector Graphics
style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg> usage notes default value 1 value <alpha-value>
animatable yes <alpha-value> the uniform opacity setting to be applied across an entire object, as a <number>.
order - SVG: Scalable Vector Graphics
ency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 3
animatable yes <number-optional-number> this value indicates the number of cells in each dimension for the kernel matrix.
orient - SVG: Scalable Vector Graphics
ll="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0
animatable yes (non-additive) auto this value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.
orientation - SVG: Scalable Vector Graphics
only one element is using this attribute: <glyph> usage notes value h | v default value none (meaning glyph can be used for both text directions)
animatable yes h this value indicates that the glyph is only used for a horizontal text direction.
origin - SVG: Scalable Vector Graphics
only one element is using this attribute: <animatemotion> context notes value default default value default
animatable no specifications specification status comment svg animations level 2the definition of 'origin' in that specification.
overflow - SVG: Scalable Vector Graphics
, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is wider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | hidden | scroll | auto default value visible
animatable yes for a description of the values, please see the css overflow property.
paint-order - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, and <tspan> usage notes value normal | [ fill || stroke || markers ] default value normal
animatable yes normal this value indicates that the fill will be painted first, then the stroke, and finally the markers.
panose-1 - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <integer>{10} default value 0 0 0 0 0 0 0 0 0 0
animatable no <integer>{10} this value specifies a panose-1 number and consists of ten decimal integers, separated by whitespace.
patternContentUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value userspaceonuse
animatable yes userspaceonuse this value indicates that all coordinates inside the <pattern> element refer to the user coordinate system as defined when the pattern tile was created.
patternUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value objectboundingbox
animatable yes userspaceonuse this value indicates that all coordinates for the geometry properties refer to the user coordinate system as defined when the pattern was applied.
pointer-events - SVG: Scalable Vector Graphics
circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | none default value visiblepainted
animatable yes for a detailed explanation of each possible value, have a look at the css pointer-events documentation.
pointsAtX - SVG: Scalable Vector Graphics
ng in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number>
animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatx' in that specification.
pointsAtY - SVG: Scalable Vector Graphics
ng in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number>
animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsaty' in that specification.
pointsAtZ - SVG: Scalable Vector Graphics
g in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="80" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number>
animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatz' in that specification.
preserveAlpha - SVG: Scalable Vector Graphics
per.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes default value false value true | false
animatable yes true this value indicates that the convolution will only apply to the color channels.
primitiveUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <filter> usage notes value userspaceonuse | objectboundingbox default value userspaceonuse
animatable yes userspaceonuse this value indicates that any length values within the filter definitions represent values in the current user coordinate system in place at the time when the <filter> element is referenced (i.e., the user coordinate system for the element referencing the <filter> element via a filter attribute).
radius - SVG: Scalable Vector Graphics
usage notes value <number-optional-number> default value 0
animatable yes specifications specification status comment filter effects module level 1the definition of 'radius' in that specification.
rendering-intent - SVG: Scalable Vector Graphics
only one element is using this attribute: <color-profile> usage notes value auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric default value auto
animatable yes auto this value allows the user agent to determine the best intent based on the content type.
repeatCount - SVG: Scalable Vector Graphics
eight="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="5"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none
animatable no <number> this value specifies the number of iterations.
repeatDur - SVG: Scalable Vector Graphics
ht="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none
animatable no <clock-value> this value specifies the duration in presentation time to repeat the animation.
requiredExtensions - SVG: Scalable Vector Graphics
usage notes value <list-of-extensions> default value none
animatable no <list-of-extensions> the value is a list of references (iri references in svg 1, url references in svg 2) which identify the required extensions, with the individual values separated by white space.
requiredFeatures - SVG: Scalable Vector Graphics
5" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features> default value true if not defined, false if null or empty string as value
animatable no <list-of-features> this is a list of feature strings, separated using white space.
restart - SVG: Scalable Vector Graphics
5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennotactive | never default value always
animatable no always this value indicates that the animation can be restarted at any time.
result - SVG: Scalable Vector Graphics
e" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> usage notes value <filter-primitive-reference> default value none
animatable yes <filter-primitive-reference> this value is a <custom-ident> and defines the name for the filter primitive.
rotate - SVG: Scalable Vector Graphics
usage notes value auto | auto-reverse | <number> default value 0
animatable no the auto and auto-reverse values allow the animated element's rotation to change dynamically as it travels along the path.
scale - SVG: Scalable Vector Graphics
ctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter2); transform: translatex(240px);""/> </svg> usage notes value <number> default value none
animatable yes <number> this value defines the scale factor for the displacement.
seed - SVG: Scalable Vector Graphics
<filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0
animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="1...
shape-rendering - SVG: Scalable Vector Graphics
ine>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" shape-rendering="geometricprecision"/> <circle cx="320" cy="100" r="100" shape-rendering="crispedges"/> </svg> usage notes value auto | optimizespeed | crispedges | geometricprecision default value auto
animatable yes auto this value 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.
side - SVG: Scalable Vector Graphics
from the path</textpath> </text> <text> <textpath href="#circle2" side="right">text right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left
animatable yes left this value places the text on the left side of the path (relative to the path direction).
slope - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value 0
animatable no <number> this value indicates the vertical stroke angle of the font.
spacing - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> usage notes value auto | exact default value exact
animatable yes auto this value indicates that the user agent should use text-on-a-path layout algorithms to adjust the spacing between typographic characters in order to achieve visually appealing results.
specularConstant - SVG: Scalable Vector Graphics
onstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1
animatable yes specifications specification status comment filter effects module level 1the definition of 'specularconstant' in that specification.
spreadMethod - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> context notes value pad | reflect | repeat initial value pad
animatable yes pad this value indicates that the final color of the gradient fills the shape beyond the gradient's edges.
startOffset - SVG: Scalable Vector Graphics
</textpath> </text> </svg> usage notes value <length-percentage> | <number> default value 0
animatable yes <length-percentage> a length represents a distance along the path measured in the current user coordinate system for the <textpath> element.
stdDeviation - SVG: Scalable Vector Graphics
</filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); transform: translatex(280px);" /> </svg> usage notes value <number-optional-number> default value 0
animatable yes <number-optional-number> if two numbers are provided, the first number represents a standard deviation value along the x-axis.
stemh - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the horizontal stem width of the font.
stemv - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the vertical stem width of the font.
stitchTiles - SVG: Scalable Vector Graphics
0" style="filter: url(#noise2); transform: translate(320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch
animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function.
stop-color - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value currentcolor | <color> <icccolor> default value black
animatable yes currentcolor this keyword denotes the current fill color and can be specified in the same manner as within a <paint> specification for the fill and stroke attributes.
stop-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value <opacity-value> default value 1
animatable yes <opacity-value> this value is either a <number> between 0 and 1 or a <percentage> value specifying the opacity of the color gradient stop.
string - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face-format> usage notes value <anything> default value none
animatable no <anything> this value specifies a list of formats that are supported by the font referenced by the parent <font-face-uri> element.
stroke-dasharray - SVG: Scalable Vector Graphics
sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none
animatable yes <dasharray> a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps.
stroke-dashoffset - SVG: Scalable Vector Graphics
us example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0
animatable yes the offset is usually expressed in user units resolved against the pathlength but if a <percentage> is used, the value is resolved as a percentage of the current viewport.
stroke-linecap - SVG: Scalable Vector Graphics
<!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4 m1,3 h4 m1,5 h4" stroke="pink" stroke-width="0.025" /> </svg> usage notes value butt | round | square default value butt
animatable yes butt the butt value indicates that the stroke for each subpath does not extend beyond its two endpoints.
stroke-linejoin - SVG: Scalable Vector Graphics
cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5.5" r="0.05" fill="pink" /> </g> <use xlink:href="#highlight" x="6" /> <use xlink:href="#highlight" x="12" /> <use xlink:href="#highlight" x="2" y="6" /> <use xlink:href="#highlight" x="8" y="6" /> </svg> usage context value arcs | bevel |miter | miter-clip | round default value miter
animatable yes arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see browser compatibility bellow for details.
stroke-opacity - SVG: Scalable Vector Graphics
ke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as a css property --> <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" /> </svg> usage notes value [0-1] | <percentage> default value 1
animatable yes note: svg2 introduces percentage values for stroke-opacity, however, it is not widely supported yet (see browser compatibility below) as a consequence, it is best practices to set opacity with a value in the range [0-1].
stroke-width - SVG: Scalable Vector Graphics
ke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percentage> default value 1px
animatable yes note: a percentage value is always computed as a percentage of the normalized viewbox diagonal length.
stroke - SVG: Scalable Vector Graphics
n" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <circle cx="15" cy="5" r="4" fill="none" stroke="url(#mygradient)" /> </svg> usage notes value <paint> default value none
animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'stroke' in that specification.
style - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <rect width="80" height="40" x="10" y="10" style="fill: skyblue; stroke: cadetblue; stroke-width: 2;"/> </svg> usage notes value <style> default value none
animatable no <style> the syntax of style data depends on the style sheet language.
systemLanguage - SVG: Scalable Vector Graphics
matemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none
animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
tabindex - SVG: Scalable Vector Graphics
100%; } <?xml version="1.0"?> <svg viewbox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none
animatable no valid integer relative order of the element for the purposes of sequential focus navigation.
tableValues - SVG: Scalable Vector Graphics
rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer
animatable yes <list-of-numbers> this value holds a comma- and/or space-separated list of <number>s, which define a lookup table for the color component transfer function.
target - SVG: Scalable Vector Graphics
ame</text> </a> <a href="https://developer.mozilla.org" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> </svg> usage notes value _self | _parent | _top | _blank | <xml-name> default value _self
animatable yes _replace the current svg image is replaced by the linked content in the same rectangular area in the same frame as the current svg image.
targetX - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(orderx / 2)
animatable yes <integer> this value indicates the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image.
targetY - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2)
animatable yes <integer> this value indicates the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image.
text-anchor - SVG: Scalable Vector Graphics
0">a</text> <!-- materialisation of anchors --> <circle cx="60" cy="40" r="3" fill="red" /> <circle cx="60" cy="75" r="3" fill="red" /> <circle cx="60" cy="110" r="3" fill="red" /> <style><![cdata[ text { font: bold 36px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> usage notes default value start value start | middle | end
animatable yes start the rendered characters are aligned such that the start of the text string is at the initial current text position.
text-decoration - SVG: Scalable Vector Graphics
%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see individual properties
animatable yes for a description of the values, please refer to the css text-decoration property.
text-rendering - SVG: Scalable Vector Graphics
ml, body, svg { height: 100%; } <svg viewbox="0 0 140 40" xmlns="http://www.w3.org/2000/svg"> <text y="15" text-rendering="geometricprecision">geometric precision</text> <text y="35" text-rendering="optimizelegibility">optimized legibility</text> </svg> usage notes value auto | optimizespeed | optimizelegibility | geometricprecision default value auto
animatable yes auto this value 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.
textLength - SVG: Scalable Vector Graphics
ents are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none
animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or percentage.
transform-origin - SVG: Scalable Vector Graphics
usage notes values [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> default value 50%, 50%
animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset.
transform - SVG: Scalable Vector Graphics
value <transform-list> default value none
animatable yes transform functions the following transform functions can be used by the transform attribute <transform-list> warning: as per the spec, you should be able to also use css transform functions.
u1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <hkern> and <vkern> context notes value [ <character> | <urange> ]# default value none
animatable no [ <character> | <urange> ]# this value indicates a comma-separated sequence of unicode characters and/or ranges of unicode characters, which identify a set of possible first glyphs in a kerning pair.
u2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <hkern> and <vkern> context notes value [ <character> | <urange> ]# default value none
animatable no [ <character> | <urange> ]# this value indicates a comma-separated sequence of unicode characters and/or ranges of unicode characters, which identify a set of possible second glyphs in a kerning pair.
unicode-bidi - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value normal | embed | isolate | bidi-override | isolate-override | plaintext default value normal
animatable no for a description of the values, please refer to the css unicode-bidi property.
unicode-range - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <urange># default value none
animatable no <urange># this value is a comma-separated list of iso 10646 characters possibly covered by the glyphs in the font.
unicode - SVG: Scalable Vector Graphics
only one element is using this attribute: <glyph> context notes value <string> default value none
animatable no <string> this value specifies one or more unicode characters corresponding to a glyph.
units-per-em - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value 1000
animatable no <number> this value indicates the the number of coordinate units on the em square.
v-alphabetic - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-alphabetic' in that specification.
v-hanging - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the alignment coordinate for the glyphs to achieve hanging baseline alignment.
v-ideographic - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the alignment coordinate for the glyphs.
v-mathematical - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the alignment coordinate for the glyphs.
vector-effect - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <foreignobject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath> <tspan>, and <use> usage notes value none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position default value none
animatable yes none this value specifies that no vector effect shall be applied, i.e.
version - SVG: Scalable Vector Graphics
<svg version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80"/> </svg> usage notes value <number> default value none
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'version' in that specification.
vert-origin-x - SVG: Scalable Vector Graphics
only one element is using this attribute: <font> usage notes value <number> default value half of horiz-adv-x value
animatable no <number> this value indicates the x-coordinate of the origin of a glyph for vertically oriented text.
vert-origin-y - SVG: Scalable Vector Graphics
only one element is using this attribute: <font> usage notes value <number> default value ascent value
animatable no <number> this value indicates the y-coordinate of the origin of a glyph for vertically oriented text.
viewTarget - SVG: Scalable Vector Graphics
only one element is using this attribute: <view> usage notes value <xml-name> default value none
animatable no <xml-name> this value specifies the name of the object associated with the view.
visibility - SVG: Scalable Vector Graphics
dth="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="20" width="80" height="80" visibility="hidden"/> </g> </svg> usage notes value visible | hidden | collapse default value visible
animatable yes visible this value indicates that the element will be painted.
widths - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value is a comma-separated list of ucs range values as defined in iso 10646, each followed by one or more glyph widths.
word-spacing - SVG: Scalable Vector Graphics
the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" word-spacing="2">bigger spacing between words</text> <text x="0" y="40" word-spacing="-0.5">smaller spacing between words</text> </svg> usage notes value normal | <length>
animatable yes default values normal for a description of the values, please refer to the css letter-spacing property.
writing-mode - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> usage notes default value horizontal-tb value horizontal-tb | vertical-rl | vertical-lr
animatable yes horizontal-tb this value defines a top-to-bottom block flow direction.
x-height - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none
animatable no <number> this value indicates the height of lowercase glyphs.
xChannelSelector - SVG: Scalable Vector Graphics
placementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a
animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the x-axis.
xlink:arcrole - SVG: Scalable Vector Graphics
aughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, <use> usage notes value <iri> default value none
animatable no <iri> this value specifies an iri reference that identifies some resource that describes the intended property.
xlink:show - SVG: Scalable Vector Graphics
only one element is using this attribute: <a> usage notes value new | replace | embed | other | none default value replace
animatable no new this value specifies that the referenced resource is opened in a new window or tab.
xlink:title - SVG: Scalable Vector Graphics
these elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage context value <anything> default value none
animatable no <anything> this value specifies the title used to describe the meaning of the link or resource.
xlink:type - SVG: Scalable Vector Graphics
twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage notes value simple default value simple
animatable no simple this value specifies that the referred resource is a simple link.
xml:lang - SVG: Scalable Vector Graphics
<svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text xml:lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none
animatable no <language-tag> this value specifies the language used for the element.
xml:space - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 140 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" xml:space="default">default spacing</text> <text y="40" xml:space="preserve">preserved spacing</text> </svg> usage notes value default | preserve default value default
animatable no default with this value set, whitespace characters will be processed in this order: all newline characters are removed.
yChannelSelector - SVG: Scalable Vector Graphics
placementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a
animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis.
zoomAndPan - SVG: Scalable Vector Graphics
<filter id="diffuselighting" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> usage notes value disable | magnify default value magnify
animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'zoomandpan' in that specification.
<clipPath> - SVG: Scalable Vector Graphics
value type: userspaceonuse|objectboundingbox ; default value: userspaceonuse;
animatable: yes global attributes core attributes most notably: id styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-l...
<set> - SVG: Scalable Vector Graphics
value type: <anything>; default value: none;
animatable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document elemen...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
ath> graphics elements implementation status unknown allow x, y, width, and height on <symbol> implementation status unknown made <use> element shadow trees consistent with shadow dom spec implementation status unknown role mapping of <a> element depending on whether it is a valid link implementation status unknown aria state and property attributes
animatable implementation status unknown styling change notes contentstyletype attribute removed implementation status unknown linkstyle on svgstyleelement implemented (bug 1239128 (firefox 46.0 / thunderbird 46.0 / seamonkey 2.43)) inner <svg>s and <foreignobjects>s not overflow: hidden; in ua style sheet implementation status unknown ...