diff --git a/xml/xml-psi-impl/mdn-doc-gen/src/GenerateMdnDocumentation.kt b/xml/xml-psi-impl/mdn-doc-gen/src/GenerateMdnDocumentation.kt index 2997444b6c15..a9f9cb96deca 100644 --- a/xml/xml-psi-impl/mdn-doc-gen/src/GenerateMdnDocumentation.kt +++ b/xml/xml-psi-impl/mdn-doc-gen/src/GenerateMdnDocumentation.kt @@ -29,6 +29,7 @@ import com.intellij.util.applyIf import com.intellij.util.asSafely import com.intellij.util.text.CharSequenceSubSequence import com.intellij.util.text.NameUtilCore +import com.intellij.xml.util.Html5TagAndAttributeNamesProvider import java.io.File import java.io.FileReader import java.lang.reflect.Type @@ -126,19 +127,34 @@ class GenerateMdnDocumentation : BasePlatformTestCase() { } fun testGenSvg() { - val attributes = - extractInformationSimple("svg.global_attributes", "svg/reference/attribute", listOf('_')) { dir, bcdPath, bcd -> - if (bcd == null && dir.name !in listOf("requiredfeatures", "systemlanguage")) - null - else - extractAttributeDocumentation(dir, bcdPath, bcd) + val attributes = extractInformationSimple("svg.global_attributes", "svg/reference/attribute", listOf('_')) { dir, bcdPath, bcd -> + extractAttributeDocumentation(dir, bcdPath, bcd) + } + val tags = extractInformationSimple("svg.elements", "svg/reference/element", listOf('_')) { dir, bcdPath, bcdInfo -> + this.extractElementDocumentation(dir, "svg/reference/attribute", null, bcdPath, bcdInfo, attributes) + } + + val knownAttributes = mutableSetOf() + val neededGlobalAttributes = mutableSetOf("requiredfeatures") + val tag = tags["svg"] + for (attrName in Html5TagAndAttributeNamesProvider.getTagAttributes(Html5TagAndAttributeNamesProvider.Namespace.HTML, "svg", false)!!) { + knownAttributes.add(attrName.toString().lowercase()) + if (tag?.attrs?.keys?.find { it.equals(attrName.toString(), true) } == null) { + neededGlobalAttributes.add(attrName.toString()) } + } + for (tagName in Html5TagAndAttributeNamesProvider.getTags(Html5TagAndAttributeNamesProvider.Namespace.SVG, false)) { + val tag = tags[tagName.toString().lowercase()] + for (attrName in Html5TagAndAttributeNamesProvider.getTagAttributes(Html5TagAndAttributeNamesProvider.Namespace.SVG, tagName, false)!!) { + knownAttributes.add(attrName.toString().lowercase()) + if (tag?.attrs?.keys?.find { it.equals(attrName.toString(), true) } == null) { + neededGlobalAttributes.add(attrName.toString()) + } + } + } + outputJson(MdnApiNamespace.Svg.name, MdnHtmlDocumentation( - LICENSE, AUTHOR, BUILT_LANG, - attributes, - extractInformationSimple("svg.elements", "svg/reference/element", listOf('_')) { dir, bcdPath, bcdInfo -> - this.extractElementDocumentation(dir, "svg/reference/attribute", null, bcdPath, bcdInfo, attributes) - } + LICENSE, AUTHOR, BUILT_LANG, attributes.filter { it.key in neededGlobalAttributes || it.key !in knownAttributes }, tags )) } diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg-obsolete.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg-obsolete.json index 95a798475c0a..5b62b738e5c3 100644 --- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg-obsolete.json +++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg-obsolete.json @@ -17,22 +17,6 @@ "compatibility": {}, "doc": "

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

\n

The color-profile attribute is used to define which color profile a raster image included through the <image> element should use.\n

\n

Note: As a presentation attribute, color-profile can be used as a CSS property.\n

\n

You can use this attribute with the following SVG elements:\n

" }, - "data-_star_": { - "url": "$MDN_URL$/web/svg/attribute/data-_star_", - "status": [ - "Obsolete" - ], - "compatibility": { - "Chrome": "55", - "ChromeAndroid": "55", - "Edge": "79", - "Firefox": "51", - "Opera": "42", - "Safari": "10", - "SafariIOS": "10" - }, - "doc": "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 HTMLElement.dataset property.\n

The * can be replaced by any characters allowed in XML's rules for names, with the following restrictions:\n

\n
\n

Note: The HTMLElement.dataset property is a DOMStringMap that provides the attribute data-test-value via SVGElement.dataset.testValue. Hyphen characters (-, U+002D) are removed and the next letter is capitalized, resulting in the camel case format.\n

\n

You can use this attribute with any SVG element." - }, "enable-background": { "url": "$MDN_URL$/web/svg/attribute/enable-background", "status": [ @@ -41,32 +25,6 @@ "compatibility": {}, "doc": "

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

\n

The enable-background attribute specifies how the accumulation of the background image is managed.\n

\n

Note: As a presentation attribute, enable-background can be used as a CSS property.\n

\n

You can use this attribute with the following SVG elements:\n

" }, - "fill": { - "url": "$MDN_URL$/web/svg/attribute/fill", - "status": [ - "Obsolete" - ], - "compatibility": { - "Firefox": "3" - }, - "doc": "The fill attribute has two different meanings. 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.\n

You can use this attribute with the following SVG elements:\n

\n

For animation, these elements are using this attribute: <animate>, <animateMotion>, <animateTransform>, and <set>." - }, - "href": { - "url": "$MDN_URL$/web/svg/attribute/href", - "status": [ - "Obsolete" - ], - "compatibility": { - "Chrome": "50", - "ChromeAndroid": "50", - "Edge": "", - "Firefox": "51", - "Opera": "37", - "Safari": "12.1", - "SafariIOS": "12.2" - }, - "doc": "The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.\n

\n

Note: Specifications before SVG 2 defined an xlink:href attribute, which is now rendered obsolete by the href attribute. If you need to support earlier browser versions, the deprecated xlink:href attribute can be used as a fallback in addition to the href attribute, e.g. <use href=\"some-id\" xlink:href=\"some-id\" x=\"5\" y=\"5\" />.\n

\n

You can use this attribute with the following SVG elements:\n

" - }, "kerning": { "url": "$MDN_URL$/web/svg/attribute/kerning", "status": [ @@ -74,13 +32,6 @@ ], "compatibility": {}, "doc": "

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

\n

The kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero).\n

\n

Note: As a presentation attribute kerning can be used as a CSS property. In CSS the property is called font-kerning, though.\n

\n

You can use this attribute with the following SVG elements:\n

" - }, - "textlength": { - "url": "$MDN_URL$/web/svg/attribute/textlength", - "status": [ - "Obsolete" - ], - "doc": "The textLength attribute, available on SVG <text> and <tspan> elements, lets you specify the width of the space into which the text will draw. The user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthAdjust attribute. By default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthAdjust.\n

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).\n

You can use this attribute with the following SVG elements:\n

" } }, "tags": { diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg.json index 13487eef2143..f81cf68bb67d 100644 --- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg.json +++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg.json @@ -9,6 +9,14 @@ }, "lang": "en-us", "attrs": { + "accumulate": { + "url": "$MDN_URL$/web/svg/reference/attribute/accumulate", + "doc": "The accumulate attribute controls whether or not an animation is cumulative.\n

It is frequently useful for repeated animations to build upon the previous results, accumulating with each iteration. This attribute said to the animation if the value is added to the previous animated attribute's value on each iteration.\n

You can use this attribute with the following SVG elements:\n

" + }, + "additive": { + "url": "$MDN_URL$/web/svg/reference/attribute/additive", + "doc": "The additive attribute controls whether or not an animation is additive.\n

It is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values.\n

You can use this attribute with the following SVG elements:\n

" + }, "alignment-baseline": { "url": "$MDN_URL$/web/svg/reference/attribute/alignment-baseline", "status": [ @@ -27,6 +35,10 @@ }, "doc": "The alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property.\n
\n

Note:\nAs a presentation attribute, alignment-baseline also has a CSS property counterpart: alignment-baseline. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "amplitude": { + "url": "$MDN_URL$/web/svg/reference/attribute/amplitude", + "doc": "The amplitude attribute controls the amplitude of the gamma function of a component transfer element when its type attribute is gamma.\n

You can use this attribute with the following SVG elements:\n

" + }, "autofocus": { "url": "$MDN_URL$/web/svg/reference/attribute/autofocus", "status": [ @@ -49,6 +61,50 @@ }, "doc": "The autofocus global SVG attribute defines a focusable element to be focused after it's connected to a document. The attribute has no effect if the element is not already focusable.\n

The autofocus attribute has an HTML counterpart: autofocus. No more than one element in the document may have the autofocus attribute. If applied to multiple elements, the first one will receive focus." }, + "azimuth": { + "url": "$MDN_URL$/web/svg/reference/attribute/azimuth", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The azimuth attribute specifies the direction angle for the light source on the XY plane (clockwise), in degrees from the x axis.\n

You can use this attribute with the following SVG elements:\n

" + }, + "basefrequency": { + "url": "$MDN_URL$/web/svg/reference/attribute/basefrequency", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The baseFrequency attribute represents the base frequency parameter for the noise function of the <feTurbulence> filter primitive.\n

You can use this attribute with the following SVG elements:\n

" + }, "baseline-shift": { "url": "$MDN_URL$/web/svg/reference/attribute/baseline-shift", "status": [ @@ -67,6 +123,54 @@ }, "doc": "The baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript.\n
\n

Note:\nAs a presentation attribute, baseline-shift also has a CSS property counterpart: baseline-shift. When both are specified, the CSS property takes priority.\n

\n
\n

Note:\nThis property is going to be deprecated and authors are advised to use vertical-align instead.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "begin": { + "url": "$MDN_URL$/web/svg/reference/attribute/begin", + "doc": "The begin attribute defines when the associated element becomes active.\nFor an animation element, this is the point at which the animation should begin.\n

The attribute value is a semicolon separated list of values. The interpretation of a list of start times is detailed in the SMIL specification in \"Evaluation of begin and end time lists\". Each individual value can be one of the following: <offset-value>, <syncbase-value>, <event-value>, <repeat-value>, <accessKey-value>, <wallclock-sync-value> or the keyword indefinite.\n

You can use this attribute with the following SVG elements:\n

" + }, + "bias": { + "url": "$MDN_URL$/web/svg/reference/attribute/bias", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "6", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The bias attribute shifts the range of the filter. After applying the kernelMatrix of the <feConvolveMatrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component. This allows representation of values that would otherwise be clamped to 0 or 1.\n

You can use this attribute with the following SVG elements:\n

" + }, + "by": { + "url": "$MDN_URL$/web/svg/reference/attribute/by", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "2", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "4", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "3", + "SafariIOS": "2" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The by attribute specifies a relative offset value for an attribute that will be modified during an animation.\n

The starting value for the attribute is either indicated by specifying it as value for the attribute given in the attributeName or the from attribute.\n

You can use this attribute with the following SVG elements:\n

" + }, "class": { "url": "$MDN_URL$/web/svg/reference/attribute/class", "status": [ @@ -212,6 +316,25 @@ }, "doc": "The color-interpolation-filters attribute specifies the color space for imaging operations performed via filter effects.\n
\n

Note:\nThis property just has an affect on filter operations. Therefore, it has no effect on filter primitives like <feOffset>, <feImage>, <feTile> or <feFlood>.\n

color-interpolation-filters has a different initial value than color-interpolation. color-interpolation-filters has an initial value of linearRGB, whereas color-interpolation has an initial value of sRGB. Thus, in the default case, filter effects operations occur in the linearRGB color space, whereas all other color interpolations occur by default in the sRGB color space.\n

It has no affect on filter functions, which operate in the sRGB color space.\n

\n
\n

Note:\nAs a presentation attribute, color-interpolation-filters also has a CSS property counterpart: color-interpolation-filters. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "crossorigin": { + "url": "$MDN_URL$/web/svg/reference/attribute/crossorigin", + "status": [ + "StandardTrack" + ], + "compatibility": { + "support_of_crossorigin": { + "Chrome": "118", + "ChromeAndroid": "118", + "Edge": "118", + "Firefox": "114", + "FirefoxAndroid": "114", + "Opera": "104", + "Safari": "17.2", + "SafariIOS": "17.2" + } + }, + "doc": "The crossorigin attribute, valid on the <image> and <feImage> elements, provides support for configuration of the Cross-Origin Resource Sharing (CORS) requests for the element's fetched data.\n

This table shows possible keywords and their meaning:\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeywordDescription
anonymousClient CORS requests for this element will have the credentials flag set to 'same-origin'.
use-credentialsClient CORS requests for this element will have the credentials flag set to 'include'.
\"\"Setting the attribute name to an empty value, like crossorigin or crossorigin=\"\", is the same as anonymous.
\n

It follows the same processing rules as the HTML attribute crossorigin." + }, "cursor": { "url": "$MDN_URL$/web/svg/reference/attribute/cursor", "status": [ @@ -234,6 +357,46 @@ }, "doc": "The cursor attribute specifies the mouse cursor displayed when the mouse pointer is over an element.\n

\n

Note:\nAs a presentation attribute, cursor also has a CSS property counterpart: cursor. When both are specified, the CSS property takes priority.\n

" }, + "decoding": { + "url": "$MDN_URL$/web/svg/reference/attribute/decoding", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "65", + "ChromeAndroid": "65", + "Edge": "79", + "Firefox": "63", + "FirefoxAndroid": "63", + "Opera": "52" + }, + "baseline": { + "level": "NONE" + }, + "doc": "The decoding attribute, valid on <image> elements, provides a hint to the browser as to whether it should perform image decoding along with rendering other content in a single presentation step that looks more \"correct\" (sync), or render and present the other content first and then decode the image and present it later (async). In practice, async means that the next paint does not wait for the image to decode.\n

It is often difficult to perceive any noticeable effect when using decoding on static <image> elements. They'll likely be initially rendered as empty images while the image files are fetched (either from the network or from the cache) and then handled independently anyway, so the \"syncing\" of content updates is less apparent. However, the blocking of rendering while decoding happens, while often quite small, can be measured — even if it is difficult to observe with the human eye.\n

Using different decoding types can result in more noticeable differences when dynamically inserting <image> elements into the DOM via JavaScript — see SVGImageElement.decoding for more details.\n

Allowed values:\n

\n
sync
\n
\n

Decode the image synchronously along with rendering the other content, and present everything together.\n

\n
async
\n
\n

Decode the image asynchronously, after rendering and presenting the other content.\n

\n
auto
\n
\n

No preference for the decoding mode; the browser decides what is best for the user. This is the default value.\n

\n
" + }, + "diffuseconstant": { + "url": "$MDN_URL$/web/svg/reference/attribute/diffuseconstant", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The diffuseConstant attribute represents the kd value in the Phong lighting model. In SVG, this can be any non-negative number.\n

It's used to determine the final RGB value of a given pixel. The brighter the lighting-color, the smaller this number should be.\n

You can use this attribute with the following SVG elements:\n

" + }, "direction": { "url": "$MDN_URL$/web/svg/reference/attribute/direction", "status": [ @@ -278,6 +441,28 @@ }, "doc": "The display attribute lets you control the rendering of graphical or container elements.\n

A value of display=\"none\" indicates that the given element and its children will not be rendered. Any value other than none or inherit indicates that the given element will be rendered by the browser.\n

When applied to a container element, setting display to none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with display=\"none\" will never be rendered even if the child has a value for display other than none.\n

When the display attribute is set to none, then the given element does not become part of the rendering tree. It has implications for the <tspan> elements, event processing, for bounding box calculations and for calculation of clipping paths:\n

\n

The display attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting it to none on a <path> element will prevent that element from getting rendered directly onto the canvas, but the <path> element can still be referenced by a <textPath> element; furthermore, its geometry will be used in text-on-a-path processing even if the <path> has a display value of none.\n

This attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting display=\"none\" on a child of a <mask> will prevent the given child element from being rendered as part of the mask. Similarly, setting display=\"none\" on a child of a <clipPath> element will prevent the given child element from contributing to the clipping path.\n

\n

Note:\nAs a presentation attribute, display also has a CSS property counterpart: display. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with any SVG element." }, + "divisor": { + "url": "$MDN_URL$/web/svg/reference/attribute/divisor", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "6", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The divisor attribute specifies the value by which the resulting number of applying the kernelMatrix of a <feConvolveMatrix> element to the input image color value is divided to yield the destination color value.\n

A divisor that is the sum of all the matrix values tends to have an evening effect on the overall color intensity of the result.\n

You can use this attribute with the following SVG elements:\n

" + }, "dominant-baseline": { "url": "$MDN_URL$/web/svg/reference/attribute/dominant-baseline", "status": [ @@ -300,6 +485,94 @@ }, "doc": "The dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box's alignment context.\n

It is used to determine or re-determine a scaled-baseline-table. A scaled-baseline-table is a compound value with three components:\n

    \n
  1. a baseline-identifier for the dominant-baseline,
    2. \n
  2. a baseline-table, and
    3. \n
  3. a baseline-table font-size.
    4. \n
\n

Some values of the property re-determine all three values. Others only re-establish the baseline-table font-size. When the initial value, auto, would give an undesired result, this property can be used to explicitly set the desired scaled-baseline-table.\n

If there is no baseline table in the nominal font, or if the baseline table lacks an entry for the desired baseline, then the browser may use heuristics to determine the position of the desired baseline.\n

\n

Note:\nAs a presentation attribute, dominant-baseline also has a CSS property counterpart: dominant-baseline. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "dur": { + "url": "$MDN_URL$/web/svg/reference/attribute/dur", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "2", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "4", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "4", + "SafariIOS": "3.2" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The dur attribute indicates the simple duration of an animation.\n

You can use this attribute with the following SVG elements:\n

" + }, + "edgemode": { + "url": "$MDN_URL$/web/svg/reference/attribute/edgemode", + "doc": "The edgeMode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.\n

You can use this attribute with the following SVG elements:\n

" + }, + "elevation": { + "url": "$MDN_URL$/web/svg/reference/attribute/elevation", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The elevation attribute specifies the direction angle for the light source from the XY plane towards the Z-axis, in degrees. Note that the positive Z-axis points towards the viewer of the content.\n

You can use this attribute with the following SVG elements:\n

" + }, + "end": { + "url": "$MDN_URL$/web/svg/reference/attribute/end", + "doc": "The end attribute defines an end value for the animation that can constrain the active duration.\n

You can use this attribute with the following SVG elements:\n

" + }, + "exponent": { + "url": "$MDN_URL$/web/svg/reference/attribute/exponent", + "doc": "The exponent attribute defines the exponent of the gamma function.\n

You can use this attribute with the following SVG elements:\n

" + }, + "fetchpriority": { + "url": "$MDN_URL$/web/svg/reference/attribute/fetchpriority", + "status": [ + "Experimental" + ], + "compatibility": { + "support_of_fetchpriority": { + "Firefox": "140", + "FirefoxAndroid": "140" + } + }, + "doc": "

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

\n

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

\n

The fetchpriority attribute provides a hint to the browser about the relative priority to use when fetching an external resource. This works the same way as the fetchpriority attribute for the HTML <img> and <script> elements.\n

You can use this attribute with the following SVG elements:\n

" + }, + "fill": { + "url": "$MDN_URL$/web/svg/reference/attribute/fill", + "status": [ + "StandardTrack" + ], + "compatibility": { + "support_of_fill": { + "Chrome": "", + "ChromeAndroid": "", + "Edge": "79", + "Firefox": "1.5", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "3", + "SafariIOS": "2" + } + }, + "doc": "The fill attribute has two different meanings. 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.\n
\n

Note:\nWhen used as a presentation attribute, fill also has a CSS property counterpart: fill. When both are specified, the CSS property takes priority.\n

\n

The SVG presentational fill attribute and the CSS fill property can be used with the following SVG elements:\n

\n

The SVG fill attribute can be used to define the final animation state with the following SVG elements:\n

" + }, "fill-opacity": { "url": "$MDN_URL$/web/svg/reference/attribute/fill-opacity", "status": [ @@ -562,6 +835,50 @@ }, "doc": "The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.\n
\n

Note:\nAs a presentation attribute, font-weight also has a CSS property counterpart: font-weight. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "fr": { + "url": "$MDN_URL$/web/svg/reference/attribute/fr", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "24", + "ChromeAndroid": "25", + "Edge": "79", + "Firefox": "55", + "FirefoxAndroid": "55", + "Opera": "15", + "Safari": "7", + "SafariIOS": "7" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The fr attribute defines the radius of the focal point for the radial gradient.\n

You can use this attribute with the following SVG elements:\n

" + }, + "from": { + "url": "$MDN_URL$/web/svg/reference/attribute/from", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "2", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "4", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "4", + "SafariIOS": "3.2" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The from attribute indicates the initial value of the attribute that will be modified during the animation.\n

When used with the to attribute, the animation will change the modified attribute from the from value to the to value. When used with the by attribute, the animation will change the attribute relatively from the from value by the value specified in by.\n

You can use this attribute with the following SVG elements:\n

" + }, "glyph-orientation-horizontal": { "url": "$MDN_URL$/web/svg/reference/attribute/glyph-orientation-horizontal", "status": [ @@ -592,6 +909,25 @@ }, "doc": "

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

\n

The glyph-orientation-vertical attribute affects the amount that the current text position advances as each glyph is rendered.\n

When the inline-progression-direction is vertical and the glyph-orientation-vertical results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph. Otherwise, if the angle is not a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.\n

This attribute is applied only to text written in a vertical writing-mode.\n

\n

Note:\nAs a presentation attribute, glyph-orientation-vertical also has a CSS property counterpart: glyph-orientation-vertical. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "href": { + "url": "$MDN_URL$/web/svg/reference/attribute/href", + "status": [ + "StandardTrack" + ], + "compatibility": { + "support_of_href": { + "Chrome": "50", + "ChromeAndroid": "50", + "Edge": "", + "Firefox": "1.5", + "FirefoxAndroid": "4", + "Opera": "37", + "Safari": "12.1", + "SafariIOS": "12.2" + } + }, + "doc": "The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.\n
\n

Note:\nSpecifications before SVG 2 defined an xlink:href attribute, which is now rendered obsolete by the href attribute. If you need to support earlier browser versions, the deprecated xlink:href attribute can be used as a fallback in addition to the href attribute, e.g., <use href=\"some-id\" xlink:href=\"some-id\" x=\"5\" y=\"5\" />.\n

\n

You can use this attribute with the following SVG elements:\n

" + }, "id": { "url": "$MDN_URL$/web/svg/reference/attribute/id", "status": [ @@ -636,6 +972,150 @@ }, "doc": "The image-rendering attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.\n

The resampling is always done in a true color (e.g., 24-bit) color space even if the original data and/or the target device is indexed color.\n

\n

Note:\nAs a presentation attribute, image-rendering also has a CSS property counterpart: image-rendering. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "in": { + "url": "$MDN_URL$/web/svg/reference/attribute/in", + "doc": "The in attribute identifies input for the given filter primitive.\n

The value can be either one of the six keywords defined below, or a string which matches a previous result attribute value within the same <filter> element. If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.\n

If the value for result appears multiple times within a given <filter> element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.\n

You can use this attribute with the following SVG elements:\n

" + }, + "in2": { + "url": "$MDN_URL$/web/svg/reference/attribute/in2", + "doc": "The in2 attribute identifies the second input for the given filter primitive. It works exactly like the in attribute.\n

You can use this attribute with the following SVG elements:\n

" + }, + "intercept": { + "url": "$MDN_URL$/web/svg/reference/attribute/intercept", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The intercept attribute defines the intercept of the linear function of color component transfers when the type attribute is set to linear.\n

The linear function is defined as slope * color + intercept, where color is the color value, the intercept provides a base value for the result, and the slope is a scaling factor.\n

The intercept attribute is supported by children of the <feComponentTransfer> filter primitive and is used with the following SVG component transfer function elements when type=\"linear\" is set:\n

" + }, + "k1": { + "url": "$MDN_URL$/web/svg/reference/attribute/k1", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The k1 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive.\n

The pixel composition is computed using the following formula:\n

\n```js\nresult = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4;\n```\n
\n

You can use this attribute with the following SVG elements:\n

" + }, + "k2": { + "url": "$MDN_URL$/web/svg/reference/attribute/k2", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The k2 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive.\n

The pixel composition is computed using the following formula:\n

\n```js\nresult = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4;\n```\n
\n

You can use this attribute with the following SVG elements:\n

" + }, + "k3": { + "url": "$MDN_URL$/web/svg/reference/attribute/k3", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The k3 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive.\n

The pixel composition is computed using the following formula:\n

\n```js\nresult = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4;\n```\n
\n

You can use this attribute with the following SVG elements:\n

" + }, + "k4": { + "url": "$MDN_URL$/web/svg/reference/attribute/k4", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The k4 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive.\n

The pixel composition is computed using the following formula:\n

result = k1*i1*i2 + k2*i1 + k3*i2 + k4\n
\n

You can use this attribute with the following SVG elements:\n

" + }, + "kernelmatrix": { + "url": "$MDN_URL$/web/svg/reference/attribute/kernelmatrix", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "6", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The kernelMatrix attribute defines the list of numbers that make up the kernel matrix for the <feConvolveMatrix> element.\n

Values are separated by space characters and/or a comma. The number of entries in the list must equal to <orderX> by <orderY> as defined in the order attribute.\n

You can use this attribute with the following SVG elements:\n

" + }, + "kernelunitlength": { + "url": "$MDN_URL$/web/svg/reference/attribute/kernelunitlength", + "doc": "The kernelUnitLength attribute has two meanings based on the context it's used in. For lighting filter primitives, it indicates the intended distance for the x and y coordinates, for <feConvolveMatrix>, it indicates the intended distance between successive columns and rows in the kernel matrix.\n

You can use this attribute with the following SVG elements:\n

" + }, "lang": { "url": "$MDN_URL$/web/svg/reference/attribute/lang", "status": [ @@ -702,6 +1182,28 @@ }, "doc": "The lighting-color attribute defines the color of the light source for lighting filter primitives.\n
\n

Note:\nAs a presentation attribute, lighting-color also has a CSS property counterpart: lighting-color. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "limitingconeangle": { + "url": "$MDN_URL$/web/svg/reference/attribute/limitingconeangle", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The limitingConeAngle attribute represents the angle in degrees between the spot light axis (i.e., the axis between the light source and the point to which it is pointing at) and the spot light cone. So it defines a limiting cone which restricts the region where the light is projected. No light is projected outside the cone.\n

You can use this attribute with the following SVG elements:\n

" + }, "marker-end": { "url": "$MDN_URL$/web/svg/reference/attribute/marker-end", "status": [ @@ -789,6 +1291,66 @@ }, "doc": "The mask attribute is a presentation attribute mainly used to bind a given <mask> element with the element the attribute belongs to.\n
\n

Note:\nAs a presentation attribute, mask also has a CSS property counterpart: mask. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "mask-type": { + "url": "$MDN_URL$/web/svg/reference/attribute/mask-type", + "doc": "The mask-type attribute indicates which mask mode, alpha or luminance, to use for the contents of the <mask> element when masking.\n

You can use this attribute with the following SVG elements:\n

\n
\n

Note:\nThis presentation attribute has a CSS property counterpart: mask-type. When both are specified, the CSS property takes priority.\n

" + }, + "max": { + "url": "$MDN_URL$/web/svg/reference/attribute/max", + "doc": "The max attribute specifies the maximum value of the active animation duration.\n

You can use this attribute with the following SVG elements:\n

" + }, + "method": { + "url": "$MDN_URL$/web/svg/reference/attribute/method", + "doc": "The method attribute indicates the method by which text should be rendered along the path of a <textPath> element.\n

You can use this attribute with the following SVG elements:\n

" + }, + "min": { + "url": "$MDN_URL$/web/svg/reference/attribute/min", + "doc": "The min attribute specifies the minimum value of the active animation duration.\n

You can use this attribute with the following SVG elements:\n

" + }, + "mode": { + "url": "$MDN_URL$/web/svg/reference/attribute/mode", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "4", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The mode attribute defines the blending mode on the <feBlend> filter primitive.\n

You can use this attribute with the following SVG elements:\n

" + }, + "numoctaves": { + "url": "$MDN_URL$/web/svg/reference/attribute/numoctaves", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The numOctaves attribute defines the number of octaves for the noise function of the <feTurbulence> primitive.\n

An octave is a noise function defined by its frequency and amplitude. A turbulence is built by accumulating several octaves with increasing frequencies and decreasing amplitudes.\nThe higher the number of octaves, the more natural the noise looks. Though more octaves also require more calculations, resulting in a negative impact on performance.\n

You can use this attribute with the following SVG elements:\n

" + }, "opacity": { "url": "$MDN_URL$/web/svg/reference/attribute/opacity", "status": [ @@ -811,6 +1373,32 @@ }, "doc": "The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.\n
\n

Note:\nAs a presentation attribute, opacity also has a CSS property counterpart: opacity. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

\n

Unlike fill-opacity, stroke-opacity, and stop-opacity, which are applied to individual operations and are rendered when the element is rendered, opacity is applied to whole objects or groups, and is more like a post-processing operation on the rendered image of the object or group. Therefore, when you have both opacity and the other opacity attributes in the same area, they will be overlaid on top of each other and cause the opacity to be multiplied." }, + "operator": { + "url": "$MDN_URL$/web/svg/reference/attribute/operator", + "doc": "The operator attribute has two meanings based on the context it's used in. Either it defines the compositing or morphing operation to be performed.\n

You can use this attribute with the following SVG elements:\n

" + }, + "order": { + "url": "$MDN_URL$/web/svg/reference/attribute/order", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "6", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The order attribute indicates the size of the matrix to be used by a <feConvolveMatrix> element.\n

You can use this attribute with the following SVG elements:\n

" + }, "overflow": { "url": "$MDN_URL$/web/svg/reference/attribute/overflow", "status": [ @@ -874,32 +1462,172 @@ }, "doc": "The pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.\n
\n

Note:\nAs a presentation attribute, pointer-events also has a CSS property counterpart: pointer-events. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, - "requiredextensions": { - "url": "$MDN_URL$/web/svg/reference/attribute/requiredextensions", + "pointsatx": { + "url": "$MDN_URL$/web/svg/reference/attribute/pointsatx", "status": [ "StandardTrack" ], "compatibility": { - "Chrome": "81", - "ChromeAndroid": "81", - "Edge": "81", - "Firefox": "2", + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", "FirefoxAndroid": "4", - "Opera": "68", - "Safari": "8", - "SafariIOS": "8" + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" }, "baseline": { "level": "HIGH", - "lowDate": "2020-04-13", - "highDate": "2022-10-13" + "lowDate": "2015-07-29", + "highDate": "2018-01-29" }, - "doc": "The requiredExtensions SVG conditional processing attribute is a list of space-separated URL values each referencing a language extension. Language extensions are extended capabilities that go beyond those defined by standard browser specifications.\n

The value is a space-separated list of URL references identifying the required extensions. If all of the named extensions in the list are supported by the user agent, the element is rendered as usual. If attribute is present but the value is an empty string, or if any of the extensions are not supported by the browser, the browser will skip the element, along with all its descendants, not rendering it.\n

You can use this attribute with the following SVG elements:\n

" + "doc": "The pointsAtX attribute represents the x location in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing.\n

You can use this attribute with the following SVG elements:\n

" + }, + "pointsaty": { + "url": "$MDN_URL$/web/svg/reference/attribute/pointsaty", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The pointsAtY attribute represents the y location in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing.\n

You can use this attribute with the following SVG elements:\n

" + }, + "pointsatz": { + "url": "$MDN_URL$/web/svg/reference/attribute/pointsatz", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The pointsAtZ attribute represents the z location in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing, assuming that, in the initial local coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y.\n

You can use this attribute with the following SVG elements:\n

" + }, + "preservealpha": { + "url": "$MDN_URL$/web/svg/reference/attribute/preservealpha", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "6", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "the preserveAlpha attribute indicates how a <feConvolveMatrix> element handles alpha transparency.\n

You can use this attribute with the following SVG elements:\n

" + }, + "radius": { + "url": "$MDN_URL$/web/svg/reference/attribute/radius", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The radius attribute represents the radius (or radii) for the operation on a given <feMorphology> filter primitive.\n

If two numbers are provided, the first number represents the x-radius and the second one the y-radius. If one number is provided, then that value is used for both x and y. The values are in the coordinate system established by the primitiveUnits attribute on the <filter> element.\n

A negative or zero value disables the effect of the given filter primitive (i.e., the result is the filter input image).\n

You can use this attribute with the following SVG elements:\n

" }, "requiredfeatures": { "url": "$MDN_URL$/web/svg/reference/attribute/requiredfeatures", "doc": "

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

\n

The requiredFeatures attribute takes a list of feature strings, with the individual strings separated by white space. It determines whether or not all of the named features are supported by the browser; if all of them are supported, the attribute evaluates to true end the element is rendered; otherwise, the attribute evaluates to false and the current element and its children are skipped and thus will not be rendered. This provides a way to design SVG that gracefully falls back when features aren't available.\n

If the attribute is not present, then its implicit evaluated value is true. If a null string or empty string value is given to attribute requiredFeatures, the attribute is evaluate to false.\n

requiredFeatures is often used in conjunction with the <switch> element. If requiredFeatures is used in other situations, it represents a simple switch on the given element whether to render the element or not.\n

You can use this attribute with the following SVG elements:\n

" }, + "restart": { + "url": "$MDN_URL$/web/svg/reference/attribute/restart", + "doc": "The restart attribute specifies whether or not an animation can restart.\n

You can use this attribute with the following SVG elements:\n

" + }, + "result": { + "url": "$MDN_URL$/web/svg/reference/attribute/result", + "doc": "The result attribute defines the assigned name for this filter primitive. If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same <filter> element. If no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute.\n

You can use this attribute with the following SVG elements:\n

" + }, + "scale": { + "url": "$MDN_URL$/web/svg/reference/attribute/scale", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The scale attribute defines the displacement scale factor to be used on a <feDisplacementMap> filter primitive. The amount is expressed in the coordinate system established by the primitiveUnits attribute on the <filter> element.\n

You can use this attribute with the following SVG elements:\n

" + }, + "seed": { + "url": "$MDN_URL$/web/svg/reference/attribute/seed", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The seed attribute represents the starting number for the pseudo random number generator of the <feTurbulence> filter primitive.\n

You can use this attribute with the following SVG elements:\n

" + }, "shape-rendering": { "url": "$MDN_URL$/web/svg/reference/attribute/shape-rendering", "status": [ @@ -922,6 +1650,154 @@ }, "doc": "The shape-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles.\n
\n

Note:\nAs a presentation attribute, shape-rendering also has a CSS property counterpart: shape-rendering. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "side": { + "url": "$MDN_URL$/web/svg/reference/attribute/side", + "status": [ + "Experimental", + "StandardTrack" + ], + "compatibility": { + "Firefox": "61", + "FirefoxAndroid": "61" + }, + "baseline": { + "level": "NONE" + }, + "doc": "

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

\n

The side attribute determines the side of a path the text is placed on (relative to the path direction).\n

You can use this attribute with the following SVG elements:\n

" + }, + "slope": { + "url": "$MDN_URL$/web/svg/reference/attribute/slope", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The slope attribute defines the values for linear filters, such as brightness.\n

The slope attribute is supported by children of the <feComponentTransfer> filter primitive, including the feFunc-RGBA transfer functions. When the type of a transfer function is linear, the slope defines the slope of the linear function.\n

You can use this attribute with the following SVG component transfer function elements when type=\"linear\" is set:\n

\n
\n

Note:\nOriginally, the slope attribute was used within <font-face> to indicate the vertical stroke angle of a font. This use case has been deprecated.\n

" + }, + "spacing": { + "url": "$MDN_URL$/web/svg/reference/attribute/spacing", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "1", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "20", + "FirefoxAndroid": "20", + "Opera": "15", + "Safari": "3.1", + "SafariIOS": "2" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The spacing attribute indicates how the user agent should determine the spacing between typographic characters that are to be rendered along a path.\n

You can use this attribute with the following SVG elements:\n

" + }, + "specularconstant": { + "url": "$MDN_URL$/web/svg/reference/attribute/specularconstant", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The specularConstant attribute controls the ratio of reflection of the specular lighting. It represents the ks value in the Phong lighting model. The bigger the value the stronger the reflection.\n

You can use this attribute with the following SVG elements:\n

" + }, + "specularexponent": { + "url": "$MDN_URL$/web/svg/reference/attribute/specularexponent", + "doc": "The specularExponent attribute controls the focus for the light source. The bigger the value the brighter the light.\n

You can use this attribute with the following SVG elements:\n

" + }, + "startoffset": { + "url": "$MDN_URL$/web/svg/reference/attribute/startoffset", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "1", + "ChromeAndroid": "18", + "Edge": "12", + "Firefox": "20", + "FirefoxAndroid": "20", + "Opera": "15", + "Safari": "3.1", + "SafariIOS": "2" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2015-07-29", + "highDate": "2018-01-29" + }, + "doc": "The startOffset attribute defines an offset from the start of the path for the initial current text position along the path after converting the path to the <textPath> element's coordinate system.\n

You can use this attribute with the following SVG elements:\n

" + }, + "stddeviation": { + "url": "$MDN_URL$/web/svg/reference/attribute/stddeviation", + "status": [ + "StandardTrack" + ], + "compatibility": { + "support_of_stdDeviation": { + "Chrome": "5", + "ChromeAndroid": "", + "Edge": "18", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "9", + "Safari": "6", + "SafariIOS": "6" + } + }, + "doc": "The stdDeviation attribute defines the standard deviation for the blur operation.\n

You can use this attribute with the following SVG elements:\n

" + }, + "stitchtiles": { + "url": "$MDN_URL$/web/svg/reference/attribute/stitchtiles", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The stitchTiles attribute defines how the Perlin Noise tiles behave at the border.\n

You can use this attribute with the following SVG elements:\n

" + }, "stop-color": { "url": "$MDN_URL$/web/svg/reference/attribute/stop-color", "status": [ @@ -1164,9 +2040,9 @@ }, "doc": "The style attribute allows to style an element using CSS declarations. It functions identically to the style attribute in HTML.\n

You can use this attribute with any SVG element." }, - "systemlanguage": { - "url": "$MDN_URL$/web/svg/reference/attribute/systemlanguage", - "doc": "The systemLanguage attribute represents a list of supported language tags. This list is matched against the language defined in the user preferences.\n

You can use this attribute with the following SVG elements:\n

" + "surfacescale": { + "url": "$MDN_URL$/web/svg/reference/attribute/surfacescale", + "doc": "The surfaceScale attribute represents the height of the surface for a light filter primitive.\n

You can use this attribute with the following SVG elements:\n

" }, "tabindex": { "url": "$MDN_URL$/web/svg/reference/attribute/tabindex", @@ -1190,6 +2066,54 @@ }, "doc": "The tabindex 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.\n

You can use this attribute with any SVG element." }, + "tablevalues": { + "url": "$MDN_URL$/web/svg/reference/attribute/tablevalues", + "doc": "The tableValues attribute defines a list of numbers defining a lookup table of values for a color component transfer function.\n

You can use this attribute with the following SVG elements:\n

" + }, + "targetx": { + "url": "$MDN_URL$/web/svg/reference/attribute/targetx", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "6", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The targetX attribute determines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image. The leftmost column of the matrix is column number zero. The value must be such that: 0 <= targetX < x of order.\n

You can use this attribute with the following SVG elements:\n

" + }, + "targety": { + "url": "$MDN_URL$/web/svg/reference/attribute/targety", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "6", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The targetY attribute determines the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image. The topmost row of the matrix is row number zero. The value must be such that: 0 <= targetY < y of order.\n

You can use this attribute with the following SVG elements:\n

" + }, "text-anchor": { "url": "$MDN_URL$/web/svg/reference/attribute/text-anchor", "status": [ @@ -1278,6 +2202,10 @@ }, "doc": "The text-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering text.\n
\n

Note:\nAs a presentation attribute, text-rendering also has a CSS property counterpart: text-rendering. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" }, + "to": { + "url": "$MDN_URL$/web/svg/reference/attribute/to", + "doc": "The to attribute indicates the final value of the attribute that will be modified during the animation.\n

The value of the attribute will change between the from attribute value and this value.\n

You can use this attribute with the following SVG elements:\n

" + }, "transform": { "url": "$MDN_URL$/web/svg/reference/attribute/transform", "status": [ @@ -1318,6 +2246,10 @@ }, "doc": "The transform-origin SVG attribute sets the origin for an item's transformations.\n

You can use this attribute with any SVG element.\n

\n

Note:\nAs a presentation attribute, transform-origin also has a CSS property counterpart: transform-origin. When both are specified, the CSS property takes priority.\n

" }, + "type": { + "url": "$MDN_URL$/web/svg/reference/attribute/type", + "doc": "The type attribute is a generic attribute and it has different meaning based on the context in which it's used.\n\n

You can use this attribute with the following SVG elements:\n

" + }, "unicode-bidi": { "url": "$MDN_URL$/web/svg/reference/attribute/unicode-bidi", "status": [ @@ -1340,6 +2272,10 @@ }, "doc": "The unicode-bidi attribute specifies how the accumulation of the background image is managed.\n
\n

Note:\nAs a presentation attribute, unicode-bidi also has a CSS property counterpart: unicode-bidi. When both are specified, the CSS property takes priority.\n

" }, + "values": { + "url": "$MDN_URL$/web/svg/reference/attribute/values", + "doc": "The values attribute has different meanings, depending upon the context where it's used, either it defines a sequence of values used over the course of an animation, or it's a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be performed.\n

You can use this attribute with the following SVG elements:\n

" + }, "vector-effect": { "url": "$MDN_URL$/web/svg/reference/attribute/vector-effect", "status": [ @@ -1449,6 +2385,62 @@ "highDate": "2019-09-27" }, "doc": "The writing-mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. The writing-mode attribute applies only to <text> elements; the attribute is ignored for <tspan> and <textPath> sub-elements. (Note that the inline-progression-direction can change within a <text> element due to the Unicode bidirectional algorithm and properties direction and unicode-bidi.)\n
\n

Note:\nAs a presentation attribute, writing-mode also has a CSS property counterpart: writing-mode. When both are specified, the CSS property takes priority.\n

\n

You can use this attribute with the following SVG elements:\n

" + }, + "x": { + "url": "$MDN_URL$/web/svg/reference/attribute/x", + "doc": "The x attribute defines an x-axis coordinate in the user coordinate system." + }, + "xchannelselector": { + "url": "$MDN_URL$/web/svg/reference/attribute/xchannelselector", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The xChannelSelector attribute indicates which color channel from in2 to use to displace the pixels in in along the x-axis." + }, + "y": { + "url": "$MDN_URL$/web/svg/reference/attribute/y", + "doc": "The y attribute defines a y-axis coordinate in the user coordinate system." + }, + "ychannelselector": { + "url": "$MDN_URL$/web/svg/reference/attribute/ychannelselector", + "status": [ + "StandardTrack" + ], + "compatibility": { + "Chrome": "5", + "ChromeAndroid": "18", + "Edge": "79", + "Firefox": "3", + "FirefoxAndroid": "4", + "Opera": "15", + "Safari": "6", + "SafariIOS": "6" + }, + "baseline": { + "level": "HIGH", + "lowDate": "2020-01-15", + "highDate": "2022-07-15" + }, + "doc": "The yChannelSelector attribute indicates which color channel from in2 to use to displace the pixels in in along the y-axis." + }, + "z": { + "url": "$MDN_URL$/web/svg/reference/attribute/z", + "doc": "The z attribute defines the location along the z-axis for a light source in the coordinate system established by the primitiveUnits attribute on the <filter> element, assuming that, in the initial coordinate system, the positive z-axis comes out towards the person viewing the content and assuming that one unit along the z-axis equals one unit in x and y." } }, "tags": {