recursal/MDN huggingface dataset:
data-\*
=======

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.

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

* Can't start with `xml`.
* No semicolons (`;`, `U+003A`).
* No capital `A` to `Z` letters.

**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.

You can use this attribute with any SVG element.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # DataAttributes |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `SVGElement`
* The `HTMLElement.dataset` property used to access these attributes from scripts.
* Using data attributes
pointsAtX
=========

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.

You can use this attribute with the following SVG elements:

* `<feSpotLight>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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="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 |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-pointsatx |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
stroke-dashoffset
=================

The **`stroke-dashoffset`** attribute is a presentation attribute defining an offset on the rendering of the associated dash array.

**Note:** As a presentation attribute `stroke-dashoffset` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<path>`
* `<line>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="3" />

  <!--
 The start of the dash array computation
 is pushed by 3 user units
 -->
  <line
 x1="0"
 y1="7"
 x2="30"
 y2="7"
 stroke="black"
 stroke-dasharray="3 1"
 stroke-dashoffset="-3" />

  <!--
 The start of the 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="rgb(255 0 0 / 50%)" />
</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.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
keyPoints
=========

The **`keyPoints`** attribute indicates the simple duration of an animation.

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<set>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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 href="#motionPath" />
    </animateMotion>
  </circle>
</svg>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` [; `<number>`]\* ;? |
| Default value | *None* |
| Animatable | No |

`<number> [; <number>] ;?`

This value defines a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path the object shall move at the moment in time specified by corresponding `keyTimes` value. The distance is calculated along the path specified by the `path` attribute. Each progress value in the list corresponds to a value in the `keyTimes` attribute list.

If a list of key points is specified, there must be exactly as many values in the `keyPoints` list as in the `keyTimes` list.

If there's a semicolon at the end of the value, optionally followed by white space, both the semicolon and the trailing white space are ignored.

If there are any errors in the value specification (i.e. bad values, too many or too few values), then that's an error.

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # KeyPointsAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
descent
=======

**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.

The **`descent`** attribute defines the maximum unaccented depth of the font.

**Note:** It was specified to share the syntax and semantics of the obsolete `descent` descriptor of the `@font-face` at-rule defined in an early version of CSS 2.

You can use this attribute with the following SVG elements:

* `<font-face>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | Value of `vert-origin-y` |
| Animatable | No |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementDescentAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVG attribute: crossorigin
==========================

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.

This table shows possible keywords and their meaning:

| Keyword | Description |
| --- | --- |
| `anonymous` | Client CORS requests for this element will have the credentials flag set to 'same-origin'. |
| `use-credentials` | Client 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`. |

It follows the same processing rules as the HTML attribute `crossorigin`.

Example
-------


```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image
 href="https://example.com/mdn\_logo\_dark.png"
 height="200"
 width="200"
 crossorigin="use-credentials" />
</svg>
```

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ImageElementCrossoriginAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Cross-Origin Resource Sharing (CORS)
flood-color
===========

The **`flood-color`** attribute indicates what color to use to flood the current filter primitive subregion.

**Note:** As a presentation attribute, `flood-color` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<feFlood>`
* `<feDropShadow>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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 |
| --- |
| Filter Effects Module Level 1 # FloodColorProperty |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `flood-opacity`
accent-height
=============

**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.

The **`accent-height`** attribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system.

You can use this attribute with the following SVG elements:

* `<font-face>`
font-face
---------

For `<font-face>`, `accent-height` defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system.

|  |  |
| --- | --- |
| Value | <number> |
| Default value | Value of `ascent` |
| Animatable | No |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # FontFaceElementAccentHeightAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `cap-height`
* `x-height`
stop-opacity
============

The **`stop-opacity`** attribute defines the opacity of a given color gradient stop.

The opacity value used for the gradient calculation is the product of the value of `stop-opacity` and the opacity of the value of the `stop-color` attribute. For `stop-color` values that don't include explicit opacity information, the opacity is treated as `1`.

**Note:** As a presentation attribute, `stop-opacity` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<stop>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<opacity-value>` |
| Default value | `1` |
| Animatable | Yes |

`<opacity-value>`

This value is either a `<number>` between `0` and `1` or a `<percentage>` value specifying the opacity of the color gradient stop.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # StopOpacityProperty |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `stop-color`
arabic-form
===========

**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.

The **`arabic-form`** attribute indicates which of the four possible forms an Arabic glyph represents.

You can use this attribute with the following SVG elements:

* `<glyph>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `initial` | `medial` | `terminal` |
 `isolated` |
| Default value | `isolated` |
| Animatable | No |

`initial`

This value indicates that the glyph represents the initial form.

`medial`

This value indicates that the glyph represents the medial form.

`terminal`

This value indicates that the glyph represents the terminal form.

`isolated`

This value indicates that the glyph represents the isolated form.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementArabicFormAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Wikipedia page on the Arabic alphabet
divisor
=======

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.

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.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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>

  <image
 href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#convolveMatrix1);" />
  <image
 href="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. If the specified divisor is `0` then the default value will be used instead.

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feconvolvematrix-divisor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
xlink:arcrole
=============

**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.

The **`xlink:arcrole`** attribute specifies a contextual role for the element and corresponds to the RDF Primer notion of a property.

This contextual role can differ from the meaning of the resource when taken outside the context of this particular arc. For example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter."

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<cursor>`
* `<feImage>`
* `<filter>`
* `<font-face-uri>`
* `<glyphRef>`
* `<image>`
* `<linearGradient>`
* `<mpath>`
* `<pattern>`
* `<radialGradient>`
* `<script>`
* `<set>`
* `<textPath>`
* `<tref>`
* `<use>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<iri>` |
| Default value | *None* |
| Animatable | No |

`<iri>`

This value specifies an IRI reference that identifies some resource that describes the intended property.

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # XLinkArcRoleAttribute |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Definition of the `xlink:arcrole` attribute in the XLink specification
baseFrequency
=============

The **`baseFrequency`** attribute represents the base frequency parameter for the noise function of the `<feTurbulence>` filter primitive.

You can use this attribute with the following SVG elements:

* `<feTurbulence>`
Example
-------

### Example 1
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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>
```

### Example 2


```html
<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>
```

Usage notes
-----------

|  |  |
| --- | --- |
| Value | <number-optional-number> |
| Default value | `0` |
| Animatable | Yes |

`<number-optional-number>`

If two numbers are provided, the first one represents the base frequency in the horizontal direction and the second one the base frequency in the vertical direction. If one number is provided, then that value is used for both x and y.

Negative values are forbidden.

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feturbulence-basefrequency |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
image-rendering
===============

The **`image-rendering`** attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.

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

**Note:** As a presentation attribute, `image-rendering` can be used as a CSS property. See the `CSS image-rendering` property for more information.

You can use this attribute with the following SVG elements:

* `<image>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `auto` | `optimizeSpeed` |
 `optimizeQuality` |
| Default value | `auto` |
| Animatable | Yes |

`auto`

Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.

`optimizeSpeed`

Indicates that the user agent shall emphasize rendering speed over quality.

`optimizeQuality`

Indicates that the user agent shall emphasize quality over rendering speed.

Specifications
--------------

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-rendering |
| Scalable Vector Graphics (SVG) 2 # ImageRendering |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `CSS image-rendering`
azimuth
=======

The **`azimuth`** attribute specifies the direction angle for the light source on the XY plane (clockwise), in degrees from the x axis.

You can use this attribute with the following SVG elements:

* `<feDistantLight>`
Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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 value | 0 |
| Animatable | Yes |

Specifications
--------------

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedistantlight-azimuth |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
additive
========

The **`additive`** attribute controls whether or not an animation is additive.

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

You can use this attribute with the following SVG elements:

* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `replace` | `sum` |
| Default value | `replace` |
| Animatable | No |

sum

Specifies that the animation will add to the underlying value of the attribute and other lower priority animations.

replace

Specifies that the animation will override the underlying value of the attribute and other lower priority animations. This is the default, however the behavior is also affected by the animation value attributes `by` and `to`, as described in SMIL Animation: How from, to and by attributes affect additive behavior.

Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # AdditiveAttribute |

See also
--------

* SMIL Animation specification