Search completed in 1.71 seconds.
SVG documentation index - SVG: Scalable Vector Graphics
found 383 pages: # page tags and summary 1
svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design,
svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (
svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying
svg effects to html content css, guide, html,
svg modern browsers support using
svg within css styles to apply graphical effects to html content.
... 3 compatibility sources
svg the following sources are used for the compatibility tables on
svg elements and attributes: 4 content type needstechnicalreview,
svg, types, data types
svg makes use of a number of data types.
... 5 linking guide,
svg the target attribute on the
svg <a> element doesn't work in mozilla firefox 1.5.
...And 395 more matches
SVGSVGElement - Web APIs
the
svgsvgelement interface provides access to the properties of <
svg> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarg...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 55 more matches
Tools for SVG - SVG: Scalable Vector Graphics
« previous now that we covered the basics of the
svg internals, we will take a look at some tools to work with
svg files.
... browser support as of internet explorer 9, all major browsers support
svg: ie 9, mozilla firefox, safari, google chrome and opera.
... mobile devices with webkit-based browsers also support
svg.
...And 20 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
modern browsers support using
svg within css styles to apply graphical effects to html content.
... you may specify
svg in styles either within the same document or an external style sheet.
... note: references to
svg in external files must be to the same origin as the referencing document.
...And 17 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
svg 2 is the next major version of the
svg standard, which is a complete rework of the
svg 1.2 draft.
... version 2 contains a lot of changes regarding the last stable version
svg 1.1.
...tus unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 1240357) rendering model change notes
svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <
svg> elements implementation status unknown basic data types and interfaces change notes dommatrix or dommatrixreadon...
...And 16 more matches
<svg> - SVG: Scalable Vector Graphics
the
svg element is a container that defines a new coordinate system and viewport.
... it is used as the outermost element of
svg documents, but it can also be used to embed an
svg fragment inside an
svg or html document.
... note: the xmlns attribute is only required on the outermost
svg element of
svg documents.
...And 14 more matches
SVG fonts - SVG: Scalable Vector Graphics
« previousnext » when
svg was specified, support for web fonts was not widespread in browsers.
... since accessing the correct font file is however crucial for rendering text correctly, a font description technology was added to
svg to provide this ability.
... it was not meant for compatibility with other formats like postscript or otf, but rather as a simple means of embedding glyph information into
svg when rendered.
...And 12 more matches
Other content in SVG - SVG: Scalable Vector Graphics
« previousnext » apart from graphic primitives like rectangles and circles,
svg offers a set of elements to embed other types of content in images as well.
... embedding raster images much like the img element in html
svg has an image element to serve the same purpose.
...the specification requests applications to support at least png, jpeg and
svg format files.
...And 10 more matches
SVG and CSS - SVG: Scalable Vector Graphics
this page illustrates the application of css to the specialized language for creating graphics:
svg.
... below you'll create a simple demonstration that runs in your
svg-enabled browser.
... example make a new
svg document as a plain text file, doc8.
svg.
...And 10 more matches
SVG In HTML Introduction - SVG: Scalable Vector Graphics
overview this article and its associated example shows how to use inline
svg to provide a background picture for a form.
... source here is the source to the example: <html> <head> <title>xtech
svg demo</title> <style> stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</s...
...pan></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <
svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> </
svg> </body> </html> discussion the page is mainly regular html, css and javascript.
...And 7 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
to insert one, you create a <lineargradient> node inside the definitions section of your
svg file.
... basic example <
svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/
svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </lineargradient> <style type="text/css"><![cdata[ #rect1 { fill: url(#gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x...
...="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#gradient2)"/> </
svg> screenshotlive sample above is an example of a linear gradient being applied to a <rect> element.
...And 6 more matches
SVG animation with SMIL - SVG: Scalable Vector Graphics
firefox 4 introduced support for animating
svg using synchronized multimedia integration language (smil).
... smil allows you to: animate the numeric attributes of an element (x, y, ...) animate transform attributes (translation or rotation) animate color attributes follow a motion path this is done adding an
svg element like <animate> inside the
svg element to animate.
... <
svg width="300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </
svg> animating the transform attributes the <anima...
...And 5 more matches
SVG as an Image - SVG: Scalable Vector Graphics
svg images can be used as an image format, in a number of contexts.
... many browsers support
svg images in: html <img> or <
svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using
svg in these contexts: css list-style-image css content
svg <image> element
svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on
svg content when it's being used as an image: javascript is disabled.
... note that the above restrictions are specific to image contexts; they don't apply when
svg content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements.
...And 4 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
svg presentation attributes are css properties that can be used as attributes on
svg elements.
... value: auto|srgb|linearrgb|inherit; animatable: yes color-profile deprecated since
svg 2 it defines which color profile a raster image included through the <image> element should use.
... value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; animatable: yes enable-background deprecated since
svg 2 it tells the browser how to manage the accumulation of the background image.
...And 3 more matches
SVG element reference - SVG: Scalable Vector Graphics
«
svg /
svg attribute reference »
svg drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams.
... here you'll find reference documentation for each of the
svg elements.
...
svg elements a to z a <a> <animate> <animatemotion> <animatetransform> c <circle> <clippath> <color-profile> d <defs> <desc> <discard> e <ellipse> f <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> ...
...And 3 more matches
SVG Core Attributes - SVG: Scalable Vector Graphics
the
svg core attributes are all the common attributes that can be specified on any
svg element.
...
svg 2 introduce the new lang attributes.
... 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.
...And 2 more matches
SVG Attribute reference - SVG: Scalable Vector Graphics
svg elements can be modified using attributes that specify details about exactly how the element should be handled or rendered.
... below is a list of all of the attributes available in
svg along with links to reference documentation to help you learn which elements support them and how they work.
...
svg attributes a to z a accent-height accumulate additive alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-s...
...And 2 more matches
SVG Tutorial - SVG: Scalable Vector Graphics
scalable vector graphics,
svg, is a w3c xml dialect to mark up graphics.
... this tutorial aims to explain the internals of
svg and is packed with technical details.
...another good introduction to
svg is provided by the w3c's
svg primer.
...And 2 more matches
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
the <title> element provides an accessible, short-text description of any
svg container element or graphics element.
... note: for backward compatibility with
svg 1.1, <title> elements should be the first child element of their parent.
... html,body,
svg { height:100% } <
svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/
svg"> <circle cx="5" cy="5" r="4"> <title>i'm a circle</title> </circle> <rect x="11" y="1" width="8" height="8"> <title>i'm a square</title> </rect> </
svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or character data specifications specification status comment scalable vector graphics (
svg) 2the definition of '<title>' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<title>' in that specification.
SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
the
svg conditional processing attributes are all the attributes that can be specified on some
svg elements to control whether or not the element on which it appears should be rendered.
... externalresourcesrequired requiredextensions requiredfeatures systemlanguage attributes externalresourcesrequired deprecated since
svg 2 if set to true, it indicates that the browser must wait for all the external resources necessary to render that element to be loaded before processing 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..
SVG Event Attributes - SVG: Scalable Vector Graphics
for every event type that the browser supports,
svg supports that as an event attribute, following the same requirements as for html event attributes.
... the global event attributes are available on all
svg elements.
SVG Filters Tutorial - SVG: Scalable Vector Graphics
filters
svg allows us to use similar tools as the bitmap description language such as the use of shadow, blur effects or even merging the results of different filters.
...
svg filter example <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3"/> </filter> </defs> <g id="ghost" style="filter: url(#drop-shadow);"/> <!--ghost drawing in here--> </g> this above example will not produced the desired output.
SVG image element - SVG: Scalable Vector Graphics
« previousnext » the
svg <image> element allows for raster images to be rendered within an
svg object.
... in this basic example, a .jpg image referenced by an href attribute will be rendered inside an
svg object: <?xml version="1.0" standalone="no"?> <!doctype
svg public "-//w3c//dtd
svg 1.1//en" "http://www.w3.org/graphics/
svg/1.1/dtd/
svg11.dtd"> <
svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> </
svg> there are some important things to take note of (referenced from the w3 specs): if you do not set the x or y attributes, they will be set to 0.
requiredFeatures - SVG: Scalable Vector Graphics
this provides a way to design
svg that gracefully falls back when features aren't available.
... to detect availability of an
svg feature from script, there is the (also deprecated) domimplementation.hasfeature() method.
... twentynine elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <
svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body,
svg { height: 100%; } text { fill: white; } <
svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/
svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" 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 ...
...And 44 more matches
SVG Guidelines
pros and cons of
svg for images when used as a document format there is usually a compelling reason that makes
svg the only solution.
... when used as an image format, it is sometimes less obvious whether it would be best to use
svg or a raster image format for any given image.
... the vector format
svg and raster formats like png both have their place.
...And 35 more matches
SVGPathElement - Web APIs
the
svgpathelement interface corresponds to the <path> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 34 more matches
Content type - SVG: Scalable Vector Graphics
svg makes use of a number of data types.
...for angle values in
svg-specific properties and their corresponding presentation attributes, the angle unit identifier is optional.
...in presentation attributes for all properties, whether defined in
svg1.1 or in css2, the angle identifier, if specified, must be in lower case.
...And 29 more matches
x - SVG: Scalable Vector Graphics
enttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <
svg>, <text>, <tref>, <tspan>, and <use> html,body,
svg { height:100% } <
svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/
svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </
svg> altglyph warning: as of
svg2 <altglyph> is deprecated and shouldn't be used.
... value <length> | <percentage> default value 0 animatable yes note: starting with
svg2, x is a geometry property meaning this attribute can also be used as a css property for <foreignobject>.
... glyphref warning: as of
svg2 <glyphref> is deprecated and shouldn't be used.
...And 28 more matches
y - SVG: Scalable Vector Graphics
enttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <
svg>, <text>, <tref>, <tspan>, and <use> html,body,
svg { height:100% } <
svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/
svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </
svg> altglyph warning: as of
svg2 <altglyph> is deprecated and shouldn't be used.
... value <length> | <percentage> default value 0 animatable yes note: starting with
svg2, y is a geometry property meaning this attribute can also be used as a css property for <foreignobject>.
... glyphref warning: as of
svg2 <glyphref> is deprecated and shouldn't be used.
...And 28 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
given the flexibility of
svg images, there's a lot to keep in mind when using them as background images with the background-image property, and even more to keep in mind when also scaling them using the background-size property.
... this article describes how scaling of
svg images is handled when using these properties.
...an
svg image with fixed dimensions will be treated just like a raster image of the same size.
...And 24 more matches
xlink:href - SVG: Scalable Vector Graphics
note:
svg 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.
... 22 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>} html, body,
svg { height: 100%; } <
svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/
svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </
svg> a for <a>, xlink:href defines the location of the referenced object.
... 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.
...And 24 more matches
Namespaces crash course - SVG: Scalable Vector Graphics
as an xml dialect,
svg is namespaced.
... it is important to understand the concept of namespaces and how they are used if you plan to author
svg content.
... versions of
svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
...And 24 more matches
Introduction - SVG: Scalable Vector Graphics
« previousnext »
svg is an xml language, similar to xhtml, which can be used to draw vector graphics, such as the ones shown to the right.
...
svg came about in 1999 after several competing formats had been submitted to the w3c and failed to be fully ratified.
...
svg is supported by all major browsers.
...And 24 more matches
Getting started - SVG: Scalable Vector Graphics
<
svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/
svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">
svg</text> </
svg> copy the code and paste it in a file demo1.
svg.
...(firefox users: click here) the rendering process involves the following: we start with the <
svg> root element: a doctype declaration as known from (x)html should be left off because dtd based
svg validation leads to more problems than it solves before
svg 2, to identify the version of the
svg for other types of validation the version and baseprofile attributes should always be used instead.
... both version and baseprofile attributes are deprecated in
svg 2.
...And 23 more matches
SVGFEConvolveMatrixElement - Web APIs
the
svgfeconvolvematrixelement interface corresponds to the <feconvolvematrix> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 21 more matches
SVGTextContentElement - Web APIs
the
svgtextcontentelement interface is implemented by elements that support rendering child text content.
... it is inherited by various text-related interfaces, such as
svgtextelement,
svgtspanelement,
svgtrefelement,
svgaltglyphelement and
svgtextpathelement.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...And 21 more matches
SVGTransform - Web APIs
svg transform interface
svgtransform is the interface for one of the component transformations within an
svgtransformlist; thus, an
svgtransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute.
... an
svgtransform object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... interface overview also implement none methods void setmatrix(in
svgmatrix matrix) void settranslate(in float tx, in float ty) void setscale(in float sx, in float sy) void setrotate(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly
svgmatrix matrix constants
svg_transform_unknown = 0
svg_transform_matrix = 1
svg_transform_translate = 2
svg_transform_scale = 3
svg_transform_rotate = 4
svg_transform_skewx = 5
svg_transform_skewy = 6 normative document
svg 1.1 (2nd edition) constants ...
...And 19 more matches
SVGTransformList - Web APIs
svg transform list interface the
svgtransformlist defines a list of
svgtransform objects.
... an
svgtransformlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... note: starting in gecko 9.0,the
svgtransformlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear()
svgtransform initialize(in
svgtransform newitem)
svgtransform getitem(in unsigned long index)
svgtransform insertitembefore(in
svgtransform newitem, in unsigned long index)
svgtransform replaceitem(in
svgtransform newitem, in unsigned long index)
svgtransform removeitem(in unsigned long index)
svgtransform appenditem(in
svgtransform newitem)
svgtransform create
svgtransformfrommatrix(in
svgmatrix)
svgtransform consolidate() properties readonly unsigned long numberofitems readonly unsigned long length ...
...And 19 more matches
SVGComponentTransferFunctionElement - Web APIs
the
svgcomponenttransferfunctionelement interface defines a base interface used by the component transfer function interfaces.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 18 more matches
SVGFETurbulenceElement - Web APIs
the
svgfeturbulenceelement interface corresponds to the <feturbulence> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 18 more matches
SVGMatrix - Web APIs
many of
svg's graphics operations utilize 2x3 matrices of the form: [a c e] [b d f] which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become: [a c e] [b d f] [0 0 1] an
svgmatrix object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... warning:
svg 2 replaced the
svgmatrix interface by the more general dommatrix and dommatrixreadonly interfaces.
... properties
svgmatrix.a a float representing the a component of the matrix.
...And 18 more matches
SVGPreserveAspectRatio - Web APIs
svg preserveaspectratio interface the
svgpreserveaspectratio interface corresponds to the preserveaspectratio attribute, which is available for some of
svg's elements.
... an
svgpreserveaspectratio object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... interface overview also implement none methods none properties unsigned short align unsigned short meetorslice constants
svg_preserveaspectratio_unknown = 0
svg_preserveaspectratio_none = 1
svg_preserveaspectratio_xminymin = 2
svg_preserveaspectratio_xmidymin = 3
svg_preserveaspectratio_xmaxymin = 4
svg_preserveaspectratio_xminymid = 5
svg_preserveaspectratio_xmidymid = 6
svg_preserveaspectratio_xmaxymid = 7
svg_preserveaspectratio_xminymax = 8
svg_preserveaspectratio_xmidymax = 9
svg_preserveaspectratio_xmaxymax = 10
svg_meetorslice_unknown = 0
svg_meetorslice_meet = 1
svg_meetorslice_slice = 2 normative document ...
...And 18 more matches
SVGElement - Web APIs
all of the
svg dom interfaces that correspond directly to elements in the
svg language derive from the
svgelement interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits pro...
...And 17 more matches
SVGMarkerElement - Web APIs
svg path segment interface the
svgmarkerelement interface corresponds to the marker element.
... interface overview also implement none methods void setorienttoangle(in
svgangle angle) void setorienttoauto() properties
svganimatedlength refx
svganimatedlength refy
svganimatedenumeration markerunits
svganimatedlength markerwidth
svganimatedlength markerheight
svganimatedenumeration orienttype
svganimatedangle orientangle constants
svg_marker_orient_unknown = 0
svg_marker_orient_auto = 1
svg_marker_orie...
...nt_angle = 2
svg_markerunits_unknown = 0
svg_markerunits_userspaceonuse = 1
svg_markerunits_strokewidth = 2 normative document
svg 1.1 (2nd edition) constants orientation name value description
svg_marker_orient_unknown 0 the marker orientation is not one of predefined types.
...And 17 more matches
Paths - SVG: Scalable Vector Graphics
« previousnext » the <path> element is the most powerful element in the
svg library of basic shapes.
... a good understanding of paths is important when drawing
svgs.
... while creating complex paths using an xml editor or text editor is not recommended, understanding how they work will allow to identify and repair display issues in
svgs.
...And 17 more matches
SVGFEDisplacementMapElement - Web APIs
the
svgfedisplacementmapelement interface corresponds to the <fedisplacementmap> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 16 more matches
SVGLength - Web APIs
svg length interface the
svglength interface correspond to the <length> basic data type.
... an
svglength object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
...lso implement none methods void newvaluespecifiedunits(in unsigned short unittype, in float valueinspecifiedunits) void converttospecifiedunits(in unsigned short unittype) properties readonly unsigned short unittype float value float valueinspecifiedunits domstring valueasstring constants
svg_lengthtype_unknown = 0
svg_lengthtype_number = 1
svg_lengthtype_percentage = 2
svg_lengthtype_ems = 3
svg_lengthtype_exs = 4
svg_lengthtype_px = 5
svg_lengthtype_cm = 6
svg_lengthtype_mm = 7
svg_lengthtype_in = 8
svg_lengthtype_pt = 9
svg_lengthtype_pc = 10 normative document
svg 1.1 (2nd edition) example <
svg height="...
...And 16 more matches
href - SVG: Scalable Vector Graphics
note: specifications before
svg 2 defined an xlink:href attribute, which is now rendered obsolete by the href attribute.
... fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body,
svg { height: 100%; } <
svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/
svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </
svg> in
svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... except for any
svg-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the smil animation specification.
...And 16 more matches
SVGFECompositeElement - Web APIs
the
svgfecompositeelement interface corresponds to the <fecomposite> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 15 more matches
height - SVG: Scalable Vector Graphics
twenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <
svg>, and <use> html,body,
svg { height:100% } <
svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/
svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </
svg> feblend for <feblend>, height defines the vertical length for the renderi...
... value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with
svg2, height is a geometry property meaning this attribute can also be used as a css property for <foreignobject>.
... value auto | <length> | <percentage> default value auto (treated as the intrinsic height of the image) animatable yes note: starting with
svg2, height is a geometry property meaning this attribute can also be used as a css property for images.
...And 15 more matches
width - SVG: Scalable Vector Graphics
twenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <
svg>, and <use> html,body,
svg { height:100% } <
svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/
svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </
svg> feblend for <feblend>, width defines the horizontal length for the renderi...
... value auto | <length> | <percentage> default value auto (treated as 0) animatable yes note: starting with
svg2, width is a geometry property meaning this attribute can also be used as a css property for <foreignobject>.
... value auto | <length> | <percentage> default value auto (treated as the intrinsic width of the image) animatable yes note: starting with
svg2, width is a geometry property meaning this attribute can also be used as a css property for images.
...And 15 more matches
Scripting - SVG: Scalable Vector Graphics
one can override default browser behaviors with the evt.preventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax
svgelement.style.setproperty("fill-opacity", "0.0", "").
... using eventlisteners with objects the methods addeventlistener() and removeeventlistener() are very useful when writing interactive
svg.
... function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/
svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) break; } } } inter-document scripting: referencing embedded
svg when using
svg within html, adobe's
svg viewer 3.0 automatically includes a window property called
svgdocument that points...
...And 15 more matches
SVGFEBlendElement - Web APIs
the
svgfeblendelement interface corresponds to the <feblend> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 14 more matches
SVGFEGaussianBlurElement - Web APIs
the
svgfegaussianblurelement interface corresponds to the <fegaussianblur> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 14 more matches
SVGImageElement - Web APIs
the
svgimageelement interface corresponds to the <image> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 14 more matches
SVGPatternElement - Web APIs
the
svgpatternelement interface corresponds to the <pattern> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 14 more matches
d - SVG: Scalable Vector Graphics
three elements have this attribute: <path>, <glyph>, and <missing-glyph> html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <path fill="none" stroke="red" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </
svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn.
... value <string> default value none animatable yes glyph warning: as of
svg2 <glyph> is deprecated and shouldn't be used.
... missing-glyph warning: as of
svg2 <missing-glyph> is deprecated and shouldn't be used.
...And 14 more matches
SVGFEColorMatrixElement - Web APIs
the
svgfecolormatrixelement interface corresponds to the <fecolormatrix> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 13 more matches
SVGFilterElement - Web APIs
the
svgfilterelement interface provides access to the properties of <filter> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 13 more matches
SVGMaskElement - Web APIs
the
svgmaskelement interface provides access to the properties of <mask> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 13 more matches
SVGStyleElement - Web APIs
svg style interface the
svgstyleelement interface corresponds to the
svg <style> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 13 more matches
SVG: Scalable Vector Graphics
getting started this tutorial will help get you started using
svg.
... scalable vector graphics (
svg) are an xml-based markup language for describing two-dimensional based vector graphics.
...
svg is, essentially, to graphics what html is to text.
...And 13 more matches
SVGAngle - Web APIs
the
svgangle interface is used to represent a value that can be an <angle> or <number> value.
... an
svgangle reflected through the animval attribute is always read only.
... an
svgangle object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
...And 12 more matches
SVGAnimationElement - Web APIs
the
svganimationelement interface is the base interface for all of the animation element interfaces:
svganimateelement,
svgsetelement,
svganimatecolorelement,
svganimatemotionelement and
svganimatetransformelement.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 12 more matches
SVGFEMorphologyElement - Web APIs
the
svgfemorphologyelement interface corresponds to the <femorphology> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 12 more matches
SVGFESpotLightElement - Web APIs
the
svgfespotlightelement interface corresponds to the <fespotlight> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 12 more matches
SVGGradientElement - Web APIs
the
svggradient interface is a base interface used by
svglineargradientelement and
svgradialgradientelement.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 12 more matches
SVGRectElement - Web APIs
the
svgrectelement interface provides access to the properties of <rect> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 12 more matches
SVGTextPositioningElement - Web APIs
the
svgtextpositioningelement interface is implemented by elements that support attributes that position individual text glyphs.
... it is inherited by
svgtextelement,
svgtspanelement,
svgtrefelement and
svgaltglyphelement.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...And 12 more matches
SVGAElement - Web APIs
the
svgaelement interface provides access to the properties of <a> element, as well as methods to manipulate them.
... properties this interface also inherits properties from its parent,
svggraphicselement, and implements properties from
svgurireference and htmlhyperlinkelementutils.
...
svgaelement.download see htmlanchorelement.download.
...And 11 more matches
SVGGeometryElement - Web APIs
the
svggeometryelement interface represents
svg elements whose rendering is defined by geometry with an equivalent path, and which can be filled and stroked.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 11 more matches
SVGUseElement - Web APIs
svg use dom interface the
svguseelement interface corresponds to the <use> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 11 more matches
SVGCircleElement - Web APIs
the
svgcircleelement interface is an interface for the <circle> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 10 more matches
SVGFESpecularLightingElement - Web APIs
the
svgfespecularlightingelement interface corresponds to the <fespecularlighting> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 10 more matches
SVGLineElement - Web APIs
the
svglineelement interface provides access to the properties of <line> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 10 more matches
SVGRadialGradientElement - Web APIs
the
svgradialgradientelement interface corresponds to the <radialgradient> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 10 more matches
SVGEllipseElement - Web APIs
the
svgellipseelement interface provides access to the properties of <ellipse> elements.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 9 more matches
SVGFEDiffuseLightingElement - Web APIs
the
svgfediffuselightingelement interface corresponds to the <fediffuselighting> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 9 more matches
SVGFEDropShadowElement - Web APIs
the
svgfedropshadowelement interface corresponds to the <fedropshadow> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 9 more matches
SVGForeignObjectElement - Web APIs
the
svgforeignobjectelement interface provides access to the properties of <foreignobject> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 9 more matches
SVGLinearGradientElement - Web APIs
the
svglineargradientelement interface corresponds to the <lineargradient> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 9 more matches
SVGTextPathElement - Web APIs
the
svgtextpathelement interface corresponds to the <textpath> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 9 more matches
preserveAspectRatio - SVG: Scalable Vector Graphics
because the aspect ratio of an
svg image is defined by the viewbox attribute, if this attribute isn't set, the preserveaspectratio attribute has no effect (with one exception, the <image> element, as described below).
... example <
svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/
svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <
svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></
svg> <
svg preserveaspectratio="xminymid meet" x="25" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></
svg> <
svg preserveaspectratio="xmaxymid meet" x="50" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></
svg> <!-- (width>height) slice --> <
svg preserveaspectratio="xmidymin slice" x="0" y="15" viewbox="0 0 100 100" width="20" h...
...eight="10"><use href="#smiley" /></
svg> <
svg preserveaspectratio="xmidymid slice" x="25" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></
svg> <
svg preserveaspectratio="xmidymax slice" x="50" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></
svg> <!-- (width<height) meet --> <
svg preserveaspectratio="xmidymin meet" x="75" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></
svg> <
svg preserveaspectratio="xmidymid meet" x="90" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></
svg> <
svg preserveaspectratio="xmidymax meet" x="105" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></
svg> <!-- (width<height) slice --> <
svg preserveaspectratio="...
...And 9 more matches
transform - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </
svg> note: as of
svg2, transform is a presentation attribute, meaning it can be used as a css property.
... as a presentation attribute, transform can be used by any element (in
svg 1.1, only these 16 elements were allowed to use it: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text>, and <use>).
... also, as a legacy from
svg 1.1, <lineargradient> and <radialgradient> support the gradienttransform attribute, and <pattern> supports the patterntransform attribute, both of which act exactly like the transform attribute.
...And 9 more matches
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
this page explains a problem that can cause
svg to stop working in mozilla due to the way mozilla maps filename extensions to media types.
... symptoms previously you were able to open and display
svg content with mozilla, but for no apparent reason its behaviour changes and now it always pops up the "open or save file" dialog when you try to open local
svg files, and displays the "additional plugins are required to display all the media on this page" bar when you try to view html with embedded
svg.
... note: the "additional plugins are required" bar can appear for legitimate reasons when the
svg or its embedding html is broken or served incorrectly over the network (see the
svg faq).
...And 9 more matches
SVGGlyphRefElement - Web APIs
the
svgglyphrefelement interface corresponds to the <glyphref> elements.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgglyphrefelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgglyphrefelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent,
svgelemen...
...t and implements properties from
svgurireference and
svgstylable.
...And 8 more matches
SVGGraphicsElement - Web APIs
the
svggraphicselement interface represents
svg elements whose primary purpose is to directly render graphics into a group.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 8 more matches
SVGNumberList - Web APIs
svg number list interface the
svgnumberlist defines a list of
svgnumber objects.
... an
svgnumberlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... note: starting in gecko 5.0,the
svgnumberlist dom interface is now indexable and can be accessed like arrays.
...And 8 more matches
dx - SVG: Scalable Vector Graphics
seven elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="50%" fill="grey">
svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">
svg</text> </
svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as ...
...of
svg2 <altglyph> is deprecated and shouldn't be used.
... value <number> default value 0 animatable yes glyphref warning: as of
svg2 <glyphref> is deprecated and shouldn't be used.
...And 8 more matches
dy - SVG: Scalable Vector Graphics
seven elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">
svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">
svg</text> </
svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: a...
...s of
svg2 <altglyph> is deprecated and shouldn't be used.
... value <number> default value 0 animatable yes glyphref warning: as of
svg2 <glyphref> is deprecated and shouldn't be used.
...And 8 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/
svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" ...
..." stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle 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.
... example html,body,
svg { height:100% } <
svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/
svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill=...
...And 8 more matches
textLength - SVG: Scalable Vector Graphics
the textlength attribute, available on
svg <text> and <tspan> elements, lets you specify the width of the space into which the text will draw.
... by using textlength, you can ensure that your
svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet).
... four elements 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.
...And 8 more matches
Positions - SVG: Scalable Vector Graphics
« previousnext » in this article, we examine how scalable vector graphics (
svg) represents the positions and sizes of objects within a drawing context, including coordinate system and what a "pixel" measurement means in a scalable context.
... the grid for all elements,
svg uses a coordinate system or grid system similar to the one used by canvas (and by a whole lot of other computer drawing routines).
... in the most basic case one pixel in an
svg document maps to one pixel on the output device (a.k.a.
...And 8 more matches
SVGFEOffsetElement - Web APIs
the
svgfeoffsetelement interface corresponds to the <feoffset> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 7 more matches
SVGFEPointLightElement - Web APIs
the
svgfepointlightelement interface corresponds to the <fepointlight> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 7 more matches
SVGLengthList - Web APIs
svg length list interface the
svglengthlist defines a list of
svglength objects.
... an
svglengthlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... note: starting in gecko 5.0,the
svglengthlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear()
svglength initialize(in
svglength newitem)
svglength getitem(in unsigned long index)
svglength insertitembefore(in
svglength newitem, in unsigned long index)
svglength replaceitem(in
svglength newitem, in unsigned long index)
svglength removeitem(in unsigned long index)
svglength appenditem(in
svglength newitem) properties readonly unsigned long numberofitems readonly unsigned long length normative document
svg 1.1 (2nd edition) properties name type description numberofitems...
...And 7 more matches
SVGPointList - Web APIs
svg point list interface the
svgpointlist defines a list of
svgpoint objects.
... an
svgpointlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... interface overview also implement none methods void clear()
svgpoint initialize(in
svgpoint newitem)
svgpoint getitem(in unsigned long index)
svgpoint insertitembefore(in
svgpoint newitem, in unsigned long index)
svgpoint replaceitem(in
svgpoint newitem, in unsigned long index)
svgpoint removeitem(in unsigned long index)
svgpoint appenditem(in
svgpoint newitem) properties readonly unsigned long numberofitems normative document
svg 1.1 (2nd edition) properties ...
...And 7 more matches
SVGTextElement - Web APIs
the
svgtextelement interface corresponds to the <text> elements.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 7 more matches
begin - SVG: Scalable Vector Graphics
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the
svg document (usually the load or domcontentloaded event).
... examples offset example <
svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="35" y="60" height="15" width="0"> <animate...
...nchor="middle">6s</text> <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </
svg> begin-1-offset.
svg syncbase example <
svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" id="first" begin="0s;third.end" dur...
...And 7 more matches
cx - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,
svg { height:100% } <
svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/
svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </
svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
... 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.
...And 7 more matches
cy - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,
svg { height:100% } <
svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/
svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </
svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
... 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.
...And 7 more matches
<image> - SVG: Scalable Vector Graphics
the <image>
svg element includes images inside
svg documents.
... it can display raster image files or other
svg files.
... the only image formats
svg software must support are jpeg, png, and other
svg files.
...And 7 more matches
Basic Transformations - SVG: Scalable Vector Graphics
an example: <
svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </
svg> all following transformations are summed up in an element's transform attribute.
... <
svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </
svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0).
...use the rotate() transformation for this: <
svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </
svg> this example shows a square that is rotated by 45 degrees.
...And 7 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
most
svg you'll find around the web use inline css, but there are advantages and disadvantages associated with each type.
... <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> in addition, you can specify the opacity of either the fill or stroke separately in
svg.
... <?xml version="1.0" standalone="no"?> <
svg width="160" height="140" xmlns="http://www.w3.org/2000/
svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </
svg> the stroke-width ...
...And 7 more matches
SVG General - Archive of obsolete content
on this page you will find some simple, general information on
svg markup.
... hopefully, enough to get you creating some
svg images.
... you will also find some general purpose scripting helpers, that should make scripting
svg a little easier.
...And 6 more matches
SVGAnimateElement - Web APIs
the
svganimateelement interface corresponds to the <animate> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGAnimatedPathData - Web APIs
svg animated path data interface the
svganimatedpathdata interface supports elements which have a 'd' attribute which holds
svg path data, and supports the ability to animate that attribute.
... interface overview also implement none methods none properties
svgpathseglist animatednormalizedpathseglist
svgpathseglist animatedpathseglist
svgpathseglist normalizedpathseglist
svgpathseglist pathseglist normative document
svg 1.1 (2nd edition) properties this interface also inherits properties from its parent,
svgpathelement.
... name type description animatednormalizedpathseglist
svgpathseglist provides access to the current animated contents of the 'd' attribute in a form where all path data commands are expressed in terms of the following subset of
svgpathseg types:
svg_pathseg_moveto_abs (m),
svg_pathseg_lineto_abs (l),
svg_pathseg_curveto_cubic_abs (c) and
svg_pathseg_closepath (z).
...And 6 more matches
SVGClipPathElement - Web APIs
the
svgclippathelement interface provides access to the properties of <clippath> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGFEDistantLightElement - Web APIs
the
svgfedistantlightelement interface corresponds to the <fedistantlight> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGFEImageElement - Web APIs
the
svgfeimageelement interface corresponds to the <feimage> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGFilterPrimitiveStandardAttributes - Web APIs
the
svgfilterprimitivestandardattributes interface defines the set of dom attributes that are common across the filter primitive interfaces.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgfilterprimitivestandardattributes" target="_top"><rect x="1" y="1" width="360" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgfilterprimitivestandardattributes</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties
svgfilterprimitivestandardat...
...tributes.x read only an
svganimatedlength corresponding to the x attribute of the given element.
...And 6 more matches
SVGGElement - Web APIs
the
svggelement interface corresponds to the <g> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGPathSegList - Web APIs
svg path segment list interface this interface defines a list of
svgpathseg objects.
... interface overview also implement none methods void clear()
svgpathseg initialize(in
svgpathseg newitem)
svgpathseg getitem(in unsigned long index)
svgpathseg insertitembefore(in
svgpathseg newitem, in unsigned long index)
svgpathseg replaceitem(in
svgpathseg newitem, in unsigned long index)
svgpathseg removeitem(in unsigned long index)
svgpathseg appenditem(in
svgpathseg newitem) properties readonly unsigned long numberofitems normative document
svg 1.1...
... initialize(in
svgpathseg newitem)
svgpathseg clears all existing current items from the list and re-initializes the list to hold the single item specified by newitem.
...And 6 more matches
SVGPolygonElement - Web APIs
the
svgpolygonelement interface provides access to the properties of <polygon> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGPolylineElement - Web APIs
the
svgpolylineelement interface provides access to the properties of <polyline> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGScriptElement - Web APIs
the
svgscriptelement interface corresponds to the
svg <script> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGStopElement - Web APIs
the
svgstopelement interface corresponds to the <stop> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
SVGSwitchElement - Web APIs
the
svgswitchelement interface corresponds to the <switch> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 6 more matches
fill - SVG: Scalable Vector Graphics
for shapes and text it's a presentation attribute that defines the color (or any
svg paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation.
... html,body,
svg { height:100% } <
svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/
svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="40" fill="url(#m...
... --> <circle cx="250" cy="50" r="20"> <animate attributetype="xml" attributename="r" from="0" to="40" dur="5s" fill="freeze" /> </circle> </
svg> altglyph warning: as of
svg2 <altglyph> is deprecated and shouldn't be used.
...And 6 more matches
viewBox - SVG: Scalable Vector Graphics
the viewbox attribute defines the position and dimension, in user space, of an
svg viewport.
...the numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated
svg element (not the browser viewport).
... html,body,
svg { height:100% }
svg:not(:root) { display: inline-block; } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </
svg> <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox th...
...And 6 more matches
Texts - SVG: Scalable Vector Graphics
« previousnext » when talking about text in
svg we have to differentiate two almost completely separate topics.
... the one is the inclusion and display of text in an image, and the other are
svg fonts.
... the latter may be described in a later section of the tutorial, while we will focus completely on the first part: bringing text into an
svg image.
...And 6 more matches
SVG - MDN Web Docs Glossary: Definitions of Web-related terms
scalable vector graphics (
svg) is a 2d vector image format based on an xml syntax.
... the w3c began work on
svg in the late 1990s, but
svg only became popular when internet explorer 9 came out with
svg support.
... all major browsers now support
svg.
...And 5 more matches
SVGAnimateMotionElement - Web APIs
the
svganimatemotionelement interface corresponds to the <animatemotion> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGAnimateTransformElement - Web APIs
the
svganimatetransformelement interface corresponds to the <animatetransform> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGCursorElement - Web APIs
the
svgcursorelement interface provides access to the properties of <cursor> elements, as well as methods to manipulate them.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGDefsElement - Web APIs
the
svgdefselement interface corresponds to the <defs> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGFEComponentTransferElement - Web APIs
the
svgfecomponenttransferelement interface corresponds to the <fecomponenttransfer> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGFEFuncAElement - Web APIs
the
svgfefuncaelement interface corresponds to the <fefunca> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGFEFuncBElement - Web APIs
the
svgfefuncbelement interface corresponds to the <fefuncb> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGFEFuncGElement - Web APIs
the
svgfefuncgelement interface corresponds to the <fefuncg> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGFEFuncRElement - Web APIs
the
svgfefuncrelement interface corresponds to the <fefuncr> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGFEMergeNodeElement - Web APIs
the
svgfemergenodeelement interface corresponds to the <femergenode> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGFETileElement - Web APIs
the
svgfetileelement interface corresponds to the <fetile> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGMPathElement - Web APIs
the
svgmpathelement interface corresponds to the <mpath> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGRect - Web APIs
the
svgrect represents a rectangle.
... an
svgrect object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgrect" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgrect</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties
svgrect.x the exact effect of this coordinate depends on each element.
...And 5 more matches
SVGSetElement - Web APIs
the
svgsetelement interface corresponds to the <set> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGSymbolElement - Web APIs
the
svgsymbolelement interface corresponds to the <symbol> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGTSpanElement - Web APIs
the
svgtspanelement interface represents a <tspan> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
SVGTitleElement - Web APIs
the
svgtitleelement interface corresponds to the <title> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 5 more matches
class - SVG: Scalable Vector Graphics
«
svg attribute reference home assigns a class name or set of class names to an element.
... you can use this class to style
svg content using css.
... 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.
...And 5 more matches
end - SVG: Scalable Vector Graphics
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the
svg document (usually the load or domcontentloaded event).
... indefinite the end of the animation will be determined by an
svganimationelement.endelement() method call.
... examples offset example <
svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" begin="0s" end="6s" fill="freeze" /> </rect> <rect x="10" y="85" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" begin="0s" end="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y=...
...And 5 more matches
fill-rule - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/
svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity.
... --> <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.
... example html,body,
svg { height:100% } <
svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/
svg"> <!-- effect of nonzero fill rule on crossing path segments --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="nonzero" stroke="red" d="m110,0 h90 v90 h-...
...And 5 more matches
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients
svg <
svg width="220" height="150" xmlns="http://www.w3.org/2000/
svg"> <defs> <lineargradient id="padgradient" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="33%" x2="67%"> <stop offset="0%" s...
..." x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> </defs> <rect fill="url(#padgradient)" x="10" y="0" width="200" height="40"/> <rect fill="url(#reflectgradient)" x="10" y="50" width="200" height="40"/> <rect fill="url(#repeatgradient)" x="10" y="100" width="200" height="40"/> </
svg> result notice that the middle third of each gradient is the same.
... examples of spreadmethod with radial gradients
svg <
svg width="340" height="120" xmlns="http://www.w3.org/2000/
svg"> <defs> <radialgradient id="radialpadgradient" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialreflectgradient" spreadmethod="reflect" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialrepeatgradient...
...And 5 more matches
stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/
svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- 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.
... example html,body,
svg { height:100% } <
svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/
svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </
svg> round the round value indicates that at the end of each subpath the stroke will be extend...
...And 5 more matches
x1 - SVG: Scalable Vector Graphics
the x1 attribute is used to specify the first x-coordinate for drawing an
svg element that requires more than one coordinate.
... two elements are using this attribute: <line>, and <lineargradient> 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> line for <line>, x1 defines the x coordinate of the starting point of the line.
... 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 vector used to map the gradient stop values.
...And 5 more matches
x2 - SVG: Scalable Vector Graphics
the x2 attribute is used to specify the second x-coordinate for drawing an
svg element that requires more than one coordinate.
... two elements are using this attribute: <line>, and <lineargradient> 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> line for <line>, x2 defines the x coordinate of the ending point of the line.
... 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 used to map the gradient stop values.
...And 5 more matches
y1 - SVG: Scalable Vector Graphics
the y1 attribute is used to specify the first y-coordinate for drawing an
svg element that requires more than one coordinate.
... two elements are using this attribute: <line>, and <lineargradient> 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> line for <line>, y1 defines the y coordinate of the starting point of the line.
... 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 used to map the gradient stop values.
...And 5 more matches
y2 - SVG: Scalable Vector Graphics
the y2 attribute is used to specify the second y-coordinate for drawing an
svg element that requires more than one coordinate.
... two elements are using this attribute: <line>, and <lineargradient> 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> line for <line>, y2 defines the y coordinate of the ending point of the line.
... 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 used to map the gradient stop values.
...And 5 more matches
<use> - SVG: Scalable Vector Graphics
the <use> element takes nodes from within the
svg document, and duplicates them somewhere else.
... html,body,
svg { height:100% } <
svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/
svg"> <circle id="mycircle" cx="5" cy="5" r="4" stroke="blue"/> <use href="#mycircle" x="10" fill="blue"/> <use href="#mycircle" x="20" fill="white" stroke="red"/> <!-- stroke="red" will be ignored here, as stroke was already set on mycircle.
... --> </
svg> the effect is the same as if the nodes were deeply cloned into a non-exposed dom, then pasted where the use element is, much like cloned template elements in html5.
...And 5 more matches
Specification Deviations - SVG: Scalable Vector Graphics
there are a few places where we have consciously decided to make gecko deviate from or extend the
svg specification.
... the 'class' and 'style' attributes unlike html and mathml, the
svg specification does not specify the 'style' and 'class' attributes on all
svg elements.
... nevertheless, to allow mozilla to more cleanly share internal 'class' and 'style' related code, we will implement these attributes on all
svg elements as of firefox 3.
...And 5 more matches
SVGAnimatedString - Web APIs
the
svganimatedstring interface represents string attributes which can be animated from each
svg declaration.
... you need to create
svg attribute before doing anything else, everything should be declared inside this.
... properties
svganimatedstring.animval read only this is a domstring representing the animation value.
...And 4 more matches
SVGColorProfileElement - Web APIs
the
svgcolorprofileelement interface corresponds to the <color-profile> element.
... properties
svgcolorprofileelement.local a domstring corresponding to the local attribute of the given element.
...
svgcolorprofileelement.name a domstring corresponding to the name attribute of the given element.
...And 4 more matches
SVGDescElement - Web APIs
the
svgdescelement interface corresponds to the <desc> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 4 more matches
SVGFEFloodElement - Web APIs
the
svgfefloodelement interface corresponds to the <feflood> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 4 more matches
SVGFEMergeElement - Web APIs
the
svgfemergeelement interface corresponds to the <femerge> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 4 more matches
SVGMetadataElement - Web APIs
the
svgmetadataelement interface corresponds to the <metadata> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/nod...
...ht="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="...
...And 4 more matches
SVGTests - Web APIs
the
svgtests interface is used to reflect conditional processing attributes and is mixed into other interfaces for elements that support these attributes.
... properties
svgtests.requiredfeatures read only an
svgstringlist corresponding to the requiredfeatures attribute of the given element.
...
svgtests.requiredextensions read only an
svgstringlist corresponding to the requiredextensions attribute of the given element.
...And 4 more matches
overflow - SVG: Scalable Vector Graphics
if the overflow property has the value hidden or scroll, a clip of the exact size of the
svg viewport is applied.
... when scroll is specified on an <
svg> element, a scrollbar or panner is normally shown for the
svg viewport whether or not any of its content is clipped.
... within
svg content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip.
...And 4 more matches
points - SVG: Scalable Vector Graphics
two elements are using this attribute: <polyline>, and <polygon> html,body,
svg { height:100% } <
svg viewbox="-10 -10 220 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"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by ...
... --> </
svg> polyline for <polyline>, points defines a list of points, each representing a vertex of the line 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"> <!-- 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.
...And 4 more matches
r - SVG: Scalable Vector Graphics
two elements are using this attribute: <circle>, and <radialgradient> html,body,
svg { height:100% } <
svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/
svg"> <radialgradient r="0" id="mygradient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="50%" id="mygradient050"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="100%" id="mygradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <...
...rect x="20" y="120" width="60" height="60" fill="url(#mygradient000)" /> <rect x="120" y="120" width="60" height="60" fill="url(#mygradient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#mygradient100)" /> </
svg> circle for <circle>, r defines the radius of the circle and therefor its size.
... 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.
...And 4 more matches
target - SVG: Scalable Vector Graphics
this attribute specifies the name of the browsing context (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body,
svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <
svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/
svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</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.
...use _self to replace the current
svg document.
...And 4 more matches
<a> - SVG: Scalable Vector Graphics
the <a>
svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other url.
...
svg's <a> element is a container, which means you can create a link around text (like in html) but also around any shape.
... @namespace
svg url(http://www.w3.org/2000/
svg); html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <!-- a link around a shape --> <a href="/docs/web/
svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/
svg/element/text"> <text x="50" y="90" text-anchor="middle"> <circle> </text> </a> </
svg> /* as
svg does not provide a default visual style for links, it's considered best practice to add some */ @namespace
svg url(http://www.w3.org/2000/
svg); /* necessary to select only
svg <a> elements, and not also html’s.
...And 4 more matches
<marker> - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> ...
... </defs> <!-- coordinate axes with a arrowhead in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </
svg> attributes markerheight this attribute defines the height of the marker viewport.
... value type: auto|auto-start-reverse|<angle> ; default value: 0; 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.
...And 4 more matches
Clipping and masking - SVG: Scalable Vector Graphics
but when you try to create a semicircle in
svg, you will find out the use of the following properties quickly.
... creating clips we create the above mentioned semicircle based on a circle element: <
svg version="1.1" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> </
svg> centered at (100,100) a circle with radius 100 is painted.
... <
svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="gradient"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </lineargradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" /> </mask> </defs> <rec...
...And 4 more matches
SVGAltGlyphElement - Web APIs
the
svgaltglyphelement interface represents an <altglyph> element.
... properties this interface also inherits properties from its parent interface,
svggraphicselement.
...
svgaltglyphelement.glyphref it corresponds to the attribute glyphref on the given element.
...And 3 more matches
SVGAnimatedAngle - Web APIs
svg animated angle interface the
svganimatedangle interface is used for attributes of basic type <angle> which can be animated.
... interface overview also implement none methods none properties readonly
svgangle baseval readonly
svgangle animval normative document
svg 1.1 (2nd edition) properties name type description baseval
svgangle the base value of the given attribute before applying any animations.
... animval
svgangle a read only
svgangle representing the current animated value of the given attribute.
...And 3 more matches
SVGAnimatedLengthList - Web APIs
svg animated length list interface the
svganimatedlengthlist interface is used for attributes of type
svglengthlist which can be animated.
... interface overview also implement none methods none properties readonly
svglengthlist baseval readonly
svglengthlist animval normative document
svg 1.1 (2nd edition) properties name type description baseval
svglengthlist the base value of the given attribute before applying any animations.
... animval
svglengthlist a read only
svglengthlist representing the current animated value of the given attribute.
...And 3 more matches
SVGAnimatedNumberList - Web APIs
svg animated number list interface the
svganimatednumber interface is used for attributes which take a list of numbers and which can be animated.
... interface overview also implement none methods none properties readonly
svgnumberlist baseval readonly
svgnumberlist animval normative document
svg 1.1 (2nd edition) properties
svganimatednumberlist.baseval read only is a
svgnumberlist that represents the base value of the given attribute before applying any animations.
...
svganimatednumberlist.animval read only is a read only
svgnumberlist that represents the current animated value of the given attribute.
...And 3 more matches
SVGAnimatedPoints - Web APIs
svg animated points interface the
svganimatedpoints interface supports elements which have a points attribute which holds a list of coordinate values and which support the ability to animate that attribute.
... additionally, the points attribute on the original element accessed via the xml dom (e.g., using the getattribute() method call) will reflect any changes made to the
svganimatedpoints.points attribut.
... interface overview also implement none methods none properties readonly
svgpointlist points readonly
svgpointlist animatedpoints normative document
svg 1.1 (2nd edition) properties name type description points
svgpointlist provides access to the base (i.e., static) contents of the points attribute.
...And 3 more matches
SVGAnimatedPreserveAspectRatio - Web APIs
svg animated preserveaspectratio interface the
svganimatedpreserveaspectratio interface is used for attributes of type
svgpreserveaspectratio which can be animated.
... interface overview also implement none methods none properties readonly float baseval readonly float animval normative document
svg 1.1 (2nd edition) properties
svganimatedpreserveaspectratio.baseval read only is a
svgpreserveaspectratio that represents the base value of the given attribute before applying any animations.
...
svganimatedpreserveaspectratio.animval read only is a
svgpreserveaspectratio that represents the current animated value of the given attribute.
...And 3 more matches
SVGAnimatedRect - Web APIs
the
svganimatedrect interface is used for attributes of basic
svgrect which can be animated.
... interface overview also implement none methods none properties readonly
svgrect baseval readonly
svgrect animval normative document
svg 1.1 (2nd edition) properties name type description baseval
svgrect the base value of the given attribute before applying any animations.
... animval
svgrect a read only
svgrect representing the current animated value of the given attribute.
...And 3 more matches
SVGAnimatedTransformList - Web APIs
svg animated transform list interface the
svganimatedtransformlist interface is used for attributes which take a list of numbers and which can be animated.
... interface overview also implement none methods none properties readonly
svgtransformlist baseval readonly
svgtransformlist animval normative document
svg 1.1 (2nd edition) properties name type description baseval
svgtransformlist the base value of the given attribute before applying any animations.
... animval
svgtransformlist a read only
svgtransformlist representing the current animated value of the given attribute.
...And 3 more matches
SVGDocument - Web APIs
svg document interface when an "
svg" element is embedded inline as a component of a document from another namespace, such as when an "
svg" element is embedded inline within an xhtml document, then an
svgdocument object will not exist; instead, the root object in the document object hierarchy will be a document object of a different type, such as an htmldocument object.
... interface overview also implement none methods none properties domstring domain domstring referrer
svgsvgelement rootelement domstring title domstring url normative document
svg 1.1 (2nd edition) properties name type description domain domstring the domain name of the server that served the document, or a null string if the server cannot be identified by a domain nam...
... rootelement
svgsvgelement the root "
svg" in the document hierarchy.
...And 3 more matches
SVGExternalResourcesRequired - Web APIs
the
svgexternalresourcesrequired interface defines an interface which applies to all elements where this element or one of its descendants can reference an external resource.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgexternalresourcesrequired</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the
svg 2 specific...
... properties
svgexternalresourcesrequired.externalresourcesrequired corresponds to the externalresourcesrequired attribute of the given element.
...And 3 more matches
SVGFontElement - Web APIs
the
svgfontelement interface corresponds to the <font> elements.
... object-oriented access to the attributes of the <font> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgfontelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgfontelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, ...
...And 3 more matches
SVGFontFaceElement - Web APIs
the
svgfontfaceelement interface corresponds to the <font-face> elements.
... object-oriented access to the attributes of the <font-face> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgfontfaceelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgfontfaceelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its ...
...And 3 more matches
SVGFontFaceFormatElement - Web APIs
the
svgfontfaceformatelement interface corresponds to the <font-face-format> elements.
... object-oriented access to the attributes of the <font-face-format> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgfontfaceformatelement" target="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgfontfaceformatelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits propert...
...And 3 more matches
SVGFontFaceNameElement - Web APIs
the
svgfontfacenameelement interface corresponds to the <font-face-name> elements.
... object-oriented access to the attributes of the <font-face-name> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgfontfacenameelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgfontfacenameelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties ...
...And 3 more matches
SVGFontFaceSrcElement - Web APIs
the
svgfontfacesrcelement interface corresponds to the <font-face-src> elements.
... object-oriented access to the attributes of the <font-face-src> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgfontfacesrcelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgfontfacesrcelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties fr...
...And 3 more matches
SVGFontFaceUriElement - Web APIs
the
svgfontfaceurielement interface corresponds to the <font-face-uri> elements.
... object-oriented access to the attributes of the <font-face-uri> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgfontfaceurielement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgfontfaceurielement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties fr...
...And 3 more matches
SVGGlyphElement - Web APIs
the
svgglyphelement interface corresponds to the <glyph> element.
... object-oriented access to the attributes of the <glyph> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgglyphelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgglyphelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the
svg 2 specification.
...And 3 more matches
SVGHKernElement - Web APIs
the
svghkernelement interface corresponds to the <hkern> elements.
... object-oriented access to the attributes of the <hkern> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svghkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svghkernelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent...
...And 3 more matches
SVGMissingGlyphElement - Web APIs
the
svgmissingglyphelement interface corresponds to the <missing-glyph> elements.
... object-oriented access to the attributes of the <missing-glyph> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgmissingglyphelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgmissingglyphelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties ...
...And 3 more matches
SVGNumber - Web APIs
the
svgnumber interface corresponds to the <number> basic data type.
... an
svgnumber object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... properties
svgnumber.value a float representing the number.
...And 3 more matches
SVGTRefElement - Web APIs
the
svgtrefelement interface corresponds to the <tref> elements.
... object-oriented access to the attributes of the <tref> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgtrefelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgtrefelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, ...
...And 3 more matches
SVGUnitTypes - Web APIs
the
svgunittypes interface defines a commonly used set of constants used for reflecting gradientunits, patterncontentunits and other similar attributes.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgunittypes" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgunittypes</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description
svg_unit_type_unknown 0 the...
...
svg_unit_type_userspaceonuse 1 corresponds to the value userspaceonuse.
...And 3 more matches
SVGVKernElement - Web APIs
the
svgvkernelement interface corresponds to the <vkern> elements.
... object-oriented access to the attributes of the <vkern> element via the
svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgvkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgvkernelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent...
...And 3 more matches
SVGViewElement - Web APIs
the
svgviewelement interface provides access to the properties of <view> elements, as well as methods to manipulate them.
... properties this interface also inherits properties from its parent interface,
svgelement.
...
svgviewelement.viewtarget an
svgstringlist corresponding to the viewtarget attribute of the given <view> element.
...And 3 more matches
data-* - SVG: Scalable Vector Graphics
the data-*
svg attributes are called custom data attributes.
... they let
svg markup and its resulting dom share information that standard attributes can't, usually for scripting purposes.
... their custom data are available via the
svgelement interface of the element the attributes belong to, with the
svgelement.dataset property.
...And 3 more matches
gradientTransform - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <radialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gra...
... gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop 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.
... scalable vector graphics (
svg) 2the definition of 'gradienttransformation for <lineargradient>' in that specification.
...And 3 more matches
rx - SVG: Scalable Vector Graphics
two elements are using this attribute: <ellipse>, and <rect> html,body,
svg { height:100% } <
svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/
svg"> <ellipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </
svg> ellipse for <ellipse>, rx defines the x-radius of the shape.
... 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.
...And 3 more matches
ry - SVG: Scalable Vector Graphics
two elements are using this attribute: <ellipse>, and <rect> html,body,
svg { height:100% } <
svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/
svg"> <ellipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </
svg> ellipse for <ellipse>, ry defines the y-radius of the shape.
... 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.
...And 3 more matches
<foreignObject> - SVG: Scalable Vector Graphics
the <foreignobject>
svg element includes elements from a different xml namespace.
... html,body,
svg { height:100% } <
svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/
svg"> <style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html text into
svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of
svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the context of an
svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... </div> </foreignobject> </
svg> attributes height the height of the foreignobject.
...And 3 more matches
<metadata> - SVG: Scalable Vector Graphics
the <metadata>
svg element adds metadata to
svg content.
... usage context categoriesdescriptive elementpermitted contentany elements or character data attributes global attributes core attributes global event attributes specific attributes none dom interface this element implements the
svgmetadataelement interface.
... example <
svg width="400" viewbox="0 0 400 300" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-
svg-connections-in-rdf#"> <rdf:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#computera"/> </rdf:description> <rdf:description about="#cableb"> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#computerb"/> </rdf:description> <rdf:description about="#cablen"> <connect:ends rdf:resource="#socket5"/> <connect:ends>everything</connect:ends> </rdf:description> <rdf:descripti...
...And 3 more matches
<pattern> - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="0 0 230 100" xmlns="http://www.w3.org/2000/
svg"> <defs> <pattern id="star" viewbox="0,0,10,10" width="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </
svg> attributes height this attribute determines the height of the pattern tile.
... value type: userspaceonuse|objectboundingbox; default value: objectboundingbox; 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 viewbox this attribute defines the bound of the
svg viewport for the pattern fragment.
...And 3 more matches
<script> - SVG: Scalable Vector Graphics
the
svg script element allows to add scripts to an
svg document.
... while
svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,
svg { height:100% } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.styl...
...e.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </
svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element.
...And 3 more matches
<switch> - SVG: Scalable Vector Graphics
the <switch>
svg element evaluates any requiredfeatures, requiredextensions and systemlanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true.
... usage context categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <
svg>, <switch>, <text>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired transform dom interface this element implements the
svgswitchelement interface.
...
svg <switch> example this example demonstrates showing different text content depending on the browser's language settings.
...And 3 more matches
<symbol> - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="0 0 80 20" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- our symbol in its own coordinate system --> <symbol id="mydot" width="10" height="10" viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- a grid to materialize our symbol positioning --> <path d="m0,10 h80 m10,0 v20 m25,0 v20 m40,0 v20 m55,0 v20 m70,0 v20" fill="non...
...e" stroke="pink" /> <!-- all instances of our symbol --> <use xlink:href="#mydot" x="5" y="5" style="opacity:1.0" /> <use xlink:href="#mydot" x="20" y="5" style="opacity:0.8" /> <use xlink:href="#mydot" x="35" y="5" style="opacity:0.6" /> <use xlink:href="#mydot" x="50" y="5" style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5" style="opacity:0.2" /> </
svg> attributes height this attribute determines the height of the symbol.
... 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.
...And 3 more matches
<text> - SVG: Scalable Vector Graphics
the
svg <text> element draws a graphics element consisting of text.
... it's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other
svg graphics element.
... if text is included in
svg not inside of a <text> element, it is not rendered.
...And 3 more matches
Basic shapes - SVG: Scalable Vector Graphics
« previousnext » there are several basic shapes used for most
svg drawing.
...however, since they're used in most
svg documents, it's necessary to give them some sort of introduction.
...some are slightly redundant in that they can be created by other shapes, but they're all there for your convenience and to keep your
svg documents as short and as readable as possible.
...And 3 more matches
SVGAltGlyphDefElement - Web APIs
the
svgaltglyphdefelement interface corresponds to the <altglyphdef> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgaltglyphdefelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgaltglyphdefelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the
svg 2 specification.
... properties this interface doesn't implement any specific properties, but inherits properties from its parent interface,
svgelement.
...And 2 more matches
SVGAltGlyphItemElement - Web APIs
the
svgaltglyphitemelement interface corresponds to the <altglyphitem> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgaltglyphitemelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgaltglyphitemelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the
svg 2 specification.
... properties this interface doesn't implement any specific properties, but inherits properties from its parent interface,
svgelement.
...And 2 more matches
SVGAnimateColorElement - Web APIs
the
svganimatecolorelement interface corresponds to the <animatecolor> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svganimatecolorelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svganimatecolorelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties ...
...from its parent,
svganimationelement.
...And 2 more matches
SVGAnimatedLength - Web APIs
svg animated length interface the
svganimatedlength interface is used for attributes of basic type <length> which can be animated.
... interface overview also implement none methods none properties readonly
svglength baseval readonly
svglength animval normative document
svg 1.1 (2nd edition) properties name type description baseval
svglength the base value of the given attribute before applying any animations.
... animval
svglength if the given attribute or property is being animated, contains the current animated value of the attribute or property.
...And 2 more matches
SVGFitToViewBox - Web APIs
svg fit to view box interface the
svgfittoviewbox interface is used to reflect the viewbox and preserveaspectratio attributes, and is mixed in to other interfaces for elements that support these two attributes.
... interface overview also implement none methods none properties
svganimatedpreserveaspectratio preserveaspectratio
svganimatedrect viewbox normative document
svg 1.1 (2nd edition) properties name type description preserveaspectratio
svganimatedpreserveaspectratio corresponds to attribute preserveaspectratio on the given element.
... viewbox
svganimatedrect corresponds to attribute viewbox on the given element.
...And 2 more matches
SVGPathElement.getPointAtLength() - Web APIs
the
svgpathelement.getpointatlength() method returns the point at a given distance along the path.
... note: in
svg 2 this property was moved to the
svggeometryelement interface, from which the
svgpathelement inherits it.
... syntax
svgpoint someelement.getpointatlength(float distance); parameters distance a float referring to the distance along the path.
...And 2 more matches
SVGURIReference - Web APIs
the
svgurireference interface is used to reflect the href attribute and the deprecated xlink:href attribute.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgurireference" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgurireference</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties
svgurireference.href read only an
svganimatedstring that represents t...
...on getting href, an
svganimatedstring object is returned that reflects the href attribute, and if the element is defined to support the deprecated xlink:href attribute, additionally reflects that deprecated attribute.
...And 2 more matches
SVGZoomAndPan - Web APIs
the
svgzoomandpan interface is used to reflect the zoomandpan attribute, and is mixed in to other interfaces for elements that support this attribute.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgzoomandpan" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgzoomandpan</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description
svg_zoomandpan_unknown 0 ...
...
svg_zoomandpan_disable 1 corresponds to the value disable.
...And 2 more matches
alignment-baseline - SVG: Scalable Vector Graphics
svg 2 introduces some changes to the definition of this property.
... example <
svg width="300" height="120" viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/
svg"> <!-- materialisation of anchors --> <path d="m60,10 l60,110 m30,10 l300,10 m30,65 l300,65 m30,110 l300,110 " stroke="grey" /> <!-- anchors in action --> <text alignment-baseline="hanging" x="60" y="10">a hanging</text> <text alignment-baseline="middle" x="60" y="65">a middle</text> <text alignment-baseline="ba...
...seline" x="60" y="110">a baseline</text> <!-- materialisation of anchors --> <circle cx="60" cy="10" r="3" fill="red" /> <circle cx="60" cy="65" 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> for object alignment in other elements (such as <text>), see dominant-baseline.
...And 2 more matches
clip-path - SVG: Scalable Vector Graphics
as 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> html,body,
svg { height:100% } <
svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/
svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-rig...
...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.
...And 2 more matches
display - SVG: Scalable Vector Graphics
html, body,
svg { height: 100%; } <
svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/
svg"> <!-- here the yellow rectangle is displayed --> <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect> <rect x="20" y="20" width="60" height="60" fill="yellow"></rect> <!-- here the yellow rectangle is not displayed --> <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect> <r...
...ect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect> </
svg> usage notes default value inline value [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where <display-outside> = block | inline | run-in<display-inside> = flow | flow-root | table | flex | grid | ruby<display-listitem> = <display-outside>?
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'display' in that specification.
...And 2 more matches
dominant-baseline - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on the text content elements, including: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body,
svg { height: 100%; } text { font: bold 14px verdana, helvetica, arial, sans-serif; } <
svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/
svg"> <path d="m20,20 l180,20 m20,50 l180,50 m20,80 l180,80" stroke="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.
... example
svg <
svg width="400" height="300" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/
svg"> <!-- materialization of anchors --> <path d="m60,20 l60,270 m30,20 l400,20 m30,70 l400,70 m30,120 l400,120 m30,170 l400,170 m30,220 l400,220 m30,270 l400,270" stroke="grey" /> <!-- anchors in action --> <text dominant-baseline...
...And 2 more matches
fx - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body,
svg { height: 100%; } <
svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/
svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <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 coincides with the presentational value of cx for the element whether the value for cx was inherited or not.
... 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="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63"...
...And 2 more matches
fy - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body,
svg { height: 100%; } <
svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/
svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <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 coincides with the presentational value of cy for the element whether the value for cy was inherited or not.
... 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="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63"...
...And 2 more matches
gradientUnits - SVG: Scalable Vector Graphics
percentages represent values relative to the current
svg viewport.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'gradientunits for <radialgradient>' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 2the definition of 'gradientunits for <lineargradient>' in that specification.
...And 2 more matches
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.
... note: you should avoid the use of id values that would be parsed as an
svg view specification (e.g., mydrawing.
svg#
svgview(viewbox(0,200,1000,1000))) or a basic media fragment when used as a url target fragment.
...a stand-alone
svg document uses xml 1.0 syntax, which specifies that valid ids only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.
...And 2 more matches
in - SVG: Scalable Vector Graphics
backgroundimage this keyword represents an image snapshot of the
svg document under the filter region at the time that the <filter> element was invoked.
... html <div style="width: 420px; height: 220px;"> <
svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="backgroundmultiply"> <!-- this will not work.
... --> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </
svg> <
svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
...And 2 more matches
path - SVG: Scalable Vector Graphics
two elements are using this attribute: <animatemotion> and <textpath> html, body,
svg { height: 100%; } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <path id="mypath" fill="none" stroke="silver" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <text> <textpath path="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50"> quick brown fox jumps over the lazy dog.
... </textpath> </text> </
svg> animatemotion for <animatemotion>, path defines the motion path, expressed in the same format and interpreted the same way as the d geometric property for the <path> element.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'path for <textpath>' in that specification.
...And 2 more matches
pointer-events - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/
svg"> <!-- the circle will always intercept the mouse event.
... the rect underneath will change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </
svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribu...
...te, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <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.
...And 2 more matches
stop-color - SVG: Scalable Vector Graphics
note: with respect to gradients,
svg treats the transparent keyword differently than css.
...
svg does not calculate gradients in pre-multiplied space, so transparent really means transparent black.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'stop-color' in that specification.
...And 2 more matches
to - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> 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 attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </
svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation.
... specifications specification status comment
svg animations level 2the definition of 'to for <set>' in that specification.
... editor's draft no change
svg animations level 2the definition of 'to for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification.
...And 2 more matches
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body,
svg { height: 100%; } <
svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/
svg"> <rect x="10" y="10" width="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> </s...
... example the following example toggles the css visibility of the
svg image path.
... html <button id="nav-toggle-button" > <
svg xmlns="http://www.w3.org/2000/
svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m16.59 8.59l12 13.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </
svg> <span> click me </span> </button> css
svg { display: inline !important; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("
svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("
svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specification...
...And 2 more matches
<animate> - SVG: Scalable Vector Graphics
the
svg <animate> element provides a way to animate an attribute of an element over time.
... html,body,
svg { height:100%; margin:0; padding:0; } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </
svg> attributes 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 thi...
...s element implements the
svganimateelement interface.
...And 2 more matches
<animateMotion> - SVG: Scalable Vector Graphics
the
svg <animatemotion> element let define how an element moves along a motion path.
... html,body,
svg { height:100%; margin: 0; padding: 0; display:block; } <
svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/
svg"> <path fill="none" stroke="lightgrey" d="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> <circle r="5" fill="red"> <animatemotion dur="10s" repeatcount="indefinite" path="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </
svg> usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<mpath> attributes keypoints this attribute indicate, in the range [0,1], how far is the object along t...
...lues, 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.
...And 2 more matches
<circle> - SVG: Scalable Vector Graphics
the <circle>
svg element is an
svg basic shape, used to draw circles based on a center point and a radius.
... html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <circle cx="50" cy="50" r="50"/> </
svg> attributes cx the x-axis coordinate of the center of the circle.
... 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.
...And 2 more matches
<ellipse> - SVG: Scalable Vector Graphics
the <ellipse> element is an
svg basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
... html,body,
svg { height:100% } <
svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/
svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </
svg> attributes cx the x position of the ellipse.
... value type: <number> ; default value: none; animatable: yes note: starting with
svg2 cx, cy, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element.
...And 2 more matches
<feColorMatrix> - SVG: Scalable Vector Graphics
the <fecolormatrix>
svg filter element changes colors based on a transformation matrix.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in type values dom interface this element implements the
svgfecolormatrixelement interface.
... example
svg <
svg width="100%" height="100%" viewbox="0 0 150 500" preserveaspectratio="xmidymid meet" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" ...
...And 2 more matches
<feComponentTransfer> - SVG: Scalable Vector Graphics
th <fecomponenttransfer>
svg filter primitive performs color-component-wise remapping of data for each pixel.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<fefunca>, <fefuncr>, <fefuncb>, <fefuncg> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the
svgfecomponenttransferelement interface.
... example
svg <
svg xmlns="http://www.w3.org/2000/
svg" viewbox="0 0 600 300"> <defs> <lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#800080"></stop> </lineargradient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="identity"></fefuncr> <fefuncg type="identity"></fefuncg> <fefuncb type="identity"></fefuncb> <fefunca type="identity"></fefunca> <...
...And 2 more matches
<feComposite> - SVG: Scalable Vector Graphics
the <fecomposite>
svg filter primitive performs the combination of two input images pixel-wise in image space using one of the porter-duff compositing operations: over, in, atop, out, xor, and lighter.
...he attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes » presentation attributes » filter primitive attributes » class style specific attributes in in2 operator k1 k2 k3 k4 dom interface this element implements the
svgfecompositeelement interface.
... example
svg <
svg width="330" height="195" viewbox="0 0 1100 650" version="1.1" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> <desc>define two sets of six filters for each of the six compositing operators.
...And 2 more matches
<feDiffuseLighting> - SVG: Scalable Vector Graphics
the <fediffuselighting>
svg filter primitive lights an image using the alpha channel as a bump map.
... attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale diffuseconstant kernelunitlength dom interface this element implements the
svgfediffuselightingelement interface.
... <
svg width="440" height="140" xmlns="http://www.w3.org/2000/
svg"> <!-- no light is applied --> <text text-anchor="middle" x="60" y="22">no light</text> <circle cx="60" cy="80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fepointlight x="150" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0"...
...And 2 more matches
<feGaussianBlur> - SVG: Scalable Vector Graphics
the <fegaussianblur>
svg filter primitive blurs the input image by the amount specified in stddeviation, which defines the bell-curve.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in stddeviation edgemode dom interface this element implements the
svgfegaussianblurelement interface.
... example simple example
svg <
svg width="230" height="120" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </
svg> result screenshotlive sample drop shadow example
svg <
svg width="120" height="120" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="60" cy="60" r="...
...And 2 more matches
<feMorphology> - SVG: Scalable Vector Graphics
the <femorphology>
svg filter primitive is used to erode or dilate the input image.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in operator radius dom interface this element implements the
svgfemorphologyelement interface.
... examples filtering
svg content
svg <
svg xmlns="http://www.w3.org/2000/
svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </
svg> css text { font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content
svg <
svg xmlns="http://www.w3.org/2000/
svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/...
...And 2 more matches
<filter> - SVG: Scalable Vector Graphics
the <filter>
svg element defines a custom filter effect by grouping atomic filter primitives.
... it is never rendered itself, but must be used by the filter attribute on
svg elements, or the filter css property for
svg/html elements.
...ted contentany number of the following elements, in any order:descriptive elementsfilter primitive elements<animate>, <set> attributes global attributes core attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes x y width height filterres filterunits primitiveunits xlink:href dom interface this element implements the
svgfilterelement interface.
...And 2 more matches
<path> - SVG: Scalable Vector Graphics
the <path>
svg element is the generic element to define a shape.
... html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <path d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </
svg> attributes d this attribute defines the shape of the path.
...description, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment
svg pathsthe definition of '<path>' in that specification.
...And 2 more matches
<rect> - SVG: Scalable Vector Graphics
the <rect> element is a basic
svg shape that draws rectangles, defined by their position, width, and height.
... html,body,
svg { height:100% } <
svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/
svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </
svg> attributes x the x coordinate of the rect.
... value type: <number> ; default value: none; animatable: yes note: starting with
svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element.
...And 2 more matches
<style> - SVG: Scalable Vector Graphics
the
svg <style> element allows style sheets to be embedded directly within
svg content.
...
svg's style element has the same attributes as the corresponding element in html (see html's <style> element).
... html,body,
svg { height:100%; margin: 0; padding: 0; } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </
svg> attributes type this attribute defines type of the style sheet language to use as a media type string.
...And 2 more matches
<tspan> - SVG: Scalable Vector Graphics
the
svg <tspan> element defines a subtext within a <text> element or another <tspan> element.
... html,body,
svg { height:100% } <
svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/
svg"> <style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana!
... </text> </
svg> attributes x the x coordinate of the starting point of the text baseline.
...And 2 more matches
Linking - SVG: Scalable Vector Graphics
the target attribute on the
svg <a> element doesn't work in mozilla firefox 1.5.
... when
svg documents are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a
svg button:</p> <object width="100" height="50" type="image/
svg+xml" data="button.
svg"/> </body> </html> button.
svg: <?xml version="1.1" encoding="utf-8"?> <
svg xmlns="http://www.w3.org/2000/
svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </
svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are clicked.
... however, target does not work with mozilla's implementation of the
svg <a> element in firefox 1.5.
...And 2 more matches
Example - SVG: Scalable Vector Graphics
in this example, we use xhtml,
svg, javascript, and the dom to animate a swarm of "motes".
...this is done completely in w3c standards–xhtml,
svg, and javascript–no flash or any vendor-specific extensions.
...view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:
svg="http://www.w3.org/2000/
svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <
svg:
svg id='display' width='400' height='300'> <
svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </
svg:
svg> <p>a swarm of motes, governed by two simple principles.
...And 2 more matches
Filter effects - SVG: Scalable Vector Graphics
filters are
svg's mechanism to create sophisticated effects.
... a basic example is to add a blur effect to
svg content.
... example filters are defined by <filter> element, which should be put in the <defs> section of your
svg file.
...And 2 more matches
Embedding SVG - Archive of obsolete content
svg is an xml based makeup language and can be embedded into other markup languages, like xhtml and xul.
... <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:
svg="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <!-- html and
svg go here --> </body> </html> example: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:
svg="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body>...
... <p>hello</p> <
svg:
svg version="1.1" baseprofile="full" width="150" height="150"> <
svg:rect x="10" y="10" width="100" height="100" fill="red"/> <
svg:circle cx="50" cy="50" r="30" fill="blue"/> </
svg:
svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:
svg="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and
svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/t...
...here.is.only.xul" xmlns:
svg="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <vbox> <label value="hello"/> <
svg:
svg version="1.1" baseprofile="full" width="150" height="150"> <
svg:rect x="10" y="10" width="100" height="100" fill="red"/> <
svg:circle cx="50" cy="50" r="30" fill="blue"/> </
svg:
svg> <label value="world"/> </vbox> </window> ...
SVGAElement.target - Web APIs
the
svgaelement.target read-only property of
svgaelement returns an
svganimatedstring object that specifies the portion of a target window, frame, pane into which a document is to be opened when a link is activated.
... syntax mylink.target = 'value'; value an
svganimatedstring indicating the ending resource target that opens the document when the link is activated.
... sample values can be found here example the code is taken from the "
svgaelement example code" ...
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'target' in that specification.
SVGAnimatedBoolean - Web APIs
svg animated boolean interface the
svganimatedboolean interface is used for attributes of type boolean which can be animated.
... interface overview also implement none methods none properties readonly boolean baseval readonly boolean animval normative document
svg 1.1 (2nd edition) properties name type description baseval boolean the base value of the given attribute before applying any animations.
... methods the
svganimatedboolean interface do not provide any specific methods.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
svganimatedbooleanchrome full support yesedge full support ≤18firefox full support yesie ?
SVGAnimatedEnumeration - Web APIs
svg animated enumeration interface the
svganimatedenumeration interface is used for attributes whose value must be a constant from a particular enumeration and which can be animated.
... interface overview also implement none methods none properties unsigned short baseval readonly unsigned short animval normative document
svg 1.1 (2nd edition) properties name type description baseval unsigned short the base value of the given attribute before applying any animations.
... methods the
svganimatedenumeration interface do not provide any specific methods.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
svganimatedenumerationchrome full support yesedge full support ≤18firefox full support yesie ?
SVGAnimatedInteger - Web APIs
svg animated integer interface the
svganimatedinteger interface is used for attributes of basic type <integer> which can be animated.
... interface overview also implement none methods none properties readonly long baseval readonly long animval normative document
svg 1.1 (2nd edition) properties name type description baseval long the base value of the given attribute before applying any animations.
... methods the
svganimatedinteger interface do not provide any specific methods.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
svganimatedintegerchrome full support yesedge full support ≤18firefox full support yesie ?
SVGAnimatedNumber - Web APIs
svg animated number interface the
svganimatednumber interface is used for attributes of basic type <number> which can be animated.
... interface overview also implement none methods none properties float baseval readonly float animval normative document
svg 1.1 (2nd edition) properties name type description baseval float the base value of the given attribute before applying any animations.
... methods the
svganimatednumber interface do not provide any specific methods.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
svganimatednumberchrome full support yesedge full support ≤18firefox full support yesie ?
SVGAnimationElement: beginEvent event - Web APIs
the beginevent event of the
svganimationelement interface is fired when the element local timeline begins to play.
... bubbles no cancelable no interface timeevent event handler property onbegin examples animated circle <
svg xmlns="http://www.w3.org/2000/
svg" width="300px" height="100px"> <title>
svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </
svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10...
...px 30px; } let
svgelem = document.queryselector('
svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you can also create an event listener for the begin event using the onbegin event handler property: animateelem.onbegin = () => { console.log('beginevent f...
...ired'); } specifications specification status comment scalable vector graphics (
svg) 2the definition of 'beginevent' in that specification.
SVGAnimationElement: endEvent event - Web APIs
the endevent event of the
svganimationelement interface is fired when at the active end of the animation is reached.
... bubbles no cancelable no interface timeevent event handler property onend examples animated circle <
svg xmlns="http://www.w3.org/2000/
svg" width="300px" height="100px"> <title>
svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </
svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; ...
...overflow-y: scroll; padding: 10px 30px; } let
svgelem = document.queryselector('
svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); let btn = document.queryselector('button'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('endevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'endevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textconten...
...ener('click', () => { btn.disabled = true; animateelem.setattribute('repeatcount', '1'); }) event handler property equivalent note that you can also create an event listener for the end event using the onend event handler property: animateelem.onend = () => { console.log('endevent fired'); } specifications specification status comment scalable vector graphics (
svg) 2the definition of 'endevent' in that specification.
SVGAnimationElement: repeatEvent event - Web APIs
the repeatevent event of the
svganimationelement interface is fired when the element's local timeline repeats.
... bubbles no cancelable no interface timeevent event handler property onrepeat examples animated circle <
svg xmlns="http://www.w3.org/2000/
svg" width="300px" height="100px"> <title>
svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </
svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10...
...px 30px; } let
svgelem = document.queryselector('
svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you can also create an event listener for the repeat event using the onrepeat event handler property: animateelem.onrepeat = () => { console.log('repeateven...
...t fired'); } specifications specification status comment scalable vector graphics (
svg) 2the definition of 'repeatevent' in that specification.
SVGGeometryElement.getPointAtLength() - Web APIs
the
svggeometryelement.getpointatlength() method returns the point at a given distance along the path.
... note: this method was originally part of the
svgpathelement interface.
...
svg 2 introduced the
svggeometryelement interface and moved the property to it.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svggeometryelement.gettotallength()' in that specification.
SVGGeometryElement.getTotalLength() - Web APIs
the
svggeometryelement.gettotallength() method returns the user agent's computed value for the total length of the path in user units.
... note: this method was originally part of the
svgpathelement interface.
...
svg 2 introduced the
svggeometryelement interface and moved the property to it.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svggeometryelement.gettotallength()' in that specification.
SVGGeometryElement.pathLength - Web APIs
the
svggeometryelement.pathlength property reflects the pathlength attribute and returns the total length of the path, in user units.
... note: this property was originally part of the
svgpathelement interface.
...
svg 2 introduced the
svggeometryelement interface and moved the property to it.
... syntax var pathlength = someelement.pathlength; specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svggeometryelement.pathlength' in that specification.
SVGImageElement.preserveAspectRatio - Web APIs
the preserveaspectratio read-only property of the
svgimageelement interface returns an
svganimatedpreserveaspectratio corresponding to the preserveaspectratio attribute of the given <image> element.
... syntax var
svganimatedpreerveaspectratio =
svgimageelement.preserveaspectratio; value an
svganimatedpreserveaspectratio.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'preserveaspectratio' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'preserveaspectratio' in that specification.
SVGMeshElement - Web APIs
the
svgmeshelement interface provides access to the properties of <mesh> elements.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgmeshelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgmeshelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits pro...
...perties from its parent interface,
svggeometryelement, and implements the properties of
svgurireference.
... methods this interface doesn't implement any specific methods, but inherits methods from its parent interface,
svggeometryelement, and implements the methods of
svgurireference.
SVGPathSeg - Web APIs
svg path segment interface this is a base interface that corresponds to a single command within a path data specification.
...horizontal_rel = 13 pathseg_lineto_vertical_abs = 14 pathseg_lineto_vertical_rel = 15 pathseg_curveto_cubic_smooth_abs = 16 pathseg_curveto_cubic_smooth_rel = 17 pathseg_curveto_quadratic_smooth_abs = 18 pathseg_curveto_quadratic_smooth_rel = 19 normative document
svg 1.1 (2nd edition) constants name value description pathseg_unknown 0 the unit type is not one of predefined types.
... methods the
svgpathseg interface does not provide any specific methods.
...desktop mobile chrome edge firefox internet explorer opera safari android webview chrome for android firefox for android opera for android safari on ios samsung internet
svgpathseg chrome ?
SVGSolidcolorElement - Web APIs
the
svgsolidcolorelement interface corresponds to the <solidcolor> element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgsolidcolorelement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgsolidcolorelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but...
... inherits properties from its parent interface,
svgelement.
... methods this interface doesn't implement any specific methods, but inherits methods from its parent interface,
svgelement.
SVGTransformable - Web APIs
svg transformable interface interface
svgtransformable contains properties and methods that apply to all elements which have attribute transform.
... interface overview also implement none methods none properties readonly
svganimatedtransformlist transform normative document
svg 1.1 (2nd edition) properties name type description transform
svganimatedtransformlist corresponds to attribute transform on the given element.
... methods the
svgtransformable interface do not provide any specific methods.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
svgtransformablechrome ?
baseProfile - SVG: Scalable Vector Graphics
the baseprofile attribute describes the minimum
svg language profile that the author believes is necessary to correctly render the content.
... each
svg profile should define the text that is appropriate for this attribute.
... 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"> ...
... </
svg> specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'baseprofile' in that specification.
color-rendering - SVG: Scalable Vector Graphics
the color-rendering attribute provides a hint to the
svg user agent about how to optimize its color interpolation and compositing operations.
...in this case, the
svg user agent should perform color operations in a way that optimizes performance, which might mean sacrificing the color interpolation precision as specified by through the linearrgb value for color-interpolation-filters.
... as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <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> html, body,
svg { height: 100%; } <
svg viewbox="0 0 480 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="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <c...
...ircle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" 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.
diffuseConstant - SVG: Scalable Vector Graphics
in
svg, this can be any non-negative number.
... only one element is using this attribute: <fediffuselighting> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="2"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffu...
...selighting1);" /> <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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'diffuseconstant' in that specification.
direction - SVG: Scalable Vector Graphics
for other cases, such as when using right-to-left languages, it may be sufficient to add the direction attribute to the outermost <
svg> element, and allow that direction to inherit to all text elements: note: as a presentation attribute, direction can be used as a css property.
... 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.
... proposed recommendation definition in css scalable vector graphics (
svg) 2the definition of 'direction' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'direction' in that specification.
fill-opacity - 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>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/
svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <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 propert...
...y --> <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].
... legend compatibility unknown compatibility unknown specifications specification status comment scalable vector graphics (
svg) 2the definition of 'fill-opacity' in that specification.
... candidate recommendation definition for shapes and texts scalable vector graphics (
svg) 1.1 (second edition)the definition of 'fill-opacity' in that specification.
font-size-adjust - SVG: Scalable Vector Graphics
«
svg attribute reference home the font-size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font.
... as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body,
svg { height: 100%; } <
svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/
svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.
... </text> </
svg> usage notes default value none value none | <number> animatable yes none choose the size of the font based only on the font-size property.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'font-size-adjust' in that specification.
keyPoints - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circle>...
... </
svg> usage notes value <number> [; <number>]* ;?
... specifications specification status comment
svg animations level 2the definition of 'keypoints' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'keypoints' in that specification.
keySplines - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" ...
...calcmode="spline" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> </circle> </
svg> usage notes value <control-point> [ ; <control-point> ]* ;?
... specifications specification status comment
svg animations level 2the definition of 'keysplines' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'keysplines' in that specification.
keyTimes - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; ...
...0.75 ; 1"/> </circle> </
svg> usage notes value <number> [ ; <number> ]* ;?
... specifications specification status comment
svg animations level 2the definition of 'keytimes' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'keytimes' in that specification.
lang - SVG: Scalable Vector Graphics
in
svg 1.1 there was a lang attribute defined with a different meaning and only applying to <glyph> elements.
... <
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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'lang' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'lang' in that specification.
marker-end - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="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" poin...
...ts="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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'marker-end' in that specification.
... candidate recommendation no significant change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'marker-end' in that specification.
marker-start - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="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" poin...
...ts="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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'marker-start' in that specification.
... candidate recommendation no significant change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'marker-start' in that specification.
numOctaves - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter 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" styl...
...e="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.
... 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" numoctaves="3" 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> specifications specification status comment filter effects module level 1the definition of 'numoctaves' in that specification.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'numoctaves' in that specification.
opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <
svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body,
svg { height: 100%; } <
svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/
svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" 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>.
... scalable vector graphics (
svg) 2the definition of 'opacity' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'opacity' in that specification.
orient - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> html, body,
svg { height: 100%; } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'orient' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'orient' in that specification.
pathLength - SVG: Scalable Vector Graphics
seven elements are using this attribute: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html,body,
svg { height:100% } <
svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/
svg"> <style> path { fill: none; stroke: black; stroke-width: 2; stroke-dasharray: 10; } </style> <!-- no pathlength, the real length of the path is used.
... d="m 0,20 h100" pathlength="90"/> <!-- compute everything like if the path length was 50 user units long --> <path d="m 0,30 h100" pathlength="50"/> <!-- compute everything like if the path length was 30 user units long --> <path d="m 0,40 h100" pathlength="30"/> <!-- compute everything like if the path length was 10 user units long --> <path d="m 0,50 h100" pathlength="10"/> </
svg> circle for <circle>, pathlength lets authors specify a total length for the circle, in user units.
... value <number> default value none animatable yes specification specification status comment scalable vector graphics (
svg) 2the definition of 'pathlength' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'pathlength' in that specification.
patternContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,
svg { height:100% } <
svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/
svg"> <!-- a pattern tile that content coordinates and values are computed against the current coordinate user space.
...t --> <pattern id="p2" width="20%" height="20%" patterncontentunits="objectboundingbox"> <circle cx=".1" cy=".1" r=".1" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" height="80" fill="url(#p2)" /> </
svg> pattern for <pattern>, patterncontentunits defines the coordinate system in use for the content of the element.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'patterncontentunits' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'patterncontentunits' in that specification.
patternTransform - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </
svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
... note: as of
svg2, it is also allowed to use the css transform property.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'patterntransform' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'patterntransform' in that specification.
patternUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,
svg { height:100% } <
svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/
svg"> <!-- all geometry properties are relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="1...
...0" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" height="80" fill="url(#p2)" /> </
svg> pattern for <pattern>, patternunits defines the coordinate system in use for the geometry properties (x, y, width and height) of the element.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'patternunits' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'patternunits' in that specification.
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.
... the iri names for the extension should include versioning information, such as "http://example.org/
svgextensionxyz/1.0", so that script writers can distinguish between different versions of a given extension.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'requiredextensions' in that specification.
... candidate recommendation iris replaced with urls scalable vector graphics (
svg) 1.1 (second edition)the definition of 'requiredextensions' in that specification.
specularExponent - SVG: Scalable Vector Graphics
two elements are using this attribute: <fespecularlighting> and <fespotlight> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="1"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="5"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </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> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value for the specular term.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'specularexponent for <fespecularlighting>' in that specification.
... recommendation initial definition for <fespecularlighting> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'specularexponent for <fespotlight>' in that specification.
startOffset - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html,body,
svg { height:100% } <
svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/
svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
... </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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'startoffset' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'startoffset' in that specification.
stroke-dasharray - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/
svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" ...
... stroke-dasharray="4 1" /> <!-- dashes and gaps of various 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.
... legend compatibility unknown compatibility unknown specification specification status comment scalable vector graphics (
svg) 2the definition of 'stroke-dasharray' in that specification.
... candidate recommendation definition for shapes and texts scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stroke-dasharray' in that specification.
stroke-dashoffset - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="-3 0 33 10" xmlns="http://www.w3.org/2000/
svg"> <!-- no dash array --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- no dash offset --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> <!-- the start of the dash array computation is pulled by 3 user units --> <line x1="0" y1="5" x2="30" y2="5" str...
...dash array computation is pulled by 1 user units which ends up in the same rendering as the previous 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.
... legend compatibility unknown compatibility unknown specification specification status comment scalable vector graphics (
svg) 2the definition of 'stroke-dashoffset' in that specification.
... candidate recommendation definition for shapes and texts scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stroke-dashoffset' in that specification.
stroke-miterlimit - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 38 30" xmlns="http://www.w3.org/2000/
svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l7 ,-3 l7 ,3 m2,0 l3.5 ,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of the smallest miter li...
...h for each stroke --> <path stroke="pink" fill="none" stroke-width="0.05" d="m1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 m1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 m1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /> </
svg> when two line segments meet at a sharp angle and miter joins have been specified for stroke-linejoin, it is possible for the miter to extend far beyond the thickness of the line stroking the path.
... legend compatibility unknown compatibility unknown specification specification status comment scalable vector graphics (
svg) 2the definition of 'stroke-miterlimit' in that specification.
... candidate recommendation definition for shapes and texts scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stroke-miterlimit' in that specification.
stroke-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/
svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="5...
...0%" /> <!-- 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].
... legend compatibility unknown compatibility unknown specification specification status comment scalable vector graphics (
svg) 2the definition of 'stroke-opacity' in that specification.
... candidate recommendation definition for shapes and texts scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stroke-opacity' in that specification.
stroke - SVG: Scalable Vector Graphics
the stroke attribute is a presentation attribute defining the color (or any
svg paint servers like gradients or patterns) used to paint the outline of the shape; note: as a presentation attribute stroke can be used as a css property.
... as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/
svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- 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> de...
...fault value none animatable yes specifications specification status comment scalable vector graphics (
svg) 2the definition of 'stroke' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stroke' in that specification.
surfaceScale - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <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> fespecularlighting for <fespecularlighting>, surfacescale defines the height of the surface.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'surfacescale for <fediffuselighting>' in that specification.
... recommendation initial definition for <fediffuselighting> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'surfacescale for <fespecularlighting>' in that specification.
text-anchor - 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> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,110 m30,40 l90,40 m30,75 l90,75 m30,110 l90,110" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="75">a</text> <text text-anchor="end" x="60" y="110">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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'text-anchor' in that specification.
... candidate recommendation no significant change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'text-anchor' in that specification.
xml:space - SVG: Scalable Vector Graphics
svg supports the built-in xml xml:space attribute to handle whitespace characters inside elements.
... 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 pr...
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'xml:space' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'xml:space' in that specification.
z - SVG: Scalable Vector Graphics
two elements are using this attribute: <fepointlight> and <fespotlight> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="10" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> ...
... <fepointlight x="60" y="60" z="50" /> </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> fepointlight for <fepointlight>, 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'z for <fepointlight>' in that specification.
... recommendation initial definition for <fepointlight> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'z for <fespotlight>' in that specification.
zoomAndPan - SVG: Scalable Vector Graphics
the zoomandpan attribute specifies whether the
svg document can be magnified and panned.
... magnification in this context means the effect of a supplemental scale and translate transformation on the outermost
svg document fragment.
... panning represents a translation (i.e., a shift) transformation on an
svg document fragment in response to a user interface action.
... two elements are using this attribute: <
svg> and <view> html, body,
svg { height: 100%; } <
svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/
svg" zoomandpan="disable"> <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.
<altGlyph> - SVG: Scalable Vector Graphics
the <altglyph>
svg element allows sophisticated selection of the glyphs used to render its child character data.
... value type: <string> ; default value: none; animatable: no xlink:href an <iri> reference either to a <glyph> element in an
svg document or to an <altglyphdef> element.
..., fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate dom interface this element implements the
svgaltglyphelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<altglyph>' in that specification.
<animateColor> - SVG: Scalable Vector Graphics
this element has been deprecated in
svg 1.1 second edition and may be removed in a future version of
svg.
... the <animatecolor>
svg element specifies a color transformation over time.
... any order:descriptive elements attributes global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from to dom interface this element implements the
svganimatecolorelement interface.
... example
svg <
svg width="120" height="120" xmlns="http://www.w3.org/2000/
svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" attributetype="xml" from="black" to="red" dur="6s" repeatcount="indefinite"/> </circle> </
svg> result specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<animatecolor>' in that specification.
<animateTransform> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <
svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </
svg> live sample att...
...ributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attributes » animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequired specific attributes by from to type dom interface this element implements the
svganimatetransformelement interface.
... specifications specification status comment
svg animations level 2the definition of '<animatetransform>' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<animatetransform>' in that specification.
<clipPath> - SVG: Scalable Vector Graphics
the <clippath>
svg element defines a clipping path, to be used by the clip-path property.
... html,body,
svg { height:100% } <
svg viewbox="0 0 100 100"> <clippath id="myclip"> <!-- everything outside the circle will be clipped and therefore invisible.
... --> <use clip-path="url(#myclip)" xlink:href="#heart" fill="red" /> </
svg> /* with a touch of css for browsers who * * implemented the r geometry property.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<clippath>' in that specification.
<cursor> - SVG: Scalable Vector Graphics
the <cursor>
svg element can be used to define a platform-independent custom cursor.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes xlink attributes externalresourcesrequired specific attributes x y xlink:href dom interface this element implements the
svgcursorelement interface.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of '<cursor>' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of '<cursor>' in that specification.
<defs> - SVG: Scalable Vector Graphics
graphical objects can be referenced from anywhere, however, defining these objects inside of a <defs> element promotes understandability of the
svg content and is beneficial to the overall accessibility of the document.
... html,body,
svg { height:100% } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </
svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most no...
...elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (
svg) 2the definition of '<defs>' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<defs>' in that specification.
<desc> - SVG: Scalable Vector Graphics
the <desc> element provides an accessible, long-text description of any
svg container element or graphics element.
... html,body,
svg { height:100% } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg"> <circle cx="5" cy="5" r="4"> <desc> i'm a circle and that description is here to demonstrate how i can be described, but is it really necessary to describe a simple circle like me?
... </desc> </circle> </
svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or character data specifications specification status comment scalable vector graphics (
svg) 2the definition of '<desc>' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<desc>' in that specification.
<feBlend> - SVG: Scalable Vector Graphics
the <feblend>
svg filter primitive composes two objects together ruled by a certain blending mode.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in in2 mode dom interface this element implements the
svgfeblendelement interface.
... example
svg <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </
svg> result specifications specification status comment filter effects module level 1the definition of '<feblend>' in that specification.
... working draft outsourced blend modes to compositing and blending level 1 scalable vector graphics (
svg) 1.1 (second edition)the definition of '<feblend>' in that specification.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
the <feconvolvematrix>
svg filter primitive applies a matrix convolution filter effect.
...iesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in order kernelmatrix divisor bias targetx targety edgemode kernelunitlength preservealpha dom interface this element implements the
svgfeconvolvematrixelement interface.
... example
svg <
svg width="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.
svg" x="0" y="0" height="200" width="200" style="filter:url(#emboss);" /> </
svg> result specifications specification status comment filter effects module level 1the definition of '<feconvolvematrix>' in that specification.
... working draft scalable vector graphics (
svg) 1.1 (second edition)the definition of '<feconvolvematrix>' in that specification.
<feDisplacementMap> - SVG: Scalable Vector Graphics
the <fedisplacementmap>
svg filter primitive uses the pixel values from the image from in2 to spatially displace the image from in.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in in2 scale xchannelselector ychannelselector dom interface this element implements the
svgfedisplacementmapelement interface.
... example <
svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/
svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" 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> specifications specification status comment filter effects module level 1the definition of '<fedisplacementmap>' in that specification.
... working draft no changes scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fedisplacementmap>' in that specification.
<feFlood> - SVG: Scalable Vector Graphics
the <feflood>
svg filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes flood-color flood-opacity dom interface this element implements the
svgfefloodelement interface.
... example html content <
svg xmlns="http://www.w3.org/2000/
svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </
svg> result specifications specification status comment filter effects module level 1the definition of '<feflood>' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of '<feflood>' in that specification.
<feMerge> - SVG: Scalable Vector Graphics
the <femerge>
svg element allows filter effects to be applied concurrently instead of sequentially.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example
svg <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> </
svg> result attributes global attributes ...
...core attributes presentation attributes filter primitive attributes class style specific attributes none dom interface this element implements the
svgfemergeelement interface.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<femerge>' in that specification.
<feOffset> - SVG: Scalable Vector Graphics
the <feoffset>
svg filter primitive allows to offset the input image.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dx dy dom interface this element implements the
svgfeoffsetelement interface.
... example
svg <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </
svg> result specifications specification status comment filter effects module level 1the definition of '<feoffset>' in that specification.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<feoffset>' in that specification.
<feSpecularLighting> - SVG: Scalable Vector Graphics
the <fespecularlighting>
svg filter primitive lights a source graphic using the alpha channel as a bump map.
... attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in surfacescale specularconstant specularexponent kernelunitlength dom interface this element implements the
svgfespecularlightingelement interface.
... example <
svg height="200" width="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/
svg"> <filter id = "filter"> <fespecularlighting result="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> </
svg> result specifications specification status comment filter effects module level 1the definition of '<fespecularlighting>' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fespecularlighting>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
the <fespotlight>
svg filter primitive defines a light source which allows to create a spotlight effect.
... usage context categorieslight source elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes specific attributes x y z pointsatx pointsaty pointsatz specularexponent limitingconeangle dom interface this element implements the
svgfespotlightelement interface.
... example html content <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </
svg> result specifications specification status comment filter effects module level 1the definitio...
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fespotlight>' in that specification.
<feTile> - SVG: Scalable Vector Graphics
the <fetile>
svg filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in dom interface this element implements the
svgfetileelement interface.
... example
svg <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);"/> </
svg> result specifications specification status comment filter effects module level 1the definition of '<fetile>' in that specification.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fetile>' in that specification.
<feTurbulence> - SVG: Scalable Vector Graphics
the <feturbulence>
svg filter primitive creates an image using the perlin turbulence function.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes basefrequency numoctaves seed stitchtiles type dom interface this element implements the
svgfeturbulenceelement interface.
... example <
svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/
svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" 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> specifications specification status comment filter effects module level 1the definition of '<feturbulence>' in that specification.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<feturbulence>' in that specification.
<g> - SVG: Scalable Vector Graphics
the <g>
svg element is a container used to group other
svg elements.
... html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <!-- using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </
svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graph...
...elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (
svg) 2the definition of '<g>' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<g>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
a <glyph> defines a single glyph in an
svg font.
... <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the
svgglyphelement interface.
... example
svg <
svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/
svg"> <!-- example copied from https://www.w3.org/tr/
svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l400,100z...
..."></glyph> </font> </defs> <text x="100" y="100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">text using embe@dded font!</text> </
svg> result specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<glyph>' in that specification.
<line> - SVG: Scalable Vector Graphics
the <line> element is an
svg basic shape used to create a line connecting two points.
... html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </
svg> attributes x1 defines the x-axis coordinate of the line starting point.
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (
svg) 2the definition of '<line>' in that specification.
... candidate recommendation changed the x1, y1, x2 and y2 attributes to take <length>s, <percentage>s and <number>s scalable vector graphics (
svg) 1.1 (second edition)the definition of '<line>' in that specification.
<linearGradient> - SVG: Scalable Vector Graphics
don't be confused with css linear-gradient() as css gradients can only apply to html elements where
svg gradient can only apply to
svg elements.
... html,body,
svg { height:100% } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="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.
...oke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specifications specification status comment scalable vector graphics (
svg) 2the definition of '<lineargradient>' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<lineargradient>' in that specification.
<mpath> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes core attributes » xlink attributes » externalresourcesrequired specific attributes xlink:href dom interface this element implements the
svgmpathelement interface.
... example
svg <
svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- draw the outline of the motion path in blue, along with three small circles at the start, middle and end.
...--> <path d="m-25,-12.5 l25,-12.5 l 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </
svg> result specifications specification status comment
svg animations level 2the definition of '<mpath>' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<mpath>' in that specification.
<polyline> - SVG: Scalable Vector Graphics
the <polyline>
svg element is an
svg basic shape that creates straight lines connecting several points.
... html,body,
svg { height:100% } <
svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/
svg"> <!-- example of a polyline with the default fill --> <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 ...
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (
svg) 2the definition of '<polyline>' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<polyline>' in that specification.
<radialGradient> - SVG: Scalable Vector Graphics
don't be confused with css radial-gradient() as css gradients can only apply to html elements where
svg gradient can only apply to
svg elements.
... html,body,
svg { height:100% } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </
svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient.
...oke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specifications specification status comment scalable vector graphics (
svg) 2the definition of '<radialgradient>' in that specification.
... candidate recommendation added fr attribute scalable vector graphics (
svg) 1.1 (second edition)the definition of '<radialgradient>' in that specification.
<set> - SVG: Scalable Vector Graphics
the
svg <set> element provides a simple means of just setting the value of an attribute for a specified duration.
... html,body,
svg { height:100%; margin:0; padding:0; } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </
svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the anima...
... 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 categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements specifications specification status comment
svg animations level 2the definition of '<set>' in that specification.
... editor's draft scalable vector graphics (
svg) 1.1 (second edition)the definition of '<set>' in that specification.
<solidcolor> - SVG: Scalable Vector Graphics
the <solidcolor>
svg element lets authors define a single color for use in multiple places in an
svg document.
... dom interface this element implements the
svgsolidcolorelement interface.
... example
svg <
svg xmlns="http://www.w3.org/2000/
svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental.
...th solidcolor</text> <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#mycolor)" fill="white"/> <circle cx="50" cy="65" r="35" fill="url(#mycolor)"/> <text x="10" y="120">circles colored with lineargradient</text> <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#mygradient)" fill="white"/> <circle cx="50" cy="165" r="35" fill="url(#mygradient)"/> </
svg> result ...
<stop> - SVG: Scalable Vector Graphics
the
svg <stop> element defines a color and its position to use on a gradient.
... html,body,
svg { height:100% } <
svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="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 offset this attribute defines where the gradient stop is placed along the gradient vector.
...utes 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.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<stop>' in that specification.
<textPath> - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <!-- to hide the path, it is usually wrapped in a <defs> element --> <!-- <defs> --> <path id="mypath" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog.
... </textpath> </text> </
svg> attributes href the url to the path or basic shape on which to render the text.
... aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification status comment scalable vector graphics (
svg) 2the definition of '<textpath>' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<textpath>' in that specification.
<view> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example
svg <
svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsiz...
... <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlink:href="#doublesizeview"> <text x="5" y="60" font-size="20">double size</text> </a> </
svg> result dom interface this element implements the
svgviewelement interface.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of '<view>' in that specification.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<view>' in that specification.
SVG And Canvas In Mozilla - Archive of obsolete content
the mozilla project will meet this challenge with two major new features to be delivered in firefox 1.5: integrated
svg and a new canvas html element.
...this work provides additional benefits to web developers such as the ability to apply
svg effects to html content.
... questions and discussion rich web:
svg and canvas in mozilla - discussion ...
SVGAltGlyphElement.glyphRef - Web APIs
the
svgaltglyphelement.glyphref property is a domstring representing a glyph identifier.
... it has the same meaning as the ‘glyphref’ property on the
svgglyphrefelement interface of the <glyphref> element.
... example myglyph.glypref = "#glyphid"; specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'glyphref' in that specification.
SVGElement: load event - Web APIs
the load event fires on an
svgelement when it is loaded in the browser, e.g.
... in the dom in the case of an embedded <
svg>.
... bubbles no cancelable no interface
svgevent event handler property onload examples
svgelem.addeventlistener('load', () => { console.log('
svg loaded.'); }) specifications specification status comment scalable vector graphics (
svg) 2the definition of 'load' in that specification.
SVGElement: resize event - Web APIs
the resize event is fired when an
svg document is being resized.
... this event is only applicable to outermost
svg elements and is dispatched after the resize operation has taken place.
... bubbles no cancelable no interface
svgevent event handler property onresize examples
svgelem.addeventlistener('resize', () => { console.log('
svg resized.'); }) specifications specification status comment scalable vector graphics (
svg) 2the definition of 'event changes in
svg2' in that specification.
SVGGeometryElement.isPointInFill() - Web APIs
the
svggeometryelement.ispointinfill() method determines whether a given point is within the fill shape of an element.
... example
svg <
svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/
svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </
svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('p...
...oint at 10,10:', circle.ispointinfill(new dompoint(10, 10))); // point in circle console.log('point at 40,30:', circle.ispointinfill(new dompoint(40, 30))); result specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svggeometryelement.ispointinfill()' in that specification.
SVGGeometryElement.isPointInStroke() - Web APIs
the
svggeometryelement.ispointinstroke() method determines whether a given point is within the stroke shape of an element.
... example
svg <
svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/
svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> <circle cx="83" cy="17" r="5" fill="seagreen"/> </
svg> javascript var circle = document.getelementbyid...
...nsole.log('point at 10,10:', circle.ispointinstroke(new dompoint(10, 10))); // point in circle but not stroke console.log('point at 40,30:', circle.ispointinstroke(new dompoint(40, 30))); // point in circle stroke console.log('point at 83,17:', circle.ispointinstroke(new dompoint(83, 17))); result specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svggeometryelement.ispointinstroke()' in that specification.
SVGGraphicsElement: copy event - Web APIs
the copy event fires on
svggraphicselements when the user initiates a copy action through the browser's user interface.
... example html <?xml version="1.0" encoding="utf-8"?> <
svg viewbox="0 0 100 30" width="600" height="320" xmlns="http://www.w3.org/2000/
svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </
svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box;...
... border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (
svg) 2 candidate recommendation definition that the clipboard events apply to
svg elements.
SVGGraphicsElement: paste event - Web APIs
the paste event is fired on an
svggraphicselement when the user has initiated a "paste" action through the browser's user interface.
... example html <?xml version="1.0" encoding="utf-8"?> <
svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org/2000/
svg"> <foreignobject x="5" y="-10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </
svg> css input { font-size: 10px; width: 100%; height: 90%; box-si...
...zing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (
svg) 2 candidate recommendation definition that the clipboard events apply to
svg elements.
SVGImageElement.decode - Web APIs
the decode() method of the
svgimageelement interface initiates asynchronous decoding of an image, returning a promise that resolves once the image data is ready for use.
... syntax var promise =
svgimageelement.decode(); parameters none.
... specifications specification status comment scalable vector graphics (
svg) 2 candidate recommendation initial definition.
SVGImageElement.decoding - Web APIs
the decoding property of the
svgimageelement interface represents a hint given to the browser on how it should decode the image.
... syntax var refstr =
svgimageelement.decoding
svgimageelement.decoding = refstr; values a domstring representing the decoding hint.
... examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.
svg'; specifications specification status comment html living standardthe definition of 'decoding' in that specification.
SVGImageElement.height - Web APIs
the height read-only property of the
svgimageelement interface returns an
svganimatedlength corresponding to the height attribute of the given <image> element.
... syntax var height =
svgimageelement.height value an
svganimatedlength.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'height' in that specification.
SVGImageElement.width - Web APIs
the width read-only property of the
svgimageelement interface returns an
svganimatedlength corresponding to the width attribute of the given <image> element.
... syntax var width =
svgimageelement.width; value an
svganimatedlength.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'width' in that specification.
SVGImageElement.x - Web APIs
the x read-only property of the
svgimageelement interface returns an
svganimatedlength corresponding to the x attribute of the given <image> element.
... syntax var x =
svgimageelement.x; value an
svganimatedlength.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'x' in that specification.
SVGImageElement.y - Web APIs
the y read-only property of the
svgimageelement interface returns an
svganimatedlength corresponding to the y attribute of the given <image> element.
... syntax var y =
svgimageelement.y; value an
svganimatedlength.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'y' in that specification.
SVGPathElement.getTotalLength() - Web APIs
the
svgpathelement.gettotallength() method returns the user agent's computed value for the total length of the path in user units.
... note: in
svg 2 this method was moved to the
svggeometryelement interface, from which the
svgpathelement inherits it.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '
svgpathelement.gettotallength()' in that specification.
SVGPathElement.pathLength - Web APIs
the
svgpathelement.pathlength property reflects the pathlength attribute and returns the total length of the path, in user units.
... note: in
svg 2 this property was moved to the
svggeometryelement interface, from which the
svgpathelement inherits it.
... syntax var pathlength = someelement.pathlength; specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '
svgpathelement.pathlength' in that specification.
SVGPoint - Web APIs
an
svgpoint represents a 2d or 3d point in the
svg coordinate system.
... syntax retobject =
svgsvgelement.create
svgpoint() value the returned value is an
svgpoint object.
... example // create an
svgpoint in the user coordinate system let s = document.getelementbyid("
svg-elementid").create
svgpoint(); // then, set the x and y values of the returned
svgpoint object // (which is the variable `s`) s.y = 10; s.x = 10; ...
SVGRenderingIntent - Web APIs
the
svgrenderingintent interface defines the enumerated list of possible values for rendering-intent attributes or descriptors.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
svgrenderingintent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the
svg 2 specification.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '
svgrenderingintent' in that specification.
SVGStringList - Web APIs
svg string list interface the
svgstringlist defines a list of domstring objects.
... an
svgstringlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
...omstring insertitembefore(in domstring newitem, in unsigned long index) domstring replaceitem(in domstring newitem, in unsigned long index) domstring removeitem(in unsigned long index) domstring appenditem(in domstring newitem) properties readonly unsigned long numberofitems readonly unsigned long length normative document
svg 1.1 (2nd edition) properties name type description numberofitems unsigned long the number of items in the list.
SVGStylable - Web APIs
svg stylable interface the
svgstylable interface is implemented on all objects corresponding to
svg elements that can have style, class and presentation attributes specified on them.
... interface overview also implement none methods cssvalue getpresentationattribute(in domstring name) properties readonly
svganimatedstring classname readonly cssstyledeclaration style normative document
svg 1.1 (2nd edition) properties name type description classname
svganimatedstring corresponds to attribute class on the given element.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
svgstylablechrome ?
attributeName - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <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.
... specifications specification status comment
svg animations level 2the definition of 'attributename' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'attributename' in that specification.
baseFrequency - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" /> </filter> <filter 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...
... example <
svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/
svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" 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> ...
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'basefrequency' in that specification.
by - SVG: Scalable Vector Graphics
four elements are using this 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 wi...
... specifications specification status comment
svg animations level 2the definition of 'by' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'by' in that specification.
clip-rule - SVG: Scalable Vector Graphics
«
svg attribute reference home the clip-rule attribute only applies to graphics elements that are contained within a <clippath> element.
.../> </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.
... example <
svg width="100" viewbox="0 0 100 90" xmlns="http://www.w3.org/2000/
svg" version="1.1"> <!-- define star path --> <defs> <path d="m50,0 21,90 98,35 2,35 79,90z" id="star" /> </defs> <!-- left: evenodd --> <clippath id="emptystar"> <use xlink:href="#star" clip-rule="evenodd" /> </clippath> <rect clip-path="url(#emptystar)" width="50" height="90" fill="blue" /> <!-- right: nonzero --> <clippath id="filledstar"> <use xlink:href="#star" clip-rule="nonzero" /> </clippath> <rect clip-path="url(#filledstar)" width="50" height="90" x="50" fill="red" /> </
svg> elements the following elements can use the clip-rule attribute, but only if they are inside a <clippath> element.
clip - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <
svg>, <symbol>, <image>, <foreignobject>, <pattern>, <marker> html,body,
svg { height:100% } <
svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/
svg"> <!-- auto clipping --> <
svg x="0" width="10" height="10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </
svg> <!-- rect(top, right, bottom, left) clipping --> <
svg x="10" width="10" height="10" clip="rec...
...t(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </
svg> </
svg> usage notes warning: this property is deprecated.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'clip' in that specification.
clipPathUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <clippath> html,body,
svg { height:100% } <
svg viewbox="0 0 100 100"> <clippath id="myclip1" clippathunits="userspaceonuse"> <circle cx="50" cy="50" r="35" /> </clippath> <clippath id="myclip2" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".35" /> </clippath> <!-- some reference rect to materialized to clip path --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> <rect id="r3" x="55" y="55" width="45" height="45" /> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are clipped with usespaceonuse units --...
...> <use clip-path="url(#myclip1)" xlink:href="#r1" fill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r2" fill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r3" fill="red" /> <!-- the last rect is clipped with objectboundingbox units --> <use clip-path="url(#myclip2)" xlink:href="#r4" fill="red" /> </
svg> clippath for <clippath>, clippathunits define the coordinate system in use for the content of the element.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'clippathunits' in that specification.
color-interpolation - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'color-interpolation' in that specification.
... candidate recommendation no significant change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'color-interpolation' in that specification.
color - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element, but as noted above, it has no direct effect on
svg elements.
... 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 graphics (
svg) 2the definition of 'color' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'color' in that specification.
divisor - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <imag...
...e xlink:href="//developer.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 <number> default value sum of all values in kernelmatrix or 1 if sum is 0 animatable yes <number> this value defines the divisor.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'divisor' in that specification.
dur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body,
svg { height: 100%; } <
svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/
svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="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 speci...
... specifications specification status comment
svg animations level 2the definition of 'dur' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'dur' in that specification.
elevation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedistantlight> html, body,
svg { height: 100%; } <
svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight elevation="0" /> </fediffuselighting> </filter> <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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'elevation' in that specification.
exponent - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="1"/> <fefuncg type="gamma" exponent="1"/> <fefuncb type="gamma" exponent="1"/> </fecomponenttransfer...
..."5"/> <fefuncg type="gamma" exponent="5"/> <fefuncb type="gamma" exponent="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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'exponent' in that specification.
externalResourcesRequired - SVG: Scalable Vector Graphics
because setting externalresourcesrequired="true" on a container element will have the effect of disabling progressive display of the contents of that container, if that container includes elements that reference external resources, authors should avoid simply setting externalresourcesrequired="true" on the outermost <
svg> element on a universal basis.
...if an external resource is not available, progressive rendering is suspended, the document's
svgload event is not fired and the animation timeline does not begin until that resource and all other required resources become available, have been parsed and are ready to be rendered.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'externalresourcesrequired' in that specification.
flood-color - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="flood1"> <feflood flood-color="skyblue" x="0" y="0" width="200" height="200"/> </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.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'flood-color' in that specification.
flood-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="flood1"> <feflood flood-color="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/> </filter> <filter 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" widt...
...h="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.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'flood-opacity' in that specification.
fr - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body,
svg { height: 100%; } <
svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/
svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="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" f...
...ill="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="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r...
...="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </
svg> specifications specification status comment scalable vector graphics (
svg) 2the definition of 'fr' in that specification.
from - SVG: Scalable Vector Graphics
four elements are using this 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 attr...
... specifications specification status comment
svg animations level 2the definition of 'from' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'from' in that specification.
in2 - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'in2 for <fedisplacementmap>' in that specification.
... recommendation initial definition for <fedisplacementmap> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'in2 for <fecomposite>' in that specification.
... recommendation initial definition for <fecomposite> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'in2 for <feblend>' in that specification.
intercept - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0"/> <fefuncg type="linear" interce...
... <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'intercept' in that specification.
k1 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'k1' in that specification.
k2 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'k2' in that specification.
k3 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'k3' in that specification.
k4 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'k4' in that specification.
kernelMatrix - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'kernelmatrix' in that specification.
kernelUnitLength - SVG: Scalable Vector Graphics
scalable vector graphics (
svg) 1.1 (second edition)the definition of 'kernelunitlength for <fespecularlighting>' in that specification.
... recommendation initial definition for <fespecularlighting> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'kernelunitlength for <fediffuselighting>' in that specification.
... recommendation initial definition for <fediffuselighting> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'kernelunitlength for <feconvolvematrix>' in that specification.
lengthAdjust - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body,
svg { height: 100%; } <
svg width="300" height="150" xmlns="http://www.w3.org/2000/
svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="300" lengthadjust="spacing"> stretched using spacing only.
... </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.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'lengthadjust' in that specification.
letter-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <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 t...
... working draft
svg 2 just refers to the definition in css text 3.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'letter-spacing' in that specification.
lighting-color - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="white"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuseligh...
...ting1);" /> <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.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'lighting-color' in that specification.
limitingConeAngle - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body,
svg { height: 100%; } <
svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="spotlight1" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="10" /> </fediffuselighting> </filter> <filter id="spotlight2" x="0" y="0" width="100%" height="100%"> ...
...<fediffuselighting diffuseconstant="2"> <fespotlight 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'limitingconeangle' in that specification.
marker-mid - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.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 ...
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'marker-mid' in that specification.
... candidate recommendation no significant change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'marker-mid' in that specification.
mask - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/
svg"> <mask id="mymask" maskcontentunits="objectboundingbox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </
svg> since
svg2, the mask attrib...
... as 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.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'mask' in that specification.
maskContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <mask id="mymask1" maskcontentunits="userspaceonuse"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskcontentunits="objectboundingbox"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx=".5" cy=".5" r=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> ...
...="0" width="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </
svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the element.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'maskcontentunits' in that specification.
maskUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,
svg { height:100% } <
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/
svg"> <mask id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y...
...="0" width="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </
svg> mask for <mask>, maskunits defines the coordinate system in use for the geometry attributes (x, y, width and height) of the element.
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'maskunits' in that specification.
max - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg"> <circle cx="60" cy="10" r="10"> <animate attributename="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> specifie...
... specifications specification status comment
svg animations level 2the definition of 'max' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'max' in that specification.
media - SVG: Scalable Vector Graphics
only one element is using this attribute: <style> html, body,
svg { height: 100%; } <
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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'media' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'media' in that specification.
min - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body,
svg { height: 100%; } <
svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/
svg"> <circle cx="60" cy="10" r="10"> <animate attributename="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 t...
... specifications specification status comment
svg animations level 2the definition of 'min' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'min' in that specification.
mode - SVG: Scalable Vector Graphics
only one element is using this attribute: <feblend> html, body,
svg { height: 100%; } <
svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="blending1" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//develope...
...r.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>.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'mode' in that specification.
onclick - SVG: Scalable Vector Graphics
thirty-seven elements are using this attribute: <a>, <altglyph>, <animate>, <animatemotion>, <animatetransform>, <circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <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.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'onclick' in that specification.
operator - SVG: Scalable Vector Graphics
two elements are using this attribute: <fecomposite> and <femorphology> html, body,
svg { height: 100%; font: 20px arial, helvetica, sans-serif; } <
svg viewbox="0 0 120 70" xmlns="http://www.w3.org/2000/
svg"> <filter id="erode"> <femorphology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </
svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be perfo...
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'operator for <femorphology>' in that specification.
... recommendation initial definition for <femorphology> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'operator for <fecomposite>' in that specification.
order - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="emboss1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="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(#em...
...boss2); 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'order' in that specification.
origin - SVG: Scalable Vector Graphics
it has no effect in
svg.
... 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.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'origin' in that specification.
pointsAtX - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="20...
...0" 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'pointsatx' in that specification.
pointsAtY - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="20...
...0" 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'pointsaty' in that specification.
pointsAtZ - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'pointsatz' in that specification.
preserveAlpha - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.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/m...
...dn_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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'preservealpha' in that specification.
refX - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'refx' in that specification.
... scalable vector graphics (
svg) 2the definition of 'refx' in that specification.
... candidate recommendation initial definition for <symbol> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'refx' in that specification.
refY - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'refy' in that specification.
... scalable vector graphics (
svg) 2the definition of 'refy' in that specification.
... candidate recommendation initial definition for <symbol> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'refy' in that specification.
repeatCount - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body,
svg { height: 100%; } <
svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/
svg"> <rect x="0" y="0" width="100" height="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 num...
... specifications specification status comment
svg animations level 2the definition of 'repeatcount' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'repeatcount' in that specification.
repeatDur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body,
svg { height: 100%; } <
svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/
svg"> <rect x="0" y="0" width="100" height="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 th...
... specifications specification status comment
svg animations level 2the definition of 'repeatdur' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'repeatdur' in that specification.
restart - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body,
svg { height: 100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <
svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/
svg"> <rect y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </
svg> document.g...
... specifications specification status comment
svg animations level 2the definition of 'restart' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'restart' in that specification.
result - SVG: Scalable Vector Graphics
seventeen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body,
svg { height: 100%; } <
svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/
svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" 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.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'result' in that specification.
scale - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body,
svg { height: 100%; } <
svg viewbox="0 0 480 220" xmlns="http://www.w3.org/2000/
svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves...
...="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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'scale' in that specification.
seed - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <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 valu...
...e 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="100" style="filter: url(#displacementfilter)"/> </
svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'seed' in that specification.
shape-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, 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 th...
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'shape-rendering' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'shape-rendering' in that specification.
specularConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespecularlighting> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="specularlighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="1.2"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="specularlighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </fi...
...lter> <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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'specularconstant' in that specification.
stdDeviation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fegaussianblur> html, body,
svg { height: 100%; } <
svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </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: t...
...ranslatex(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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stddeviation' in that specification.
stitchTiles - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: trans...
...="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height="100" 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stitchtiles' in that specification.
stroke-width - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,
svg { height:100% } <
svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/
svg"> <!-- default stroke 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...
... legend compatibility unknown compatibility unknown specification specification status comment scalable vector graphics (
svg) 2the definition of 'stroke-width' in that specification.
... candidate recommendation definition for shapes and texts scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stroke-width' 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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'style' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'style' in that specification.
systemLanguage - SVG: Scalable Vector Graphics
35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'systemlanguage' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'systemlanguage' in that specification.
tableValues - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body,
svg { height: 100%; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 1"/> <fefuncg type="table" tablevalues=...
... <fefuncg type="table" tablevalues="1 0"/> <fefuncb type="table" tablevalues="1 0"/> </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 <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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'tablevalues' in that specification.
text-decoration - 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> html, body,
svg { height: 100%; } <
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 prop...
... scalable vector graphics (
svg) 2the definition of 'text-decoration' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'text-decoration' in that specification.
text-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: <text> html, 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 a...
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'text-rendering' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'text-rendering' in that specification.
transform-origin - SVG: Scalable Vector Graphics
the transform-origin
svg attribute sets the origin for an item’s transformations.
... note: as a presentation attribute in
svg, transform-origin corresponds in syntax and behavior to the transform-origin property in css, and can be used as css property to style
svg.
... working draft scalable vector graphics (
svg) 2the definition of 'transform-origin' in that specification.
values - SVG: Scalable Vector Graphics
working draft no change
svg animations level 2the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'values for <fecolormatrix>' in that specification.
... recommendation initial definition for <fecolormatrix> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>' in that specification.
version - SVG: Scalable Vector Graphics
the version attribute is used to indicate what specification a
svg document conforms to.
... it is only allowed on the root <
svg> element.
... <
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.
word-spacing - 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> 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 r...
... working draft
svg 2 just refers to the definition in css text 3.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'word-spacing' in that specification.
writing-mode - SVG: Scalable Vector Graphics
proposed recommendation definition in css writing modes 3 scalable vector graphics (
svg) 2the definition of 'writing-mode' in that specification.
... candidate recommendation mainly refers to the definition in css writing modes 3 and defines a mapping between the deprecated
svg 1.1 values and the new values.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'writing-mode' in that specification.
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body,
svg { height: 100%; } <
svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/
svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.
svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.
svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'xchannelselector' in that specification.
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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'xml:lang' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'xml:lang' in that specification.
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body,
svg { height: 100%; } <
svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/
svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.
svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.
svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap 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.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'ychannelselector' in that specification.
<altGlyphDef> - SVG: Scalable Vector Graphics
the <altglyphdef>
svg element defines a substitution representation for glyphs.
... usage context categoriestext content elementpermitted contenteither: one or more <glyphref> elements, or one or more <altglyphitem> elements attributes global attributes core attributes specific attributes none dom interface this element implements the
svgaltglyphdefelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<altglyphdef>' in that specification.
<discard> - SVG: Scalable Vector Graphics
the <discard>
svg element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by an
svg user agent.
... this is particularly useful to help
svg viewers conserve memory while displaying long-running documents.
...ext categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<script> attributes global attributes conditional processing attributes core attributes aria attributes specific attributes begin href (but note that <discard> has never supported xlink:href) specifications specification status comment
svg animations level 2the definition of '<discard>' in that specification.
<feDropShadow> - SVG: Scalable Vector Graphics
the
svg <fedropshadow> filter primitive creates a drop shadow of the input image.
... html,body,
svg { height:100% } <
svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/
svg"> <defs> <filter id="shadow"> <fedropshadow dx="0.2" dy="0.4" stddeviation="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#...
...shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);"/> </
svg> attributes dx this attribute defines the x offset of the drop shadow.
<feFuncA> - SVG: Scalable Vector Graphics
the <fefunca>
svg filter primitive defines the transfer function for the alpha component of the input graphic of its parent <fecomponenttransfer> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the
svgfefuncaelement interface.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fefunca>' in that specification.
<feFuncB> - SVG: Scalable Vector Graphics
the <fefuncb>
svg filter primitive defines the transfer function for the blue component of the input graphic of its parent <fecomponenttransfer> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the
svgfefuncbelement interface.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fefuncb>' in that specification.
<feFuncG> - SVG: Scalable Vector Graphics
the <fefuncg>
svg filter primitive defines the transfer function for the green component of the input graphic of its parent <fecomponenttransfer> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the
svgfefuncgelement interface.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fefuncg>' in that specification.
<feFuncR> - SVG: Scalable Vector Graphics
the <fefuncr>
svg filter primitive defines the transfer function for the red component of the input graphic of its parent <fecomponenttransfer> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes transfer function attributes specific attributes none dom interface this element implements the
svgfefuncrelement interface.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fefuncr>' in that specification.
<feImage> - SVG: Scalable Vector Graphics
the <feimage>
svg filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an
svg image, it is rasterized.) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatetransform>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes xlink attributes class style externalresourcesrequired specific attributes preserveaspectratio xlink:href dom interface this element implements the
svgfeimageelement interface.
... example
svg <
svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </
svg> result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of '<feimage>' in that specification.
<feMergeNode> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> ...
...<rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" /> </
svg> result attributes global attributes core attributes » specific attributes in dom interface this element implements the
svgfemergenodeelement interface.
... working draft scalable vector graphics (
svg) 1.1 (second edition)the definition of '<femergenode>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
usage context categorieslight source elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes specific attributes x y z dom interface this element implements the
svgfepointlightelement interface.
... example
svg <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </
svg> result specifications specification status comment filter effects module level 1the definition of '<fepointlight>' in th...
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fepointlight>' in that specification.
<font-face-format> - SVG: Scalable Vector Graphics
the <font-face-format>
svg element describes the type of font referenced by its parent <font-face-uri>.
... usage context categoriesfont elementpermitted contentempty attributes global attributes core attributes specific attributes string dom interface this element implements the
svgfontfaceformatelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<font-face-format>' in that specification.
<font-face-src> - SVG: Scalable Vector Graphics
the <font-face-src>
svg element corresponds to the src descriptor in css @font-face rules.
... usage context categoriesfont elementpermitted contentone or more of the following elements, in any order:<font-face-name>, <font-face-uri> attributes global attributes core attributes specific attributes none dom interface this element implements the
svgfontfacesrcelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<font-face-src>' in that specification.
<font-face-uri> - SVG: Scalable Vector Graphics
the <font-face-uri>
svg element points to a remote definition of the current font.
... usage context categoriesfont elementpermitted contentany number of the following elements, in any order:<font-face-format> attributes global attributes core attributes xlink attributes specific attributes xlink:href dom interface this element implements the
svgfontfaceurielement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<font-face-uri>' in that specification.
<font-face> - SVG: Scalable Vector Graphics
the <font-face>
svg element corresponds to the css @font-face rule.
...de-range units-per-em panose-1 stemv stemh slope cap-height x-height accent-height ascent descent widths bbox ideographic alphabetic mathematical hanging v-ideographic v-alphabetic v-mathematical v-hanging underline-position underline-thickness strikethrough-position strikethrough-thickness overline-position overline-thickness dom interface this element implements the
svgfontfaceelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<font-face>' in that specification.
<font> - SVG: Scalable Vector Graphics
the <font>
svg element defines a font to be used for text layout.
...tany number of the following elements, in any order:descriptive elements<font-face>, <glyph>, <hkern>, <missing-glyph>, <vkern> attributes global attributes core attributes presentation attributes class style externalresourcesrequired specific attributes horiz-origin-x horiz-origin-y horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the
svgfontelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<font>' in that specification.
<hatch> - SVG: Scalable Vector Graphics
the <hatch>
svg element is used to fill or stroke an object using one or more pre-defined paths that are repeated at fixed intervals in a specified direction to cover the areas to be painted.
...elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements<hatchpath>, <script>, <style> attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes x y pitch rotate hatchunits hatchcontentunits transform href dom interface this element implements the
svghatchelement interface.
... example
svg <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </
svg> result ...
<hatchpath> - SVG: Scalable Vector Graphics
the <hatchpath>
svg element defines a hatch path used by the <hatch> element.
... usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elements<script>, <style> attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes d offset dom interface this element implements the
svghatchpathelement interface.
... example
svg <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </
svg> result ...
<hkern> - SVG: Scalable Vector Graphics
the <hkern>
svg element allows to fine-tweak the horizontal distance between two glyphs.
... usage context categoriesfont elementpermitted contentempty attributes global attributes core attributes specific attributes u1 g1 u2 g2 k dom interface this element implements the
svghkernelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<hkern>' in that specification.
<missing-glyph> - SVG: Scalable Vector Graphics
the <missing-glyph>
svg element's content is rendered, if for a given character the font doesn't define an appropriate <glyph>.
...<altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the
svgmissingglyphelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<missing-glyph>' in that specification.
<polygon> - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/
svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon 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 polygon.
...-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (
svg) 2the definition of '<polygon>' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<polygon>' in that specification.
<tref> - SVG: Scalable Vector Graphics
the textual content for a <text>
svg element can be either character data directly embedded within the <text> element or the character data content of a referenced element, where the referencing is specified with a <tref> element.
...tpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatecolor>, <set> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes xlink:href dom interface this element implements the
svgtrefelement interface.
... example <
svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced character data </text> </defs> <text x="100" y="100" font-size="45" > inline character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#referencedtext"/> </text> <!-- show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </
svg> specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<font>' in that specification.
<vkern> - SVG: Scalable Vector Graphics
the <vkern>
svg element allows to fine-tweak the vertical distance between two glyphs in top-to-bottom fonts.
... usage context categoriesfont elementpermitted contentempty attributes global attributes core attributes specific attributes u1 g1 u2 g2 k dom interface this element implements the
svgvkernelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<vkern>' in that specification.
Patterns - SVG: Scalable Vector Graphics
« previousnext » patterns patterns are arguably one of the more confusing fill types to use in
svg.
...like gradients, the <pattern> element should be put in the <defs> section of your
svg file.
... <
svg width="200" height="200" xmlns="http://www.w3.org/2000/
svg"> <defs> <lineargradient id="gradient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </lineargradient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="url(#pattern)" stroke="black" width="200" height="200"/> </
svg> screenshotlive ...
SVGAnimatedString.animVal - Web APIs
internet explorer 9 supports script-based
svg animation but it does not support declarative-based
svg animation.
... syntax var = object.animval specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition) recommendation scalable vector graphics (
svg) 2 candidate recommendation browser compatibility the compatibility table on this page is generated from structured data.
SVGAnimationElement.onbegin - Web APIs
the
svganimationelement.onbegin property refers to the event handler for the beginevent.
... syntax var begineventhandler = someelement.onbegin; specifications specification status comment
svg animations level 2the definition of '
svganimationelement.onbegin' in that specification.
SVGAnimationElement.onend - Web APIs
the
svganimationelement.onend property refers to the event handler for the endevent.
... syntax var endeventhandler = someelement.onend; specifications specification status comment
svg animations level 2the definition of '
svganimationelement.onend' in that specification.
SVGAnimationElement.onrepeat - Web APIs
the
svganimationelement.onrepeat property refers to the event handler for the repeatevent.
... syntax var repeateventhandler = someelement.onrepeat; specifications specification status comment
svg animations level 2the definition of '
svganimationelement.onrepeat' in that specification.
SVGElement: abort event - Web APIs
the abort event is fired when page loading is stopped before an
svg element has been allowed to load completely.
... bubbles no cancelable no interface
svgevent event handler property onabort examples
svgelem.addeventlistener('abort', () => { console.log('load aborted.'); }) specifications not really described anywhere specifically, but mentioned in the
svg 2 spec.
SVGElement: error event - Web APIs
the error event is fired when an
svg element does not load properly or when an error occurs during script execution.
... bubbles yes cancelable no interface
svgevent event handler property onerror examples
svgelem.addeventlistener('error', () => { console.log('
svg not loaded properly.'); }) specifications specification status comment scalable vector graphics (
svg) 2the definition of 'error' in that specification.
SVGElement: scroll event - Web APIs
the scroll event is fired when an
svg document view is being shifted along the x and/or y axes.
... bubbles no cancelable no interface
svgevent event handler property onscroll examples
svgelem.addeventlistener('scroll', () => { console.log('
svg scrolled.'); }) specifications specification status comment scalable vector graphics (
svg) 2the definition of 'event changes in
svg2' in that specification.
SVGElement: unload event - Web APIs
the unload event is fired when the dom implementation removes an
svg document from a window or frame.
... bubbles no cancelable no interface
svgevent event handler property onunload examples
svgelem.addeventlistener('unload', () => { console.log('
svg unloaded.'); }) specifications specification status comment scalable vector graphics (
svg) 2the definition of 'unload' in that specification.
SVGElement: zoom event - Web APIs
the zoom event occurs when the user initiates an action which causes the current view of the
svg document fragment to be rescaled.
... bubbles yes cancelable no interface
svgevent event handler property onzoom examples
svgelem.addeventlistener('zoom', () => { console.log('
svg zoomed.'); }) ...
SVGGraphicsElement: cut event - Web APIs
the cut event is fired on an
svggraphicselement when the user has initiated a "cut" action through the browserʼs user interface.
... specifications specification status comment scalable vector graphics (
svg) 2 candidate recommendation definition that the clipboard events apply to
svg elements.
accumulate - SVG: Scalable Vector Graphics
specifications specification status comment
svg animations level 2the definition of 'accumulate' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'accumulate' in that specification.
additive - SVG: Scalable Vector Graphics
specifications specification status comment
svg animations level 2the definition of 'additive' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'additive' in that specification.
attributeType - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <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 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.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'attributetype' in that specification.
azimuth - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedistantlight> html, body,
svg { height: 100%; } <
svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/
svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <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 v...
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'azimuth' in that specification.
baseline-shift - SVG: Scalable Vector Graphics
scalable vector graphics (
svg) 2the definition of 'alignment-baseline' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'alignment-baseline' in that specification.
calcMode - SVG: Scalable Vector Graphics
specifications specification status comment
svg animations level 2the definition of 'calcmode' in that specification.
... editor's draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'calcmode' in that specification.
contentScriptType - SVG: Scalable Vector Graphics
the contentscripttype attribute specifies the default scripting language for the given document fragment on the <
svg> element.
... 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
the contentstyletype attribute specifies the style sheet language for the given document fragment on the <
svg> element.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'contentscripttype' in that specification.
cursor - SVG: Scalable Vector Graphics
«
svg attribute reference home the cursor attribute specifies the mouse cursor displayed when the mouse pointer is over an element.
... 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.
enable-background - 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: <a>, <defs>, <glyph>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <
svg>, <switch>, and <symbol> context notes value accumulate | new [ <x> <y> <width> <height> ]?
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'enable-background' in that specification.
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...
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'filter' in that specification.
font-family - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <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-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 ...
... candidate recommendation no significant change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'font-family' in that specification.
font-size - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <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 t...
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'font-size' in that specification.
font-style - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but only has an effect on the following five elements: <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...
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'font-style' in that specification.
font-variant - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <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-variant="normal">normal text</text> <text x="100" y="20" font-variant="small-caps">small-caps text</text> </
svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <fea...
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'font-variant' in that specification.
font-weight - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <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...
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'font-weight' in that specification.
format - SVG: Scalable Vector Graphics
pe embedded opentype type-1 postscript™ type 1 truetype truetype opentype opentype, including truetype open truetype-gx truetype with gx extensions speedo speedo intellifont intellifont specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'format for <glyphref>' in that specification.
... recommendation initial definition for <glyphref> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'format for <altglyph>' in that specification.
glyphRef - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'glyphref for <glyphref>' in that specification.
... recommendation initial definition for <glyphref> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'altglyph for <altglyph>' in that specification.
horiz-adv-x - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'horiz-adv-x for <glyph> and <missing-glyph>' in that specification.
... recommendation initial definition for <glyph> and <missing-glyph> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'horiz-adv-x for <font>' in that specification.
image-rendering - SVG: Scalable Vector Graphics
candidate recommendation definition in css scalable vector graphics (
svg) 2the definition of 'image-rendering' in that specification.
... candidate recommendation no significant change, only added a reference to css images 3 scalable vector graphics (
svg) 1.1 (second edition)the definition of 'image-rendering' in that specification.
markerHeight - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'markerheight' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'markerheight' in that specification.
markerUnits - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'markerunits' in that specification.
... candidate recommendation no significant change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'markerunits' in that specification.
markerWidth - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'markerwidth' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'markerwidth' in that specification.
method - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'method' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'method' in that specification.
name - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'name for <font-face-name>' in that specification.
... recommendation initial definition for <font-face-name> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'name for <color-profile>' in that specification.
paint-order - SVG: Scalable Vector Graphics
example <
svg xmlns="http://www.w3.org/2000/
svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px"...
... font-weight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </
svg> the example would be rendered as follows: the stroke under effect could be achieved via the following css property: #stroke-under { paint-order: stroke; } specifications specification status comment scalable vector graphics (
svg) 2the definition of 'paint-order' in that specification.
rotate - SVG: Scalable Vector Graphics
examples
svg <
svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w3.org/2000/
svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!--...
...ath> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </
svg> result specifications specification status comment
svg animations level 2the definition of 'rotate' in that specification.
side - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html, body,
svg { height: 100%; } text { font: 25px arial, helvelica, sans-serif; } <
svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/
svg"> <text> <textpath href="#circle1" side="left">text left 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 ...
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'side' in that specification.
spacing - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'spacing' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'spacing' in that specification.
stop-opacity - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'stop-opacity' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of 'stop-opacity' in that specification.
strikethrough-position - SVG: Scalable Vector Graphics
«
svg attribute reference home the strikethrough-position attribute represents the ideal vertical position of the strikethrough.
... usage context categories none value <number> animatable no normative document
svg 1.1 (2nd edition) elements the following elements can use the strikethrough-position attribute: <font-face> ...
strikethrough-thickness - SVG: Scalable Vector Graphics
«
svg attribute reference home the strikethrough-thickness attribute represents the ideal thickness of the strikethrough.
... usage context categories none value <number> animatable no normative document
svg 1.1 (2nd edition) elements the following elements can use the strikethrough-thickness attribute: <font-face> ...
string - SVG: Scalable Vector Graphics
the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "
svg".
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'string' in that specification.
tabindex - SVG: Scalable Vector Graphics
html, body,
svg { height: 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.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of 'tabindex' in that specification.
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 identity | 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> ...
underline-position - SVG: Scalable Vector Graphics
«
svg attribute reference home the underline-position attribute represents the ideal vertical position of the underline.
... usage context categories none value <number> animatable no normative document
svg 1.1 (2nd edition) elements the following elements can use the underline-position attribute: <font-face> ...
underline-thickness - SVG: Scalable Vector Graphics
«
svg attribute reference home the underline-thickness attribute represents the ideal thickness of the underline.
... usage context categories none value <number> animatable no normative document
svg 1.1 (2nd edition) elements the following elements can use the underline-thickness attribute: <font-face> ...
vector-effect - SVG: Scalable Vector Graphics
example example: vector-effect="non-scaling-stroke" <
svg viewbox="0 0 500 240"> <!-- normal --> <path d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- scaled --> <path transform="translate(100,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- fixed--> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="m10,20l40,100l39...
...,200z" stroke="black" stroke-width="2px" fill="none"></path> </
svg> result specifications specification status comment scalable vector graphics (
svg) 2the definition of 'vector-effect' in that specification.
vert-adv-y - SVG: Scalable Vector Graphics
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.
... recommendation initial definition for <glyph> and <missing-glyph> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'vert-adv-y for <font>' in that specification.
xlink:title - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (
svg) 2the definition of 'seed' in that specification.
... candidate recommendation deprecated the attribute and made it only apply to <a>, <image>, <lineargradient>, <pattern>, <radialgradient>, <script>, <textpath>, and <use> scalable vector graphics (
svg) 1.1 (second edition)the definition of 'seed' in that specification.
xlink:type - SVG: Scalable Vector Graphics
in
svg, only simple links are available.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'xlink:type' in that specification.
<altGlyphItem> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentone or more <glyphref> elements example attributes global attributes core attributes specific attributes none dom interface this element implements the
svgaltglyphitemelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<altglyphitem>' in that specification.
<color-profile> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes core attributes » xlink attributes » specific attributes local name rendering-intent xlink:href dom interface this element implements the
svgcolorprofileelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<color-profile>' in that specification.
<feDistantLight> - SVG: Scalable Vector Graphics
usage context categorieslight source elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes specific attributes azimuth elevation dom interface this element implements the
svgfedistantlightelement interface.
... working draft no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '<fedistantlight>' in that specification.
<font-face-name> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentempty attributes global attributes core attributes » specific attributes name dom interface this element implements the
svgfontfacenameelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<font-face-name>' in that specification.
<glyphRef> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentempty attributes global attributes core attributes » presentation attributes » xlink attributes » class style specific attributes x y dx dy glyphref format xlink:href dom interface this element implements the
svgglyphrefelement interface.
... specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of '<glyphref>' in that specification.
<mask> - SVG: Scalable Vector Graphics
html,body,
svg { height:100% } <
svg viewbox="-10 -10 120 120"> <mask id="mymask"> <!-- everything under a white pixel will be visible --> <rect x="0" y="0" width="100" height="100" fill="white" /> <!-- everything under a black pixel will be invisible --> <path d="m10,35 a20,20,0,0,1,50,35 a20,20,0,0,1,90,35 q90,65,50,95 q10,65,10,35 z" fill="black" /> </mask> <polygon points="-10,110 110,110 110,-10" fill="orange" /> <!-- with this mask applied, we "punch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#mymask)" /> </
svg> attributes height this attribute defines the height...
... candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of '<mask>' in that specification.
SVGAnimatedString.baseVal - Web APIs
specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition) recommendation scalable vector graphics (
svg) 2 candidate recommendation browser compatibility the compatibility table on this page is generated from structured data.
SVGEvent - Web APIs
the
svgevent interface represents the event object for most
svg-related events.
Index - Web APIs
541 canvaspattern.settransform() api, canvas, canvaspattern, experimental, method, reference the canvaspattern.settransform() method uses an
svgmatrix object as the pattern's transformation matrix and invokes it on the pattern.
... 557 canvasrenderingcontext2d.currenttransform api, canvas, canvasrenderingcontext2d, experimental, property, reference the canvasrenderingcontext2d.currenttransform property of the canvas 2d api returns or sets a dommatrix (current specification) or
svgmatrix (old specification) object for the current transformation matrix.
... 726 domparser api, dom, dom parsing, document, html, htmldocument, makebrowseragnostic, needsmarkupwork, parsing, reference,
svg, xml, xmldocument the domparser interface provides the ability to parse xml or html source code from a string into a dom document.
...And 183 more matches
Frequently Asked Questions - Archive of obsolete content
what is the status of the
svg implementation?
... we currently maintain two documents to help answer this question: a status page for
svg in firefox 1.5+ and a status page for
svg in the development trunk.
... why does mozilla show source code/gibberish instead of
svg?
...And 51 more matches
Adding vector graphics to the Web - Learn web development
objective: learn how to embed an
svg (vector) image into a webpage.
... note: this article doesn't intend to teach you
svg; just what it is, and how to add it to web pages.
...the
svg format allows us to create powerful vector graphics for use on the web.
...And 46 more matches
filter - CSS: Cascading Style Sheets
you can also reference an
svg filter with a url to an
svg filter element.
... syntax /* url to
svg filter */ filter: url("filters.
svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-fu...
...nction> [<filter-function>]* | none for a reference to an
svg <filter> element, use the following: filter: url(file.
svg#filter-element-id) interpolation if both the beginning and end filters have a function list of the same length without <url>, each of their filter functions is interpolated according to its specific rules.
...And 31 more matches
mix-blend-mode - CSS: Cascading Style Sheets
saturation | color | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <
svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,100%,50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,50%)" /> <stop ...
...0,100%,50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </
svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="item firefox"></div> <
svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> ...
... <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </
svg> </div> </div> </div> <div class="cell"> darken <div class="container darken"> <div class="group"> <div class="item firefox"></div> <
svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </
svg> </div> </div> </div> <div class="cell"> screen <div class="container screen"> <div class="group"> <div class="item firefox"></div> <
svg vie...
...And 20 more matches
clip-path - CSS: Cascading Style Sheets
syntax /* keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.
svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,...
... values <clip-source> a <url> referencing an
svg <clippath> element.
... view-box uses the nearest
svg viewport as the reference box.
...And 19 more matches
Image file type and format guide - Web media technologies
microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari
svg scalable vector graphics image/
svg+xml .
svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its c...
...
svg (scalable vector graphics)
svg is an xml-based vector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth.
...
svg files are ideal for diagrams, icons, and other images which can be accurately drawn at any size.
...And 14 more matches
pointer-events - CSS: Cascading Style Sheets
syntax /* keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblepainted; /*
svg only */ pointer-events: visiblefill; /*
svg only */ pointer-events: visiblestroke; /*
svg only */ pointer-events: visible; /*
svg only */ pointer-events: painted; /*
svg only */ pointer-events: fill; /*
svg only */ pointer-events: stroke; /*
svg only */ pointer-events: all; /*
svg only */ /* global values */ pointer-events: inherit; pointer-events: ...
...in
svg content, this value and the value visiblepainted have the same effect.
...
svg only (experimental for html) visiblepainted
svg only (experimental for html).
...And 10 more matches
Viewport concepts - CSS: Cascading Style Sheets
this article explains the concept of the viewport — what it is, its impact in terms of css,
svg, and mobile devices — and differentiates between the visual viewport and the layout viewport.
... for a page containing iframes, objects, or external
svg, both the containing pages and each included file has their own unique window object.
...they are actually relative to the viewport, which is the window in the main document but is the intrinsic size of the element's parent in a nested browsing context like objects, iframes and
svg.
...And 9 more matches
HTML5 Parser - Developer guides
the new parser introduces these major improvements: you can now use
svg and mathml inline in html5 pages, without xml namespace syntax.
...are not valid javascript escapes; the character code strategy is more general-purpose.) inline
svg and mathml support as a completely new parsing feature, html5 introduced support for inline
svg and mathml in text/html.
... this means that you can now use
svg and mathml inline in text/html similarly to what has previously been possible in application/xhtml+xml.
...And 9 more matches
-moz-context-properties - CSS: Cascading Style Sheets
the -moz-context-properties property can be used within privileged contexts in firefox to share the values of specified properties of the element with a child
svg image.
... if you reference an
svg image in a webpage (such as with the <img> element or as a background image), the
svg image can coordinate with the embedding element (its context) to have the image adopt property values set on the embedding element.
... syntax /* keyword values */ -moz-context-properties: fill; -moz-context-properties: fill, stroke; /* global values */ -moz-context-properties: inherit; -moz-context-properties: initial; -moz-context-properties: unset; values fill expose the fill value set on the image to the embedded
svg.
...And 8 more matches
Event reference
svg events
svgabort
svgerror
svgload
svgresize
svgscroll
svgunload
svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events ch...
... beginevent timeevent
svg a smil animation element begins.
... endevent timeevent
svg a smil animation element ends.
...And 8 more matches
Document Object Model (DOM) - Web APIs
usually, that means javascript, although modeling html,
svg, or xml documents as objects are not part of the core javascript language, as such.
...
svg interfaces
svg element interfaces
svgaelement
svgaltglyphelement
svgaltglyphdefelement
svgaltglyphitemelement
svganimationelement
svganimateelement
svganimatecolorelement
svganimatemotionelement
svganimatetransformelement
svgcircleelement
svgclippathelement
svgcolorprofileelement
svgcomponenttransferfunctionelement
svgcursorelement
svgdefselement
svgdescelement
svge...
...lement
svgellipseelement
svgfeblendelement
svgfecolormatrixelement
svgfecomponenttransferelement
svgfecompositeelement
svgfeconvolvematrixelement
svgfediffuselightingelement
svgfedisplacementmapelement
svgfedistantlightelement
svgfedropshadowelement
svgfefloodelement
svgfefuncaelement
svgfefuncbelement
svgfefuncgelement
svgfefuncrelement
svgfegaussianblurelement
svgfeimageelement
svgfemergeelement
svgfemergenodeelement
svgfemorphologyelement
svgfeoffsetelement
svgfepointlightelement
svgfespecularlightingelement
svgfespotlightelement
svgfetileelement
svgfeturbulenceelement
svgfilterelement
svgfilterprimitivestandardattributes
svgfontelement
svgfontfaceelement
svgfontfaceformatelement
svgfontfacenameelement
svgfontfacesrcelement
svgfontfaceurielement ...
...And 5 more matches
offset-path - CSS: Cascading Style Sheets
the offset-path css property specifies a motion path for an element to follow and defines the element's positioning within the parent container or
svg coordinate system.
... url() references the id of an
svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path.
... path() a path string defined with
svg coordinate syntax.
...And 5 more matches
Index - Archive of obsolete content
182 drag & drop code snippets 183 embedding
svg code snippets no summary!
... 208
svg animation needscontent no summary!
... 209
svg general code snippets no summary!
...And 4 more matches
Getting started with React - Learn web development
looks like this: moz-todo-react ├── readme.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── app.css ├── app.js ├── app.test.js ├── index.css ├── index.js ├── logo.
svg └── serviceworker.js the src directory is where we'll spend most of our time, as it's where the source code for our application lives.
...this file contains our first component, app, and a few other lines of code: import react from 'react'; import logo from './logo.
svg'; import './app.css'; function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload.
... import react from 'react'; import logo from './logo.
svg'; import './app.css'; the first statement imports the react library itself.
...And 3 more matches
CanvasPattern.setTransform() - Web APIs
the canvaspattern.settransform() method uses an
svgmatrix or dommatrix object as the pattern's transformation matrix and invokes it on the pattern.
... syntax void pattern.settransform(matrix); parameters matrix an
svgmatrix or dommatrix to use as the pattern's transformation matrix.
... examples using the settransform method this is just a simple code snippet which uses the settransform method to create a canvaspattern with the specified pattern transformation from an
svgmatrix.
...And 3 more matches
getBBox() - Web APIs
the
svggraphicselement.getbbox() allows us to determine the coordinates of the smallest rectangle in which the object fits.
... the coordinates returned are with respect to the current
svg space (after the application of all geometry attributes on all the elements contained in the target element).
... getbbox returns different values than getboundingclientrect(), as the latter returns value relative to the viewport syntax let bboxrect = object.getbbox(); return value the returned value is a
svgrect object, which defines the bounding box.
...And 3 more matches
From object to iframe — other embedding technologies - Learn web development
<iframe>s are for embedding other web pages, and the other two allow you to embed pdfs,
svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly.
... the <embed> and <object> elements the <embed> and <object> elements serve a different function to <iframe> — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like java applets and flash, pdf (which can be shown in a browser with a pdf plugin), and even content like videos,
svg and images!
...instead of relying on adobe flash, you should use html5 video for your media needs,
svg for vector graphics, and canvas for complex images and animations.
...And 2 more matches
Gecko info for Windows accessibility vendors
role_spinbutton dhtml: role="wairole:spinbutton" fires event_valuechange when spinbutton moves role_diagram <
svg> indicates the root of an
svg tree role_animation not supported.
...
svg : scalable vector graphics.
...mozilla's
svg project has been through several stalls and rebirths --
svg will probably become more of a priority if other well known browsers support it.
...And 2 more matches
Drawing shapes with canvas - Web APIs
drawing rectangles unlike
svg, <canvas> only supports two primitive shapes: rectangles and paths (lists of points connected by lines).
... let's see how we can construct a path2d object: path2d() the path2d() constructor returns a newly instantiated path2d object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of
svg path data.
... new path2d(); // empty path object new path2d(path); // copy from another path2d object new path2d(d); // path from
svg path data all path methods like moveto, rect, arc or quadraticcurveto, etc., which we got to know above, are available on path2d objects.
...And 2 more matches
HTMLImageElement.alt - Web APIs
<div class="container"> <div class="left-margin"> <img src="/files/16861/margin-flourish.
svg" alt=""> </div> <div class="contents"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... <li class="toolbar" aria-role="toolbar"> <a href="songs.html" aria-role="button"><img src="songicon.
svg" alt="songs"</a> <a href="albums.html" aria-role="button"><img src="albumicon.
svg" alt="albums"</a> <a href="artists.html" aria-role="button"><img src="artisticon.
svg" alt="artists"</a> <a href="playlists.html" aria-role="button"><img src="playlisticon.
svg" alt="playlists"</a> </li> images containining diagrams or maps when an image contains information presented as a diagram, chart, gra...
...this is true whether the /me image is in a bitmapped format such as png or jpeg or in a vector format like
svg.
...And 2 more matches
mask - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image used as mask */ mask: url(masks.
svg#star); /* element within
svg graphic used as mask */ /* combined values */ mask: url(masks.
svg#star) luminance; /* element within
svg graphic used as luminance mask */ mask: url(masks.
svg#star) 40px 20px; /* element within
svg graphic used as mask positioned 40px from the top and 20px from the left */ mask: url(masks.
svg#star) 0 0/50px 50px; /* element within
svg gr...
...aphic used as mask with a width and height of 50px */ mask: url(masks.
svg#star) repeat-x; /* element within
svg graphic used as horizontally repeated mask */ mask: url(masks.
svg#star) stroke-box; /* element within
svg graphic used as mask extending to the box enclosed by the stroke */ mask: url(masks.
svg#star) exclude; /* element within
svg graphic used as mask and combined with background using non-overlapping parts */ /* global values */ mask: inherit; mask: initial; mask: unset; /* multiple masks */ mask: url(masks.
svg#star) left / 16px repeat-y, /* element within
svg graphic is used as a mask on the left-hand side with a width of 16px */ url(masks.
svg#circle) right / 16px repeat-y; /* element within
svg graphic is used as a mask on the right-hand side with a...
... formal definition initial valueas each of the properties of the shorthand:mask-image: nonemask-mode: match-sourcemask-repeat: no-repeatmask-position: centermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: addapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-position: refer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueas each of the properties of the shorthand:mask-image: as specified, but with <url> values made absolutemask-mode:...
...And 2 more matches
transform-box - CSS: Cascading Style Sheets
view-box the nearest
svg viewport is used as the reference box.
... if a viewbox attribute is specified for the
svg viewport creating element, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute, and the dimension of the reference box is set to the width and height values of the viewbox attribute.
... formal definition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples
svg transform-origin scoping in this example we have an
svg: <
svg id="
svg" xmlns="http://www.w3.org/2000/
svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </
svg> in the css we have an animation that uses a transform to rotate the rectangle infinitely.
...And 2 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
some examples of xml-based markup languages include xhtml, which is html redefined on an xml base;
svg, for expressing vector images; and mathml, for expressing mathematical formulas.
... as the "extensible" part of xml implies, elements from various xml-based languages such as xhtml and
svg can be interspersed in one another as a means to extend the language.
...for example, even though xhtml and
svg have elements with the same name, these can be distinguished.
... the namespace uri for xhtml is "http://www.w3.org/1999/xhtml" ; for
svg is it "http://www.w3.org/2000/
svg".
Example Sticky Notes - Archive of obsolete content
ear: left"><a href="http://validator.w3.org/check?uri=referer"><img src="https://udn.realityripple.com/samples/e2/dd625ef1cd.png" width="88" height="31" alt="valid html 4.01" style="border: 1px none"></a></p> </body> </html> notes.xml <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:
svg="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- in above only xbl namespace declaration is mandatory.
... the others are only needed if you plan to handle xul (xml user interface language) or/and
svg (scalable vector graphics) in your bindings; xlink in xml also may come useful sometimes.
...--> <stylesheet src="notes.css"/> </resources> <content> <!-- this
svg graphics will be added automatically around each bound element.
...--> <
svg:
svg width="60px" height="60px"> <
svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <
svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <
svg:circle cx="25px" cy="12px" r="12" fill="#00ff00" transform="translate(7,12)"/> <
svg:circle cx="25px" cy="12px" r="12" fill="#0000ff" transform="translate(-7,12)"/> </
svg:g> </
svg:
svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around javascript code are not mandatory but recommended.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
28 baseline css, glossary,
svg, alignment, typography the baseline is a term used in european and west asian typography meaning an imaginary line upon which the characters of a font rest.
... 128 empty element codingscripting, glossary, intermediate an empty element is an element from html,
svg, or mathml that cannot have any child nodes (i.e., nested elements or text nodes).
... 175 glyph glossary,
svg, typography a glyph is a term used in typography for the visual representation of one or more characters.
... 396
svg beginner, codingscripting, glossary, graphics,
svg, l10n:priority scalable vector graphics (
svg) is a 2d vector image format based on an xml syntax.
Index - Learn web development
243 multimedia and embedding assessment, audio, beginner, codingscripting, embedding, flash, guide, html, images, landing, learn, multimedia,
svg, vector graphics, video, web, iframes, imagemaps, img, responsive we've looked at a lot of text so far in this course, but the web would be really boring only using text.
... 244 adding vector graphics to the web beginner, graphics, guide, html, images, learn, raster,
svg, vector, iframe, img this article has provided you with a quick tour of what vector graphics and
svg are, why they are useful to know about, and how to include
svg inside your webpages.
... it was never intended to be a full guide to learning
svg, just a pointer so you know what
svg is if you meet it in your travels around the web.
... so don't worry if you don't feel like you are an
svg expert yet.
Working with Svelte stores - Learn web development
{/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1.5rem; z-index: 100; opacity: 95%; } div p { color: #fff; } div
svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </style> let's walk through this piece of code in detail.
...() => visible = false, ms) // and hide it after ms milliseconds } } $: onmessagechange($alert, ms) // whenever the alert store or the ms props changes run onmessagechange ondestroy(()=> cleartimeout(timeout)) // make sure we clean-up the timeout </script> and update the alert.svelte markup section like so: {#if visible} <div on:click={() => visible = false}> <
svg xmlns="http://www.w3.org/2000/
svg" viewbox="0 0 20 20"><path d="m12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99c9.789 1.436 10.67 0 12.432 0zm8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945...
...-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814c12.098 19.02 9.365 20 8.309 20z"/></
svg> <p>{ $alert }</p> </div> {/if} here we first create the prop ms with a default value of 3000 (milliseconds).
... we also added an
svg icon above the alert paragraph, to make it look a bit nicer.
Eclipse CDT
for example, in content/
svg/content/src/ns
svgellipseelement.cpp eclipse shows a parse error due to ns_dom_interface_map_entry_classinfo not being defined.
... this define is in nsdomclassinfoid.h, which is included via the following include chain: content/
svg/content/src/ns
svgellipseelement.cpp content/
svg/content/src/ns
svgpathgeometryelement.h content/
svg/content/src/ns
svggraphicelement.h content/
svg/content/src/ns
svgstylableelement.h content/
svg/content/src/ns
svgelement.h content/base/src/nsgenericelement.h obj-debug/dist/include/nsdomclassinfoid.h in nsdomclassinfoid.h the ns_dom_interface_map_entry_classinfo define is behind an |ifdef _impl_ns_layout|.
... the properties for ns
svgellipseelement.cpp show that this define was picked up by the build option discovery and set on ns
svgellipseelement.cpp, but somehow it's not set for nsdomclassinfoid.h.
... however, if you right click on nsdomclassinfoid.h in the project explorer and select "index > create parser log file", the log shows "context" is set to "accessible/src/base/accevent.cpp", not "content/
svg/content/src/ns
svgellipseelement.cpp", and if you check the properties for accevent.cpp, indeed it is not built with the _impl_ns_layout define.
Extras
n>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <
svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetrans...
...tename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </
svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <
svg width="15px" height="15px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="...
...100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="url(#radgrad2)" r="5px" cx="5px" cy="5px"/> </g> </
svg> </mtext> </msup> <mrow> <mo>â…†</mo> <mi>θ</mi> </mrow> </math> <div style="width: 300px; margin-left: auto; margin-right: auto;"> <
svg width="300px" height="250px"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> </lineargradient> <lineargradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0...
...="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </
svg> </div> inline javascript html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math> javascript content function whoistherealert(evt) { alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoistherealert); } function init() { attachlistener("num"); att...
DOMParser - Web APIs
it must contain either html, xml, xhtml+xml, or
svg document.
...the possible values are the following: mimetype doc.constructor text/html document text/xml xmldocument application/xml xmldocument application/xhtml+xml xmldocument image/
svg+xml xmldocument examples parsing xml once you have created a parser object, you can parse xml from a string using the parsefromstring() method: let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") error handling note that if the parsing process fails, the domparser does not throw an exception, but instead returns an error document: <parsererror xmlns="ht...
... parsing
svg or html the domparser can also be used to parse an
svg document (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7) or an html document (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9).
... if the mime type is text/xml, the result will be an xmldocument if the mime type is image/
svg+xml, the result will be an
svgdocument if the mime type is text/html, the result will be an htmldocument let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") // returns a document, but not an
svgdocument nor an htmldocument parser = new domparser(); doc = parser.parsefromstring(stringcontaining
svgsource, "image/
svg+xml") // returns a
svgdocument, which also is a document.
Document.rootElement - Web APIs
document.rootelement returns the element that is the root element of the document if it is an <
svg> element, otherwise null.
... syntax const element = document.rootelement notes if the document is a non-empty
svg document, then the rootelement will be an
svgsvgelement, identical to the documentelement.
... specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svgdocument.rootelement' in that specification.
... candidate recommendation deprecated scalable vector graphics (
svg) 1.1 (second edition)the definition of '
svgdocument.rootelement' in that specification.
Document - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...e4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document.
...html, xml,
svg, …), a larger api is available: html documents, served with the "text/html" content type, also implement the htmldocument interface, whereas xml and
svg documents implement the xmldocument interface.
... document.rootelement like document.documentelement, but only for <
svg> root elements.
cx - Web APIs
the cx read-only property of the
svgcircleelement interface reflects the cx attribute of a <circle> element and by that defines the x-coordinate of the circleʼs center.
... syntax var xcoordinate = element.cx; value an
svganimatedlength representing the x-coordinate of the circleʼs center.
... example
svg <
svg xmlns="http://www.w3.org/2000/
svg" viewbox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </
svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cx); specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svgcircleelement.cx' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '
svgcircleelement.cx' in that specification.
cy - Web APIs
the cy read-only property of the
svgcircleelement interface reflects the cy attribute of a <circle> element and by that defines the y-coordinate of the circleʼs center.
... syntax var ycoordinate = element.cy; value an
svganimatedlength representing the y-coordinate of the circleʼs center.
... example
svg <
svg xmlns="http://www.w3.org/2000/
svg" viewbox="0 0 100 100" width="200" height="200"> <circle cy="50" cy="50" r="50" fill="gold" id="circle"/> </
svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cy); specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svgcircleelement.cy' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '
svgcircleelement.cy' in that specification.
r - Web APIs
the r read-only property of the
svgcircleelement interface reflects the r attribute of a <circle> element and by that defines the radius of the circle.
... syntax var radius = element.r; value an
svganimatedlength representing the radius of the circle.
... example
svg <
svg xmlns="http://www.w3.org/2000/
svg" viewbox="0 0 100 100" width="200" height="200"> <circle r="50" r="50" r="50" fill="gold" id="circle"/> </
svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.r); specifications specification status comment scalable vector graphics (
svg) 2the definition of '
svgcircleelement.r' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of '
svgcircleelement.r' in that specification.
Web APIs
ytestreamcontroller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination resizeobserver resizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s
svgaelement
svgaltglyphdefelement
svgaltglyphelement
svgaltglyphitemelement
svgangle
svganimatecolorelement
svganimateelement
svganimatemotionelement
svganimatetransformelement
svganimatedangle
svganimatedboolean
svganimatedenumeration
svganimatedinteger
svganimatedlength
svganimatedlengthlist
svganimatednumber
svganimatednumberlist
svganimatedpoints
svganimatedpreserveaspectratio
svganimated...
...rect
svganimatedstring
svganimatedtransformlist
svganimationelement
svgcircleelement
svgclippathelement
svgcolorprofileelement
svgcomponenttransferfunctionelement
svgcursorelement
svgdefselement
svgdescelement
svgelement
svgellipseelement
svgevent
svgexternalresourcesrequired
svgfeblendelement
svgfecolormatrixelement
svgfecomponenttransferelement
svgfecompositeelement
svgfeconvolvematrixelement
svgfediffuselightingelement
svgfedisplacementmapelement
svgfedistantlightelement
svgfedropshadowelement
svgfefloodelement
svgfefuncaelement
svgfefuncbelement
svgfefuncgelement
svgfefuncrelement
svgfegaussianblurelement
svgfeimageelement
svgfemergeelement
svgfemergenodeelement
svgfemorphologyelement
svgfeoffsetelement
svgfepointlightelement
svgfespecularlightingelement
svgfespotlightelement
svgfetil...
...eelement
svgfeturbulenceelement
svgfilterelement
svgfilterprimitivestandardattributes
svgfontelement
svgfontfaceelement
svgfontfaceformatelement
svgfontfacenameelement
svgfontfacesrcelement
svgfontfaceurielement
svgforeignobjectelement
svggelement
svggeometryelement
svgglyphelement
svgglyphrefelement
svggradientelement
svggraphicselement
svghkernelement
svgimageelement
svglength
svglengthlist
svglineelement
svglineargradientelement
svgmpathelement
svgmaskelement
svgmatrix
svgmeshelement
svgmetadataelement
svgmissingglyphelement
svgnumber
svgnumberlist
svgpathelement
svgpatternelement
svgpoint
svgpolygonelement
svgpolylineelement
svgpreserveaspectratio
svgradialgradientelement
svgrect
svgrectelement
svgrenderingintent
svgsvgelement
svgscriptelement
svgsetelement
svgso...
...lidcolorelement
svgstopelement
svgstringlist
svgstylable
svgstyleelement
svgswitchelement
svgsymbolelement
svgtrefelement
svgtspanelement
svgtests
svgtextcontentelement
svgtextelement
svgtextpathelement
svgtextpositioningelement
svgtitleelement
svgtransform
svgtransformlist
svgtransformable
svgurireference
svgunittypes
svguseelement
svgvkernelement
svgviewelement
svgzoomandpan screen screenorientation scriptprocessornode scrolltooptions securitypolicyviolationevent selection sensor sensorerrorevent serviceworker serviceworkercontainer serviceworkerglobalscope serviceworkermessageevent serviceworkerregistration serviceworkerstate shadowroot sharedworker sharedworkerglobalscope slottable sourcebuffer sourcebufferlist speechgrammar speechgrammarlist speechrecognition sp...
Mozilla CSS extensions - CSS: Cascading Style Sheets
ard version border-inline-start] -moz-border-start-color [superseded by the standard version border-inline-start-color] -moz-border-start-style [superseded by the standard version border-inline-start-style] -moz-border-start-width [superseded by the standard version border-inline-start-width] -moz-box-sizing [prefixed version still accepted] c clip-path [applying to more than
svg] -moz-column-count [prefixed version still accepted] -moz-column-fill [prefixed version still accepted] -moz-column-gap [prefixed version still accepted] -moz-column-width [prefixed version still accepted] -moz-column-rule [prefixed version still accepted] -moz-column-rule-width [prefixed version still accepted] -moz-column-rule-style [prefixed version still accepted] -moz-c...
...olumn-rule-color [prefixed version still accepted] -moz-context-properties f–m filter [applying to more than
svg] -moz-font-feature-settings [prefixed version still accepted] -moz-font-language-override [prefixed version still accepted] -moz-hyphens [prefixed version still accepted] -moz-margin-end [superseded by the standard version margin-inline-end] -moz-margin-start [superseded by the standard version margin-inline-start] mask [applying to more than
svg] o -moz-opacityobsolete since gecko 1.9.1 -moz-outlineobsolete since gecko 1.9.2 -moz-outline-colorobsolete since gecko 1.9.2 -moz-outline-offsetobsolete since gecko 1.9.2 -moz-outline-styleobsolete since gecko 1.9.2 -moz-outline-widthobsolete since gecko 1.9.2 p -moz-padding-end [supe...
...rseded by the standard version padding-inline-start] -moz-padding-start [superseded by the standard version padding-inline-end] -moz-perspective [prefixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than
svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko 53 -moz-text-decoration-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed ver...
...oz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-track :-moz-read-only :-moz-read-write s ::-moz-scrolled-canvas ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-selectiondeprecated since gecko 62 :-moz-submit-invalid :-moz-suppressed ::-moz-
svg-foreign-content t ::-moz-table ::-moz-table-cell ::-moz-table-column ::-moz-table-column-group ::-moz-table-outer ::-moz-table-row ::-moz-table-row-group :-moz-tree-cell :-moz-tree-cell-text :-moz-tree-cell-text(hover) :-moz-tree-checkbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-r...
Linear-gradient Generator - CSS: Cascading Style Sheets
-height: 14px; text-align: center; } .ui-slider-button:hover { background-color: #379b4a; cursor: pointer; } .ui-slider > input { width: 50px; margin: 0 10px; padding: 0; text-align: center; } /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("dropdown_arrow.
svg"); background-position: right 0.3em center; background-repeat: no-repeat; background-color: #359740; background-size: 1.1em; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: ...
....button { margin: 0 38px 0 0; float: right; } #gradient-order { width: 60%; height: 5px; margin: 5px 0 0 0; overflow: visible; background-color: #ccc; position: relative; } #gradient-order:before { content: "gradient order - drag to order"; position: absolute; top: 100%; color: #ccc; } #gradient-order:after { content: ""; width: 24px; height: 24px; background: url('images/arrow.
svg'); background-size: 24px 24px; position: absolute; right: -10px; top: -9.5px; } /** * output */ #output { width: 100%; padding: 10px 0; margin: 20px 0 50px 0; border: 2px dashed #ccc; border-radius: 5px; display: table; font-size: 13px; overflow: hidden; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } #output .css-property { w...
...t; point.nextpoint = this; if (this.nextpoint) this.nextpoint.prevpoint = this; }; /** * gradient axis */ function gradientaxis(container, id) { var axis = createclasselement('div', 'gradient-axis', null); var line = createclasselement('div', 'gradient-line', axis); var rotate_point = createclasselement('div', 'rotate-point', axis); axis.setattribute('axisid', id); var
svg = this.create
svgarrow(id); rotate_point.appendchild(
svg); this.id = id; this.axis = axis; this.unit = '%'; this.line = line; this.container = container; this.lsize = container.clientwidth / 2; this.firstpoint = null; this.activepoint = null; this.gradient = ''; this.num_points = 0; this.size = 0; this.angle = 0; this.state = false; this.updateonresize(); trackm...
...ouse(rotate_point, this.updateaxisangle.bind(this), this.startrotation.bind(this)); container.appendchild(axis); line.addeventlistener('click', this.placegradientpoint.bind(this)); }; gradientaxis.prototype.create
svgarrow = function create
svgarrow(id) { var xmlns = 'http://www.w3.org/2000/
svg'; var
svg = document.createelementns(xmlns, '
svg'); var path = document.createelementns(xmlns, 'path');
svg.setattribute('class', 'gradient-arrow');
svg.setattribute('width', '25');
svg.setattribute('height', '25'); path.setattribute('fill', '#ccc'); path.setattribute('d', 'm 25,12.5 l 0,0 l 7.5,12.5 l 0,25');
svg.appendchild(path); return
svg; }; gradientaxis.prototype.placegradientpoint = function placegradientpoint(e) { this.updatecenterpointpos(); var poi...
animation - CSS: Cascading Style Sheets
2"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; }
svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/
svg+xml;charset=utf-8,%3c
svg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2f
svg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisp...
...3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2f
svg%3e#play'); } button.pause { background-image: url('data:image/
svg+xml;charset=utf-8,%3c
svg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2f
svg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c...
...4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2f
svg%3e#pause'); } button.restart { background-image: url('data:image/
svg+xml;charset=utf-8,%3c
svg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2f
svg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%...
...2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2f
svg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { t...
backdrop-filter - CSS: Cascading Style Sheets
/* keyword value */ backdrop-filter: none; /* url to
svg filter */ backdrop-filter: url(commonfilters.
svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter...
...: url(filters.
svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied to the backdrop.
... <filter-function-list> a space-separated list of <filter-function>s or an
svg filter that will be applied to the backdrop.
... formal definition initial valuenoneapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>?
<color> - CSS: Cascading Style Sheets
the other color keywords should only be used in css and
svg.
... although various colors not in the specification (mostly adapted from the x11 colors list) were supported by early browsers, it wasn't until
svg 1.0 and css colors level 3 that they were formally defined.
... they are called the extended color keywords, the x11 colors, or the
svg colors.
...adds
svg colors and rgba(), hsl(), and hsla() functional notations.
mask-clip - CSS: Cascading Style Sheets
view-box uses the nearest
svg viewport as reference box.
... if a viewbox attribute is specified for the element creating the
svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the reference box is set to the width and height values of the viewbox attribute.
... formal definition initial valueborder-boxapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px...
...; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.
svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("ch...
text-rendering - CSS: Cascading Style Sheets
/* keyword values */ text-rendering: auto; text-rendering: optimizespeed; text-rendering: optimizelegibility; text-rendering: geometricprecision; /* global values */ text-rendering: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an
svg property that is not defined in any css standard.
... in
svg, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system.
... html <p class="speed">lyowat - ff fi fl ffl</p> <p class="legibility">lyowat - ff fi fl ffl</p> css p { font: 1.5em "constantia", "times new roman", "georgia", "palatino", serif } .speed { text-rendering: optimizespeed; } .legibility { text-rendering: optimizelegibility; } result specifications specification status comment scalable vector graphics (
svg) 2the definition of 'text-rendering' in that specification.
... candidate recommendation no change scalable vector graphics (
svg) 1.1 (second edition)the definition of 'text-rendering' in that specification.
url() - CSS: Cascading Style Sheets
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idof
svgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.
svg#mask1"); /* properties with fallbacks */ cursor: url(...
...os.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.
svg) url(star.
svg) url(star.
svg) url(star.
svg) url(star.
svg); /* at-rules */ @document url("https://www.example.com/") { ...
...the following are all valid and equivalent: <css_property>: url("https://example.com/image.png") <css_property>: url('https://example.com/image.png') <css_property>: url(https://example.com/image.png) path references the id of an
svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path.
...syntax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); } result data-uri html <div class="background"></div> css .background { height: 100vh; } .background { background: yellow; background: url("data:image/
svg+xml,%3c
svg xmlns='http://www.w3.org/2000/
svg' width='90' height='45'%3e%3cpath d='m10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h60' stroke='red' stroke-width='5'/%3e%3c/
svg%3e"); } specifications specification status comment css values and units module level 4the definition of 'url()' in ...
Graphic design for responsive sites - Progressive web apps (PWAs)
you could use css3 properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using
svg for other ui elements, instead of raster graphics formats.
... the downsides here are that css3 properties and
svg don't work on old browsers such as ie6-8 (although polyfills are available, and you could build in fallbacks), and
svg isn't suitable for high detail images, such as photographs.
...
svg svg, just like html/css, can be manipulated via javascript.
...you can also add links direcly into
svg and can create animations using smil (synchronized multimedia intergration language).
Index of archived content - Archive of obsolete content
tensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding
svg examples and demos from articles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons managemen...
...t label and description lookupnamespaceuri lookupprefix miscellaneous modules on page load page loading post data to window preferences progress listeners queryselector rosetta running applications
svg animation
svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old browsers xpath ...
...s winregvalue xpjs components proposal xre xtech 2005 presentations directions of the mozilla rdf engine extending gecko with xbl and xtf mozilla e4x rich web
svg and canvas in mozilla xul - mozilla's xml user interface language xtech 2006 presentations xul explorer xulrunner application update article building xulrunner building xulrunner with python commandline componen...
Elements - Archive of obsolete content
the most useful namespaces could be html/xhtml, xul (xml user interface language),
svg (scalable vector graphics) and xlink.
... this way a more-or-less universal namespace declaration in your bindings could be like: <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml" xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:
svg = "http://www.w3.org/2000/
svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> binding <!entity % binding-content "(resources?,content?,implementation?,handlers?)"> <!element binding %binding-content;> <!attlist binding id id #required extends cdata #implied display cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding.
...you may also use a number of html, mathml and
svg tags.
XBL - Archive of obsolete content
you can build your own reusable widgets from existing xul, html,
svg, and other primitives using xbl.
... w3c sxbl (currently a working draft, 2005) stands for
svg's xml binding language.
... it is supposed to include a subset of xbl 2.0 features needed for
svg.
XTech 2005 Presentations - Archive of obsolete content
rich web:
svg and canvas in mozilla - robert o'callahan today's web browsers offer somewhat limited graphics capabilities to web developers.
...the mozilla project will meet this challenge with two major new features to be delivered in firefox 1.1: integrated
svg and a new canvas html element.
...this work provides additional benefits to web developers such as the ability to apply
svg effects to html content.
Drawing graphics - Learn web development
previous overview: client-side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (
svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
... graphics on the web as we talked about in our html multimedia and embedding module, the web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via css properties such as background-image, and
svg.
...while you could use css and javascript to animate (and otherwise manipulate)
svg vector images — as they are represented by markup — there was still no way to do the same for bitmap images, and the tools available were rather limited.
Multimedia: Images - Learn web development
the less colors an image has and the less photographic it is, the better it is to use the
svg format.
...examples for these types of motifs are logos, illustrations, charts or icons (note:
svgs are far better than icon fonts!).
... a good online tool for optimizing
svgs is
svgomg.
Web performance resources - Learn web development
image optimization (use css animation, or
svg if possible).
... icon web fonts if possible avoid icon web fonts and use compressed
svgs.
... to further optimize inline your
svg data within html markup to avoid http requests.
Mozilla Web Developer FAQ
if your document mixes mathml or
svg with xhtml, you should use application/xhtml+xml (until html5 parsing is supported).
... however, if you are using the usual html features (no mathml or
svg) and are serving your content as text/html to other browsers, there is no need to serve application/xhtml+xml to mozilla.
... mathml
svg (in
svg-enabled builds only) xul (please note that xul is mozilla-specific and, therefore, using it on the public web causes interoperabilty problems.) xml:base is observed when following links.
CanvasRenderingContext2D - Web APIs
the methods listed below remain for historical and compatibility reasons as
svgmatrix objects are used in most parts of the api nowadays and will be used in the future instead.
... canvasrenderingcontext2d.currenttransform current transformation matrix (
svgmatrix object).
... filters canvasrenderingcontext2d.filter applies a css or
svg filter to the canvas, e.g., to change its brightness or bluriness.
Element.getAttributeNS() - Web APIs
examples the following
svg document reads the value of the foo attribute in a custom namespace.
... <
svg xmlns="http://www.w3.org/2000/
svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </
svg> in an html5 document the attribute has to be accessed with test:foo since namespaces are not supported.
... <!doctype html> <html> <body> <
svg xmlns="http://www.w3.org/2000/
svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="foo value"/> </
svg> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log('attribute value: ' + circle.getattribute('test:foo')); </script> </body> </html> notes namespaces are only supported in xml documents.
Element - Web APIs
for example, the htmlelement interface is the base interface for html elements, while the
svgelement interface is the basis for all
svg elements.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarge...
...e4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtarget.
KeyboardEvent.code - Web APIs
html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <
svg xmlns="http://www.w3.org/2000/
svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </
svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some...
...finally, spaceship is set to refer to the element with the id "spaceship", which is the
svg polygon representing the ship the player controls.
... = angle * (math.pi/180); position.x += (math.sin(rad) * offset); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an
svg transform.
Path2D() - Web APIs
the path2d() constructor returns a newly instantiated path2d object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of
svg path data.
... d optional when invoked with a string consisting of
svg path data, a new path is created from that description.
... <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let path1 = new path2d(); path1.rect(10, 10, 100,100); let path2 = new path2d(path1); path2.moveto(220, 60); path2.arc(170, 60, 50, 0, 2 * math.pi); ctx.stroke(path2); using
svg paths this example creates a path2d path using
svg path data.
PerformanceResourceTiming - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an xmlhttprequest, <
svg>, image, or script.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
..."25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is available in web workers.
format - Web APIs
the
svgaltglyphelement.format property is a domstring that defines the format of the given font.
... it has the same meaning as the 'format' property of
svgglyphrefelement property.
...t™ type 1 .pfb, .pfa truetype truetype .ttf opentype opentype, including truetype open .ttf truetype-gx truetype with gx extensions - speedo speedo - intellifont intellifont - example myglyph.format = "truedoc-pfr"; specifications specification status comment scalable vector graphics (
svg) 1.1 (second edition)the definition of 'format' in that specification.
targetElement - Web APIs
the
svganimationelement.targetelement property refers to the element which is being animated.
... syntax var targetelement = someelement.targetelement; specifications specification status comment
svg animations level 2the definition of '
svganimationelement.targetelement' in that specification.
... scalable vector graphics (
svg) 1.1 (second edition)the definition of '
svganimationelement.targetelement' in that specification.
TimeEvent - Web APIs
the timeevent interface, a part of
svg smil animation, provides specific contextual information associated with time events.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_...
...top"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
Web accessibility for seizures and physical reactions - Accessibility
web technologies that use video, animated gifs, animated pngs, animated
svgs, canvas, and css or javascript animations are all capable of content that can induce seizures or other incapacitating physical reactions.
... transitions (for css and
svg) the following is from the web animations model csswg.org drafts the web animations model is intended to provide the features necessary for expressing css transitions [css-transitions-1], css animations [css-animations-1], and
svg [
svg11].
... see also mdn accessibility: what users can to to browse more safely accessibility: understanding color and luminance applying
svg effects to html content basic animations (canvas tutorial) canvas api canvasrenderingcontext2d.drawimage() <color> document object model mediaquerylist using dynamic styling information webgl: 2d and 3d graphics for the web color color tutorial: describing color tom jewett.
@namespace - CSS: Cascading Style Sheets
the @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as html5 with inline
svg or mathml, or xml that mixes multiple vocabularies.
...this means that html elements will act as though they are in the xhtml namespace (http://www.w3.org/1999/xhtml), even if there is no xmlns attribute anywhere in the document, and the <
svg> and <math> elements will be assigned their proper namespaces (http://www.w3.org/2000/
svg and http://www.w3.org/1998/math/mathml).
...[ <string> | <url> ];where <namespace-prefix> = <ident> examples specifying default and prefixed namespaces @namespace url(http://www.w3.org/1999/xhtml); @namespace
svg url(http://www.w3.org/2000/
svg); /* this matches all xhtml <a> elements, as xhtml is the default unprefixed namespace */ a {} /* this matches all
svg <a> elements */
svg|a {} /* this matches both xhtml and
svg <a> elements */ *|a {} specifications specification status comment css namespaces modulethe definition of '@namespace' in that specification.
Using URL values for the cursor property - CSS: Cascading Style Sheets
note: starting with gecko 2.0, gecko also supports the
svg image format for cursors.
... however, the
svg image must contain a length-valued (not percentage-valued) height and width on its root
svg node.
... javascript, css animation, and declarative smil inside an
svg image are ignored; you can't use
svg to create an animated cursor, for example.
background-size - CSS: Cascading Style Sheets
a vector image (such as
svg) does not necessarily have intrinsic dimensions.
... note: in gecko, background images created using the element() function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is
svg, with the corresponding intrinsic proportion.
... note:
svg images have a preserveaspectratio attribute that defaults to the equivalent of contain.
image() - CSS: Cascading Style Sheets
providing fallback images .help::before { content: image("try.webp", "try.
svg", "try.gif"); } in this example, the browser will display an image as generated content before the content of the element with the class of help.
...if not, the
svg example will be shown.
... if
svg is not supported, the gif version will display.
letter-spacing - CSS: Cascading Style Sheets
scalable vector graphics (
svg) 1.1 (second edition)the definition of 'letter-spacing' in that specification.
... recommendation initial
svg definition.
... ≤37chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0
svg supportchrome full support 1edge full support 12firefox full support 72ie full support 9opera full support 7safari full support 5...
mask-image - CSS: Cascading Style Sheets
/* keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.
svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* global values */ mask-image: inherit; mask-image: initial; mask-image: unset; syntax values none this keyword is interpreted as a transparent black image layer.
... formal definition initial valuenoneapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url>where <image()> = image( <image-tags>?
...lar-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.
svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.
svg); } result specifications specification status comment css masking module level 1the definition of 'mask-image' in that specification.
mask-origin - CSS: Cascading Style Sheets
view-box uses the nearest
svg viewport as reference box.
... if a viewbox attribute is specified for the element creating the
svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the reference box is set to the width and height values of the viewbox attribute.
... formal definition initial valueborder-boxapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.
svg); mask-origin: border-box; /* can be cha...
mask-type - CSS: Cascading Style Sheets
the mask-type css property sets whether an
svg <mask> element is used as a luminance or an alpha mask.
... formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <
svg version="1.1" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </
svg> css .redsquare { height: 100px; width: 100px; background-co...
...lor: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <
svg version="1.1" xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </
svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that speci...
paint-order - CSS: Cascading Style Sheets
note: in the case of this property, markers are only appropriate when drawing
svg shapes involving the use of the marker-* properties (e.g.
... formal definition initial valuenormalapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill
svg <
svg xmlns="http://www.w3.org/2000/
svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </
svg> css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; } result specifications ...
... specification status comment scalable vector graphics (
svg) 2the definition of 'paint-order' in that specification.
Content categories - Developer guides
bed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <
svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and text.
... elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <
svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
...elements that belong to this category include: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <
svg>, <video>.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
if the source of the foreign content is an html <img> or
svg <
svg> element, attempting to retrieve the contents of the canvas isn't allowed.
...consider the html5 boilerplate apache server configuration file for cors images, shown below: <ifmodule mod_setenvif.c> <ifmodule mod_headers.c> <filesmatch "\.(bmp|cur|gif|ico|jpe?g|png|
svgz?|webp)$"> setenvif origin ":" is_cors header set access-control-allow-origin "*" env=is_cors </filesmatch> </ifmodule> </ifmodule> in short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".
svg", ".
svgz", and ".webp") to be accessed cross-origin from anywhere on the internet.
... starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_color.
svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.addeventlistener("load", imagereceived, false); downloadedimg.src = imageurl; } we're using a hard-coded url here (imageurl), but that could easily come from anywhere.
MIME types (IANA media types) - HTTP
common examples are image/jpeg, image/png, and image/
svg+xml.
... note: use application/xml or application/xhtml+xml if you want xml’s strict parsing rules, <![cdata[…]]> sections, or elements that aren't from html/
svg/mathml namespaces.
... microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari
svg scalable vector graphics image/
svg+xml .
svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its c...
The building blocks of responsive design - Progressive web apps (PWAs)
svg and other vector graphics for some image requirements (not photographs, but icons and user interface elements are a good fit), a good solution is to use vector graphics.
... you could also try using
svg to create interface elements.
...
svg produces vector graphics and is supported well across modern browsers, with polyfills available for older browser support.
xml:base - XML: Extensible Markup Language
use cases if you have an inline
svg you use as icons that needs to work in a document with a html baseelement , you can reset the uri on your icon sprite by setting the xml:base.
... <html> <head> <base href="https://mydomain.com"> <style> .link { stroke: #999; stroke-opacity: .6; } marker#arrow { fill: black; } </style> </head> <body> <
svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> <path d="m0,-5l10,0l0,5"></path> </marker> </defs> <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line> </
svg> </body> </html> imagine a
svg with font references.
... <
svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629" width="909" height="1286" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/
svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </
svg> setting the xml:base on the
svg element means you can inline the
svg and thereby bypass cors issue while not changing the base uri for your entire document.
XML in Mozilla - Archive of obsolete content
the public identifiers that are recognized are: -//w3c//dtd xhtml 1.0 transitional//en -//w3c//dtd xhtml 1.1//en -//w3c//dtd xhtml 1.0 strict//en -//w3c//dtd xhtml 1.0 frameset//en -//w3c//dtd xhtml basic 1.0//en -//w3c//dtd xhtml 1.1 plus mathml 2.0//en -//w3c//dtd xhtml 1.1 plus mathml 2.0 plus
svg 1.1//en -//w3c//dtd
svg 20001102//en -//wapforum//dtd xhtml mobile 1.0//en xml linking and pointing xml linking support includes xml base and simple xlinks.
... (no longer supported) mozilla add-on sdk domparser and xmlserializer mozilla xml extras sax sax soap (no longer supported) w3c note web services xml-rpc (no longer supported) userland software xml-rpc rdf w3c recommendations rdf
svg w3c recommendation
svg animation (smil) w3c recommendation mathml w3c recommendation mathml p3p (no longer supported) w3c recommendation p3p wsdl (no longer supported) w3c note web services xbl mozilla's xbl reference xul ...
2006-10-06 - Archive of obsolete content
announcements new
svg build dependency coming on october 2nd t rowley announced that: soon
svg on the trunk will be switching to use thebes directly (instead of the current choice of direct cairo or punching a hole through thebes to cairo).
... once completed you will need to build cairo gfx in order to build
svg.
2006-11-24 - Archive of obsolete content
announcements
svg build dependency on cairo gfx on 11/22 november 21st: t rowley announced that: he will be landing his patch that starts the process of switching
svg over to thebes (bug 354866).
... if you build dependencies with non-default toolkit or on a non tier-1 platform you'll need to disable
svg in your mozconfig.
Processing XML with E4X - Archive of obsolete content
default default xml namespace = "http://www.w3.org/1999/xhtml"; // no need now to specify a namespace in the html tag var xhtml = <html><head><title></title></head><body> <p>text</p></body></html>; alert(xhtml.head); // no need to specify a namespace on subelements here either non-default var xhtml = <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>embedded
svg demo</title> </head> <body> <h1>embedded
svg demo</h1> <
svg xmlns="http://www.w3.org/2000/
svg" viewbox="0 0 100 100"> <circle cx="50" cy="50" r="20" stroke="orange" stroke-width="2px" fill="yellow" /> </
svg> </body> </html>; alert(xhtml.name().localname); // alerts "html" alert(xhtml.name().uri); // alerts "http://www.w3.org/1999/xhtml" to access elements tha...
...t are within a non-default namespace, first create a namespace object encapsulating the uri for that namespace: var
svgns = new namespace('http://www.w3.org/2000/
svg'); this can now be used in e4x queries by using namespace::localname in place of a normal element specifier: var
svg = xhtml..
svgns::
svg; alert(
svg); // shows the <
svg> portion of the document using generators/iterators with e4x as of javascript 1.7, it is possible to use generators and iterators, giving more options for traversing e4x.
Examples - Game development
svg masking experiment an xray machine, creating using an
svg mask.
...
svg isometic tiles generating isometric tiles with
svg matricies.
Introduction to game development for the Web - Game development
technology audio web audio api graphics webgl (opengl es 2.0) input touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html, css,
svg (and much more!) the business case as a game developer, whether you're an individual or a large game studio, you want to know why it makes sense to target the web with your next game project.
...
svg (scalable vector graphics) lets you build vector graphics that scale smoothly regardless of the size or resolution of the user's display.
XLink - MDN Web Docs Glossary: Definitions of Web-related terms
simple xlinks are "supported" in firefox (at least in
svg and mathml), though they do not work as links if one loads a plain xml document with xlinks and attempts to click on the relevant points in the xml tree.
... xlink is used in
svg, mathml, and other important standards.
Mobile accessibility - Learn web development
in addition, many image requirements can be fulfilled using the
svg vector images format, which is well-supported across browsers today.
...
svg has a small file size and will stay sharp regardless of whatever size is being displayed (see adding vector graphics to the web for more details).
Styling lists - Learn web development
the syntax is pretty simple: ul { list-style-image: url(star.
svg); } however, this property is a bit limited in terms of controlling the position, size, etc.
... in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem; background-image: url(star.
svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; } here we've done the following: set the padding-left of the <ul> down from the default 40px to 20px, then set the same amount on the list items.
Web fonts - Learn web development
for example, most modern browsers support woff/woff2 (web open font format versions 1 and 2), the most efficient format around, but older versions of ie only support eot (embedded open type) fonts, and you might need to include an
svg version of the font to support older versions of iphone and android browsers.
...ike: @font-face { font-family: 'ciclefina'; src: url('fonts/cicle_fina-webfont.eot'); src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cicle_fina-webfont.woff2') format('woff2'), url('fonts/cicle_fina-webfont.woff') format('woff'), url('fonts/cicle_fina-webfont.ttf') format('truetype'), url('fonts/cicle_fina-webfont.
svg#ciclefina') format('
svg'); font-weight: normal; font-style: normal; } this is referred to as "bulletproof @font-face syntax", after a post by paul irish from early on when @font-face started to get popular (bulletproof @font-face syntax).
Responsive images - Learn web development
you can supply mime types inside type attributes so the browser can immediately reject unsupported file types: <picture> <source type="image/
svg+xml" srcset="pyramid.
svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture> do not use the media attribute, unless you also need art direction.
...you can solve this problem by using vector graphics (
svg images) and the srcset with sizes attributes.
Multimedia and Embedding - Learn web development
<iframe>s are for embedding other web pages, and the other two allow you to embed pdfs,
svg, and even flash — a technology on its way out, but which you may still see semi-regularly.
...this article introduces you to what vector graphics are and how to include the popular
svg format in web pages.
Beginning our React todo list - Learn web development
we are also not going to be using the logo.
svg file, so remove that import too.
... # move into the src directory of your project cd src # delete a few files rm -- app.test.js app.css logo.
svg serviceworker.js setuptests.js # move back up to the root of the project cd ..
The Firefox codebase: CSS Guidelines
hdpi support it's recommended to use
svg since it keeps the css clean when supporting multiple resolutions.
... see the
svg guidelines for more information on
svg usage.
Firefox UI considerations for web developers
if tippy top doesn't include the site, firefox looks in its places data store for icons specified in the page's <head> element; if an
svg icon is available, that icon is selected.
...ink rel="shortcut icon" href="/dist/images/icons/favicon.ico"> <link rel="apple-touch-icon-precomposed" href="/dist/images/icons/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/dist/images/icons/apple-touch-icon_72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/dist/images/icons/apple-touch-icon@2x.png"> firefox starts by looking for an
svg icon; there is none.
GCIntegration - SpiderMonkey Redirect 1
{{
svg{source: "http://people.mozilla.org/~wmccloskey/incremental1.
svg", embedding: "iframe", height:"130"} }} assume object b is already marked, as in the leftmost frame, while objects a and c have not been marked yet.
...to see how weak pointers can cause trouble, consider the following situation: {{
svg{source: "http://people.mozilla.org/~wmccloskey/incremental2.
svg", embedding: "iframe", height:"130"} }} in the left frame, a has a weak pointer to c.
imgIContainer
(note that we might not actually be drawing the full image -- we might be restricted by asubimage -- but we still need the full image's viewport-size in order for
svg images with the "viewbox" attribute to position their content correctly.) aflags flags of the flag_* variety.
...return value missing description exceptions thrown missing exception missing description violates the xpcom interface guidelines getrootlayoutframe() if this image is type_vector, that is really an embedded
svg document, and this method returns a pointer to the root nsiframe of that document.
nsIParserUtils
at present, sanitizing css syntax in
svg presentational attributes is not supported, so this option flattens out
svg.
... sanitizerdropmedia (1 << 5) flag for sanitizer: drops <img>, <video>, <audio>, and <source>, and flattens out
svg.
Mozilla
mozilla
svg project since you have come this far, you probably already know that
svg stands for scalable vector graphics, and that it is an xml language for sophisticated 2-dimensional graphics.
...
svg is to graphics what xhtml is to text, mathml is to mathematical equations and cml is to the description of chemical molecules.
Migrating from Firebug - Firefox Developer Tools
it is currently missing the preview for html, xml and
svg, though, which is tracked in bug 1247392 and bug 1262796, but when you click on the url of the request you switch to the network monitor, which has a preview tab.
... inspector firebug has an html panel, which allows to edit html/xml/
svg and the css related to it.
AbstractRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
...iddle" alignment-baseline="middle">abstractrange</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties collapsed read only a boolean value which is true if the range is collapsed.
AnalyserNode - Web APIs
(but may be left unconnected) channel count mode "max" channel count 2 channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
..."none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object.
AnimationEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
Attr - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
..."#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">attr</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), a number of deprecated properties and methods output warning messages to the console.
AudioBufferSourceNode - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobuffer indicated by its buffer property.
AudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
..."none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object.
AudioNode - Web APIs
a filter like biquadfilternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
..." fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget interface.
BaseAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio data.
BeforeInstallPromptEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment...
...1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
BeforeUnloadEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" al...
...line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault...
BluetoothDevice - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} interface interface bluetoothdevice { readonly attribute domstring id; readonly attribute domstring?
BroadcastChannel - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor broadcastchannel() creates an object linking to the named channel.
CDATASection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...dde4"/><line x1="529" y1="90" x2="512" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cdatasection" target="_top"><rect x="391" y="65" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="451" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cdatasection</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific properties and implements those of its parent text.
CSSCounterStyleRule - Web APIs
inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20...
... x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent cssrule.
CSSPrimitiveValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" al...
...line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSSValueList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" al...
...="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CanvasRenderingContext2D.currentTransform - Web APIs
the canvasrenderingcontext2d.currenttransform property of the canvas 2d api returns or sets a dommatrix (current specification) or
svgmatrix (old specification) object for the current transformation matrix.
... syntax ctx.currenttransform [= value]; value a dommatrix or
svgmatrix object to use as the current transformation matrix.
Using images - Web APIs
svgimageelement these are images embedded using the <image> element.
...
svg images must specify a width and height in the root <
svg> element.
Canvas API - Web APIs
fabric.js is an open-source canvas library with
svg parsing capabilities.
... pts.js is a library for creative coding and visualization in canvas and
svg.
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...one"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and nondocumenttypechildnode interface.
Comment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...e4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">comment</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific property, but inherits those of its parent, characterdata, and indirectly those of node.
CompositionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="...
...<line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">compositionevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor compositionevent() creates a new compositionevent object instance.
DOMImplementation.createDocumentType() - Web APIs
syntax var doctype = document.implementation.createdocumenttype(qualifiednamestr, publicid, systemid); parameters qualifiednamestr is a domstring containing the qualified name, like
svg:
svg.
... example var dt = document.implementation.createdocumenttype('
svg:
svg', '-//w3c//dtd
svg 1.1//en', 'http://www.w3.org/graphics/
svg/1.1/dtd/
svg11.dtd'); var d = document.implementation.createdocument('http://www.w3.org/2000/
svg', '
svg:
svg', dt); alert(d.doctype.publicid); // -//w3c//dtd
svg 1.1//en specifications specification status comment domthe definition of 'domimplementation.createdocumenttype' in that specification.
DOMMatrixReadOnly.flipX() - Web APIs
examples this
svg contains two paths in the shape of a triangle, both drawn to the same position.
... <
svg width="100" height="100" viewbox="-50 0 100 100"> <path fill="red" d="m 0 50 l 50 0 l 50 100 z" /> <path id="flipped" fill="blue" d="m 0 50 l 50 0 l 50 100 z" /> </
svg> this javascript first creates an identity matrix, then uses the `flipx()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis.
DOMRect - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mi...
...e4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrect</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor domrect() creates a new domrect object.
DocumentFragment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...<line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documentfragment</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor documentfragment() creates and returns a new documentfragment object.
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
..."none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documenttype</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode interface.
Element: DOMActivate event - Web APIs
bubbles yes cancelable yes interface mouseevent examples <
svg xmlns="http://www.w3.org/2000/
svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius *...
...ircle.setfloattrait("r", currentradius * 0.5); } ]]></script> <!-- act on each domactivate event --> <circle cx="300" cy="225" r="100" fill="red"> <handler type="application/ecmascript" ev:event="domactivate"> change(evt); </handler> </circle> <text x="300" y="480" font-family="verdana" font-size="35" text-anchor="middle"> activate the circle to change its size </text> </
svg> specifications specification status ui eventsthe definition of 'domactivate' in that specification.
Element.className - Web APIs
classname can also be an instance of
svganimatedstring if the element is an
svgelement.
... it is better to get/set the classname of an element using element.getattribute and element.setattribute if you are dealing with
svg elements.
Element.getClientRects() - Web APIs
when called on
svg elements other than an outer-<
svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<
svg> establishes (and to be clear, the rectangles are also transformed by the outer-<
svg>'s viewbox transform, if any).
... for html <area> elements,
svg elements that do not render anything themselves, display:none elements, and generally any elements that are not directly rendered, an empty list is returned.
Element.localName - Web APIs
example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:
svg="http://www.w3.org/2000/
svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<
svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </he...
...ad> <body onload="test()"> <
svg:
svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <
svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> </
svg:
svg> <textarea id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.
ErrorEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" ...
...y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
EventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mid...
...dle" alignment-baseline="middle">eventtarget</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor eventtarget() creates a new eventtarget object instance.
ExtendableEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
..."/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
File - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/blob" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alig...
...="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">file</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
FocusEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><l...
...ill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() creates a focusevent event with the given parameters.
HTMLAnchorElement - Web APIs
this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlanchorelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle"...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlareaelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLAudioElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mi...
...line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlaudioelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, optionally starting the process of loading an audio file into it if the file url is given.
HTMLBRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><li...
...e4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbrelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBaseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="11...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbaseelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBodyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbodyelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement and from windoweventhandlers.
HTMLButtonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a>...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbuttonelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLCanvasElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlcanvaselement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcanvaselement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">even...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldlistelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polylin...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldataelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldatalistelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement htmldatalistelement.options read only is a htmlcollection representing a collection of the contained option elements.
HTMLDetailsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldetailselement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldetailsele...
...ment</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDivElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline ...
..."/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldivelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldivelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
..."none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldocument</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of htmldocument as an alias for document, upon which htmldocument is based.
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyl...
...l="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
HTMLEmbedElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlembedelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlembedelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLFieldSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlfieldsetelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlfieldsetelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLFormControlsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mid...
...5" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcollection.
HTMLFormElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget<...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement.
HTMLHRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a>...
...e4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhrelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</tex...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline poi...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadingelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhtmlelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignm...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmliframeelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLImageElement.srcset - Web APIs
"icon32px.png 32w, icon64px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.
svg" here, options are provided for an icon at widths of 32px and 64px, as well as at pixel densities of 2x and 3x.
... a fallback image is provided as an
svg file that should be used in all other cases.
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25"...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlimageelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor image() the image() constructor creates and returns a new htmlimageelement object representing an html <img> element which is not attached to any dom tree.
HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,3...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlinputelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlinputelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties properties related to the parent form form read only htmlformelement object: returns a reference to the parent <form> element.
HTMLLIElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle...
...e4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllielement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllielement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLabelElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 ...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllabelelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLegendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 ...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllegendelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLinkElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllinkelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllinkelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and linkstyle.
HTMLMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
..."/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmapelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMarqueeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</text></a>...
...</
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-base...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onencrypted = function(encrypted) { ...
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onwaitingforkey = function(waitingforkey) { ...
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its ancestors htmlelement, element, node, and eventtarget.
HTMLMenuElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarge...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html living standardthe definition of 'htmlmenuelement' in that specification.
HTMLMenuItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">ev...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html 5.1the definition of 'htmlmenuitemelement' in that specification.
HTMLMetaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmetaelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMeterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmeterelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmeterelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent, htmlelement.
HTMLModElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
..."/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmodelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlolistelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlobjectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlobjectelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptGroupElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptgroupelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptionsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mid...
...151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by the spec, this property isn't read-only.
HTMLOutputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline poi...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloutputelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloutputelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement.
HTMLParagraphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline ...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlparagraphelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLParamElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparamelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlparamelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLPictureElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" str...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpictureelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLPreElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-base...
..."/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpreelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpreelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLProgressElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlprogresselement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLQuoteElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlquoteelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlscriptelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlscriptelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSelectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><pol...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlselectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlselectelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement, and of element and node.
HTMLShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlshadowelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSourceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text><...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlsourceelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlspanelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties, but inherits properties from: htmlelement.
HTMLStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlstyleelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle.
HTMLTableCaptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</...
...y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecaptionelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableCellElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecellelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableColElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecolelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltableelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltableelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableRowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-bas...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablerowelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablerowelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableSectionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablesectionelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTemplateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltemplateelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLTextAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 1...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltextareaelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltextareaelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties accesskey string: returns / sets the element's accesskey attribute.
HTMLTimeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polylin...
...><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltimeelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltitleelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTrackElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alig...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltrackelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltrackelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlulistelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUnknownElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline p...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlunknownelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property; inherits properties from its parent, htmlelement.
HTMLVideoElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlvideoelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlvideoelement</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its ancestor interfaces, htmlmediaelement, and htmlelement.
HashChangeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
..."/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
IDBCursorWithValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" a...
...e x1="101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
IDBDatabase - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...l="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
IDBOpenDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...<line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits methods from its parents idbrequest and eventtarget.
IDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...ill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from eventtarget.
IDBTransaction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...e"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.put("...
InputEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86"...
...ill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">inputevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor inputevent() creates an inputevent object.
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
..."none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object.
KeyboardEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...one"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor keyboardevent() creates a new keyboardevent object.
MediaKeyMessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</...
...1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent.
MediaKeySession.onkeystatuseschange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ...
MediaKeySession.onmessage - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaSource - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" a...
...l="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
MediaStreamTrackEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
..."86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
MessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">messageevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor messageevent() creates a new messageevent.
MouseEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...ill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mouseevent() creates a mouseevent object.
Node.localName - Web APIs
syntax name = element.localname name is the local name as a string (see notes below for details) example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:
svg="http://www.w3.org/2000/
svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<
svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </he...
...ad> <body onload="test()"> <
svg:
svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <
svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> </
svg:
svg> <textarea id="text" rows="4" cols="55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.
Node - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
..."#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtarget.
OfflineAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance.
PageTransitionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 8...
... x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
Path2D.addPath() - Web APIs
we then create a matrix using document.createelementns() and create
svgmatrix().
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0, 100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100, 75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/
svg', '
svg').create
svgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications specification status comment html living standardthe definition of 'path2d.addpath()' in that specification.
PerformanceFrameTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text...
...-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame".
PerformanceLongTaskTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d...
..."25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
PerformanceMark - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
.../><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
PerformanceMeasure - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
...e x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceNavigationTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
... x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
PerformancePaintTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
...1" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
ProcessingInstruction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification specification status comment domthe definition of 'processinginstruction' in that specification.
ProgressEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
PromiseRejectionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" al...
..."86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
RTCDTMFSender - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...one"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string).
RTCDtlsTransport - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/rtcdtlstransport" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor...
...="middle" alignment-baseline="middle">rtcdtlstransport</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesicetransport read only the read-only rtcdtlstransport property icetransport contains a reference to the underlying rtcicetransport.state read only the state read-only property of the rtcdtlstransport interface provides information which describes a datagram transport layer security (dtls) transport state.methodsthis interface has no methods.
RTCPeerConnection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...ine x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only rtcpeerconnection property cantrickleicecandidates return...
RadioNodeList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="no...
...ne"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
ResizeObserver.observe() - Web APIs
the observe() method of the resizeobserver interface starts observing the specified element or
svgelement.
... syntax resizeobserver.observe(target, options); parameters target a reference to an element or
svgelement to be observed.
ResizeObserver.unobserve() - Web APIs
the unobserve() method of the resizeobserver interface ends the observing of a specified element or
svgelement.
... syntax void unobserve(target); parameters target a reference to an element or
svgelement to be unobserved.
ResizeObserverEntry.target - Web APIs
the target read-only property of the resizeobserverentry interface returns a reference to the element or
svgelement that is being observed.
... syntax var element = resizeobserverentry.target; var
svgelement = resizeobserverentry.target; value an element or
svgelement representing the element being observed.
ResizeObserverEntry - Web APIs
the resizeobserverentry interface represents the object passed to the resizeobserver() constructor's callback function, which allows you to access the new dimensions of the element or
svgelement being observed.
... resizeobserverentry.target read only a reference to the element or
svgelement being observed.
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).
... its syntax is the same as that for <length> // rect draws a rectangle with upper left-hand corner at x,y, with width w, and height h, with optional style // standard reference: http://www.w3.org/tr/
svg11/shapes.html#rectelement func (
svg *
svg) rect(x float64, y float64, w float64, h float64, s ...string) {
svg.printf(`<rect %s %s`, dim(x, y, w, h,
svg.decimals), endstyle(s, emptyclose)) } ​ ...
ServiceWorkerGlobalScope - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...1="25" x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties serviceworkerglobalscope.clients read only contains the clients object associated with the service worker.
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
..."none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
StaticRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="midd...
...l="none"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties.
StorageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dd...
...="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring represents the key...
StylePropertyMap - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">stylepropertym...
...ap</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, stylepropertymapreadonly.
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a...
..." fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">syncevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor syncevent.syncevent() creates a new syncevent object.
TaskAttributionTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="m...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
Text - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
..."#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor text() returns a text node with the parameter as its textual content.
TouchEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...ill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchevent object.
UIEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...de4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors uievent() creates a uievent object.
WebGLContextEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits properties from its parent interface, event.
Web Animations API Concepts - Web APIs
history over a decade ago, synchronized multimedia integration language, or smil (pronounced "smile"), brought animation to
svg.
...while four out of five browsers supported smil, it only animated
svg elements, could not be used from css, and was very complex — often leading to inconsistent implementations.
WheelEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" ali...
...ill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
Window - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle"...
... alignment-baseline="middle">window</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
XMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...l="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...e"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequest</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} despite its name, xmlhttprequest can be used to retrieve any type of data, not just xml.
XMLHttpRequestEventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><
svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points...
..."25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></
svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
ARIA: img role - Accessibility
<p id="image-1">text that describes the group of images.</p> </div>
svg and role="img" if you are using embedded
svg images in your page, it is a good idea to set role="img" on the outer <
svg> element and give it a label.
... this will cause screen readers to just consider it as a single entity and describe it using the label, rather than trying to read out all the child nodes: <
svg role="img" aria-label="description of your
svg image"> <!-- contents of the
svg image --> </
svg> using role="img" to confer meaning that is obscured or implied in certain cases, assistive technology users won't be able to get the meaning of content expressed in certain ways, through certain media, or implied in certain ways.
src - CSS: Cascading Style Sheets
syntax /* <url> values */ src: url(https://somewebsite.com/path/to/font.woff); /* absolute url */ src: url(path/to/font.woff); /* relative url */ src: url(path/to/font.woff) format("woff"); /* explicit format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/
svgfont.
svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.
svg) format("
svg"), url(path/to/font.woff) format("woff"), url(path/to/font.otf) format("opentype"); ...
...in the case of
svg fonts, the url points to an element within a document containing
svg font definitions.
mask-composite - CSS: Cascading Style Sheets
formal definition initial valueaddapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(h...
...ttps://mdn.mozillademos.org/files/12668/mdn.
svg), url(https://mdn.mozillademos.org/files/12676/star.
svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-composite' in ...
mask-mode - CSS: Cascading Style Sheets
formal definition initial valuematch-sourceapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillad...
...emos.org/files/12668/mdn.
svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-mode' in that specification.
mask-position - CSS: Cascading Style Sheets
formal definition initial valuecenterapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animati...
...eft | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.
svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option valu...
mask-repeat - CSS: Cascading Style Sheets
formal definition initial valueno-repeatapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; backgrou...
...nd: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.
svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image support you can specif...
mask-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <perc...
...entage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.
svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.
svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.a...
vertical-align - CSS: Cascading Style Sheets
opercentagesrefer to the line-height of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff5b.
svg" alt="link" width="32" height="32" /> image with a default alignment.</div> <div>an <img class="top" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.
svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> <div>an <img class="bottom" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.
svg" alt="link" width="32" height="32" /> image with a text-bottom alignmen...
...t.</div> <div>an <img class="middle" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.
svg" alt="link" width="32" height="32" /> image with a middle alignment.</div> css img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'vertical-align' in that specification.
Index - Developer guides
27 graphics on the web 2d, 3d, canvas, graphics, html5,
svg, web, webgl, webrtc websites and applications often need to present graphics, such as images.these articles provide insight into how you can accomplish this.
...there are a number of possible scenarios: 39
svg-in-opentype draft, fonts, guide, needscontent the
svg-in-opentype work is currently in the hands of the mpeg group.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
svg (scalable vector graphics) lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image.
...
svg commands are formatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other type of image.
HTML attribute: multiple - HTML: Hypertext Markup Language
file input when multiple is set on the file input type, the user can select one or more files: <form method="post" enctype="multipart/form-data"> <p> <label for="uploads"> choose the images you want to upload: </label> <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .
svg, .gif" multiple> </p> <p> <label for="text">pick a text file to upload: </label> <input type="file" id="text" name="text" accept=".txt"> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in appearance between the example with multiple set and the other file input without.
... when the form is submitted,had we used method="get" each selected file's name would have been added to url parameters as?uploads=img1.jpg&uploads=img2.
svg.
<img>: The Image Embed element - HTML: Hypertext Markup Language
microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari
svg scalable vector graphics image/
svg+xml .
svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its c...
...
svg images, for instance, have no intrinsic dimensions if their root <
svg> element doesn't have a width or height set on it.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
font css @font-face image <img> and <picture> elements with srcset or imageset attributes,
svg <image> elements, css *-image rules object <object> elements script <script> elements, worker importscripts style <link rel=stylesheet> elements, css @import track <track> elements video <video> elements worker worker, sharedworker crossorigin this enumerated attribute indicates whether co...
...it may have the following values: any, meaning that the icon can be scaled to any size as it is in a vector format, like image/
svg+xml.
X-Content-Type-Options - HTTP
however, it also enables cross-origin read blocking (corb) protection for html, txt, json and xml files (excluding
svg image/
svg+xml).
...is of type: "style" and the mime type is not text/css, or "script" and the mime type is not a javascript mime type enables cross-origin read blocking (corb) protection for the mime-types: text/html text/plain text/json, application/json or any other type with a json extension: */*+json text/xml, application/xml or any other type with an xml extension: */*+xml (excluding image/
svg+xml) specifications specification status comment fetchthe definition of 'x-content-type-options definition' in that specification.
Animation performance and frame rate - Web Performance
animation on the web can be done via
svg, javascript, including <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types.
...code based animations, be it css,
svg, <canvas>, webgl or other javascript animations, can cause performance issues even if the bandwidth footprint is small.
Web technology for developers
svg scalable vector graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.
... accessibilitycss houdinicss: cascading style sheetsdemos of open web technologiesdeveloper guidesexsltevent referencehtml: hypertext markup languagehttpjavascriptmathmlopensearch description formatprivacy, permissions, and information securityprogressive web apps (pwas)
svg: scalable vector graphicstutorialsweb apisweb componentsweb performanceweb app manifestsweb media technologiesweb securityweb technology referencexml: extensible markup languagexpathxslt: extensible stylesheet language transformations ...
XML-related code snippets - Archive of obsolete content
how to create a dom tree using xmlhttprequest parsing and serializing xml using xpath jxon (lossless javascript xml object notation) xsl transforms xlink xinclude xml:id xml:base support in old browsers xpointer
svg namespaces, or why http://www.mozilla.org/keymaster/gat...re.is.only.xul is at the top of every xul document.
Code snippets - Archive of obsolete content
downloading files code to download files, images, and to monitor download progress password manager code used to read and write passwords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service
svg general general information and utilities
svg animation animate
svg using javascript and smil
svg interacting with script using javascript and dom events to create interactive
svg embedding
svg in html and xul using
svg to enhance html or xul based markup xul widgets html in xul for rich tooltips dynamically embed html into a xul element to attain markup in a tooltip label and de...
XML data - Archive of obsolete content
previous section:
svg next section: xbl binding information: xml data xml (extensible markup language) is a general-purpose language for any kind of structured data.
Mozilla Application Framework in Detail - Archive of obsolete content
rror detected: "+getlasterror()); cancelinstall(); } other features a resource description framework (rdf) parser with support for creating rdf graphs programmatically or by parsing files, compositing multiple sources into a single rdf graph, querying and manipulating graphs, and populating xul widgets (trees, menus, etc.) with graph data; an xslt/xpath processor; scalable vector graphics (
svg) rendering with support for a usable subset of the standard including all basic shapes, beziers, stroking and filling with opacity, and much of the dom; mathml rendering; an ecma-262 edition 3-compliant javascript engine; java integration with a bridge to xpcom, a java dom api, the open jvm integration (oji) facility, a java webclient api, and java plug-ins; nspr, a runtime engine that provid...
Table Layout Regression Tests - Archive of obsolete content
0 0 normal normal 0[0x0]tw normal " /> <textreset data="0 10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null null 0 2 " /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="7 0 4" /> <xul data="0 0 0 0 0 1 <
svg data="0 1.000000 1.000000 0 1.000000" /> </stylecontext> the baseline log will look like: type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed.
Accessibility API cross-reference
aria can be used to 'fill out' the missing semantics of html, but may also be used in other markup languages (such as
svg) and expresses semantics using attributes, compared with html, which tends to have distinct named elements for its roles.
A bird's-eye view of the Mozilla framework
when an html, xml,
svg or other type of document is loaded, the nglayout engine (also known as gecko) parses the contents into a dom tree, and handles the layout and rendering of the document pages.
Error codes returned by Mozilla APIs
ns_error_dom_validation_err (0x805300 16) ns_error_dom_type_mismatch_err (0x805300 17) ns_error_dom_
svg_wrong_type_err (0x805f0000) ns_error_dom_
svg_invalid_value_err (0x805f0001) ns_error_dom_
svg_matrix_not_invertable (0x805f0002) a matrix could not be computed.
HTML parser threading
speculative loads when the tree builder on the parser thread encounters html script, stylesheet link, video (with a poster frame), base or img or
svg script, style or image elements, preload operations are appended to a speculative load queue.
PromiseWorker.jsm
here's the simplified diagram of how promiseworker works (
svg version of the promiseworker diagram) setup and usage this section explains how to set up and use a promiseworker.
nsIFilePicker
filterimages 0x008 corresponds to the *.jpe, *.jpg, *.jpeg, *.gif, *.png, *.bmp, *.ico, *.
svg, *.
svgz, *.tif, *.tiff, *.ai, *.drw, *.pct, *.psp, *.xcf, *.psd and *.raw filters for file extensions.
nsIScriptError
categories the web console does not display "xpconnect javascript" "component javascript" "chrome javascript" "chrome registration" "xbl" "xbl prototype handler" "xbl content sink" "xbl javascript" "frameconstructor" categories the web console displays "hudconsole" "css parser" "css loader" "content javascript" "dom events" "dom:html" "dom window" "
svg" "imagemap" "html" "canvas" "dom3 load" "dom" "malformed-xml" "dom worker javascript" "mixed content blocker" "csp" "invalid hsts headers" "insecure password field" see also using the web console error console nsiconsolemessage nsiscripterror2 ...
DevTools API - Firefox Developer Tools
let def = { id: "my-tool", label: "my tool", icon: "chrome://browser/skin/devtools/tool-webconsole.
svg", url: "about:blank", istargetsupported: target => true, build: (window, toolbox) => new mytoolpanel(window, toolbox) }; // register it.
Waterfall - Firefox Developer Tools
the hint may be any of: self subtree latersiblings csstransitions cssanimations
svgattranimations styleattribute styleattribute_animations force forcedescendants layout calculating the position and size of page elements.
CSSPositionValue - Web APIs
#image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.
svg" alt="mdn logo"/> ...
CSSStyleSheet - Web APIs
stylesheets list getting the owner element/rule given the style sheet object the interface for the owner object getting the cssstylesheet object from the owner <style> and <link> elements in the document yes .ownernode htmllinkelement, htmlstyleelement, or
svgstyleelement .sheet css @import rule in other style sheets applied to the document yes .ownerrule cssimportrule .stylesheet <?xml-stylesheet ?> processing instruction in the (non-html) document yes .ownernode processinginstruction .sheet http link header yes n/a n/a n/a user agent (default) style sheets no n/a n/a ...
CSS Object Model (CSSOM) - Web APIs
e elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and
svgelement.
Using the Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource such as an xmlhttprequest, <
svg>, image, script, etc.).
Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to load a specific resource, such as an xmlhttprequest, <
svg>, image, or script.
Fundamentals of WebXR - Web APIs
<<<--- replace image with an
svg for future translation work and consistency --->>> some more advanced headsets provide at least minimal support for translational movement detection, but to capture more substantial movement through the space, external sensors are usually required, such as cameras (either using visible light or infrared).
self.createImageBitmap() - Web APIs
syntax const imagebitmappromise = createimagebitmap(image[, options]); const imagebitmappromise = createimagebitmap(image, sx, sy, sw, sh[, options]); parameters image an image source, which can be an <img>,
svg <image>, <video>, <canvas>, htmlimageelement,
svgimageelement, htmlvideoelement, htmlcanvaselement, blob, imagedata, imagebitmap, or offscreencanvas object.
ARIA: banner role - Accessibility
<div role="banner"> <img src="companylogo.
svg" alt="my company name" /> <h1>title</h1> <h2>subtitle</h2> </div> by default, the html5 <header> element has an identical meaning to the banner landmark, unless it is a descendant of <aside>, <article>, <main>, <nav>, or <section>.
ARIA: Region role - Accessibility
svg role="region" can be declared on areas of
svg along with an aria-label to allow individual sections of the
svg to be described.
Accessibility and Spacial Patterns - Accessibility
for example, borders on
svg can extend both inward and outward from its dimensions, or for newer versions of
svg, entirely outward from it, thus reducing the space around the
svg to enable perception.
Text labels and names - Accessibility
this includes
svg images, <img>, <canvas>, <map>, and <area> elements, as well as <input> elements where type=image and <object> elements where the type starts with image/.
symbols - CSS: Cascading Style Sheets
symbols: a b c d e; symbols: "\24b6" "\24b7" "\24b8" d e; symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; symbols: url('first.
svg') url('second.
svg') url('third.
svg'); symbols: indic-numbers; the symbols descriptor must be specified when the value of the system descriptor is cyclic, numeric, alphabetic, symbolic, or fixed.
@counter-style - CSS: Cascading Style Sheets
@counter-style winners-list { system: fixed; symbols: url(gold-medal.
svg) url(silver-medal.
svg) url(bronze-medal.
svg); suffix: " "; } additive-symbols while the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor.
@font-face - CSS: Cascading Style Sheets
to provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a format() function: src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype"); the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "
svg".
Border-image generator - CSS: Cascading Style Sheets
yripple.com/samples/07/1fcc357205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.
svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> ...
Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of
svg backgrounds ...
CSS Masking - CSS: Cascading Style Sheets
mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type specifications specification status comment css masking module level 1 candidate recommendation scalable vector graphics (
svg) 1.1 (second edition)the definition of 'mask' in that specification.
mask-border-mode - CSS: Cascading Style Sheets
formal definition initial valuealphaapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples basic usage this property doesn't yet seem to have support anywhere.
mask-border-outset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length> | <number> ]{1,4} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-repeat - CSS: Cascading Style Sheets
formal definition initial valuestretchapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-slice - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of the mask border imagecomputed valueas specifiedanimation typediscrete formal syntax <number-percentage>{1,4} fill?where <number-percentage> = <number> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-source - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
mask-border-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basi...
mask-border - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in
svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width: relative to width/height of the mask border image areacomputed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specifie...
object-position - CSS: Cascading Style Sheets
<img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.
svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.
svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
offset - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: offset-anchor offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10px 30px; offset: none; /* offset path */ offset: ray(45deg closest-side); offset: path('m 100 100 l 300 100 l 200 300 z'); offset: url(arc.
svg); /* offset path with distance and/or rotation */ offset: url(circle.
svg) 100px; offset: url(circle.
svg) 40%; offset: url(circle.
svg) 30deg; offset: url(circle.
svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.
svg) 2cm / 0.5cm 3cm; offset: url(arc.
svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the...
CSS: Cascading Style Sheets
cascading style sheets (css) is a stylesheet language used to describe the presentation of a document written in html or xml (including xml dialects such as
svg, mathml or xhtml).
Demos of open web technologies
2d graphics canvas blob sallad: an interactive blob using javascript and canvas (code demos) 3d raycaster processing.js p5js 3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code)
svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics guide (interactive) 3d objects demo (interactive) blobular (interactive) video embedded in
svg (or use the local download) summer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance"...
Challenge solutions - Developer guides
nt.getelementbyid("square"); square.style.backgroundcolor = "#fa4"; square.style.marginleft = "20em"; button.setattribute("disabled", "true"); settimeout(cleardemo, 2000, button); } function cleardemo (button) { var square = document.getelementbyid("square"); square.style.backgroundcolor = "transparent"; square.style.marginleft = "0em"; button.removeattribute("disabled"); }
svg and css change color of inner petals challenge change the stylesheet so that the inner petals all turn pink when the mouse pointer is over any one of them, without changing the way the outer petals work.
<a>: The Anchor element - HTML: Hypertext Markup Language
ens a new tab/window <a target="_blank" href="https://www.wikipedia.org"> wikipedia (opens in new tab) </a> link to a non-html resource <a href="2017-annual-report.ppt"> 2017 annual report (powerpoint) </a> if an icon is used to signify link behavior, make sure it has alt text: <a target="_blank" href="https://www.wikipedia.org"> wikipedia <img alt="(opens in new tab)" src="newtab.
svg"> </a> <a href="2017-annual-report.ppt"> 2017 annual report <img alt="(powerpoint file)" src="ppt-icon.
svg"> </a> webaim: links and hypertext - hypertext links mdn / understanding wcag, guideline 3.2 g200: opening new windows and tabs from a link only when necessary g201: giving users advanced warning when opening a new window skip links a skip link is a link placed as early as poss...
<button>: The Button element - HTML: Hypertext Markup Language
example <button name="favorite"> <
svg aria-hidden="true" viewbox="0 0 10 10"><path d="m7 9l5 8 3 9v6l1 4h3l1-3 1 3h3l7 6z"/></
svg> add to favorites </button> if you want to visually hide the button's text, an accessible way to do so is to use a combination of css properties to remove it visually from the screen, but keep it parseable by assistive technology.
<input type="file"> - HTML: Hypertext Markup Language
// https://developer.mozilla.org/docs/web/media/formats/image_types const filetypes = [ "image/apng", "image/bmp", "image/gif", "image/jpeg", "image/pjpeg", "image/png", "image/
svg+xml", "image/tiff", "image/webp", "image/x-icon" ]; function validfiletype(file) { return filetypes.includes(file.type); } the returnfilesize() function takes a number (of bytes, taken from the current file's size property), and turns it into a nicely formatted size in bytes/kb/mb.
Inline elements - HTML: Hypertext Markup Language
br> <acronym> <audio> (if it has visible controls) <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <
svg> <template> <textarea> <time> <u> <tt> <var> <video> <wbr> see also block-level elements html element reference display content categories block and inline layout in normal flow ...
Common MIME types - HTTP
application/x-httpd-php .ppt microsoft powerpoint application/vnd.ms-powerpoint .pptx microsoft powerpoint (openxml) application/vnd.openxmlformats-officedocument.presentationml.presentation .rar rar archive application/vnd.rar .rtf rich text format (rtf) application/rtf .sh bourne shell script application/x-sh .
svg scalable vector graphics (
svg) image/
svg+xml .swf small web format (swf) or adobe flash document application/x-shockwave-flash .tar tape archive (tar) application/x-tar .tif .tiff tagged image file format (tiff) image/tiff .ts mpeg transport stream video/mp2t .ttf truetype font font/ttf .txt text, (ge...
Resource URLs - HTTP
syntax resource urls are composed of two parts: a prefix (resource:), and a url pointing to the resource you want to load: resource://<url> an example: resource://gre/res/
svg.css when arrows are found in the resource url's ('->'), it means that the first file loaded the next one: resource://<file-loader> -> <file-loaded> please refer to identifying resources on the web for more general details.
List of default Accept values - HTTP
source safari */* chrome image/webp,image/apng,image/*,*/*;q=0.8 source internet explorer 8 or earlier */* see ie and the accept header (ieinternals' msdn blog) internet explorer 9 image/png,image/
svg+xml,image/*;q=0.8, */*;q=0.5 see fiddler is better with internet explorer 9 (ieinternals' msdn blog) values for a video when a video is requested, via the <video> html element, most browsers use specific values.
Accept - HTTP
image/* will match image/png, image/
svg, image/gif and any other image types.
A re-introduction to JavaScript (JS tutorial) - JavaScript
the most common host environment is the browser, but javascript interpreters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop,
svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
instanceof - JavaScript
for instance, you can securely check if a given object is, in fact, an array using array.isarray(myobj) for example, checking if a nodes is a
svgelement in a different context, you can use mynode instanceof mynode.ownerdocument.defaultview.
svgelement.
icons - Web app manifests
examples "icons": [ { "src": "icon/lowres.webp", "sizes": "48x48", "type": "image/webp" }, { "src": "icon/lowres", "sizes": "48x48" }, { "src": "icon/hd_hi.ico", "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.
svg", "sizes": "72x72" } ] values image objects may contain the following values: member description sizes a string containing space-separated image dimensions.