recursal/MDN huggingface dataset:
points
======

The **`points`** attribute defines a list of points. Each point is defined by a pair of number representing a X and a Y coordinate in the user coordinate system. If the attribute contains an odd number of coordinates, the last one will be ignored.

You can use this attribute with the following SVG elements:

* `<polyline>`
* `<polygon>`
Example
-------
```

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



```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline is an open shape -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />

  <!-- polygon is a closed shape -->
  <polygon
 stroke="black"
 fill="none"
 transform="translate(100,0)"
 points="50,0 21,90 98,35 2,35 79,90" />

  <!--
 It is usually considered best practices to separate a X and Y
 coordinate with a comma and a group of coordinates by a space.
 It makes things more readable for human beings.
 -->
</svg>
```

polyline
--------

For `<polyline>`, `points` defines a list of points, each representing a vertex of the line to be drawn. Each point is define by a X and Y coordinate in the user coordinate system.

**Note:** A polyline is an open shape, meaning the last point is not connected to the first point.


|  |  |
| --- | --- |
| Value | [ `<number>`+ ]# |
| Default value | *none* |
| Animatable | Yes |
```

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



```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polyline is an open shape -->
  <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```

polygon
-------

For `<polygon>`, `points` defines a list of points, each representing a vertex of the shape to be drawn. Each point is define by a X and Y coordinate in the user coordinate system.

**Note:** A polygon is a closed shape, meaning the last point is connected to the first point.


|  |  |
| --- | --- |
| Value | [ `<number>`+ ]# |
| Default value | *none* |
| Animatable | Yes |
```

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



```html
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- polygon is an closed shape -->
  <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" />
</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PolygonElementPointsAttribute |
| Scalable Vector Graphics (SVG) 2 # PolylineElementPointsAttribute |
color-interpolation-filters
===========================

The **`color-interpolation-filters`** attribute specifies the color space for imaging operations performed via filter effects.

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

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

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

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

You can use this attribute with the following SVG elements:

* `<feSpotLight>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `auto` | `sRGB` | `linearRGB` |
| Default value | `linearRGB` |
| Animatable | discrete |

`auto`

Indicates that the user agent can choose either the `sRGB` or `linearRGB` spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.

`sRGB`

Indicates that color interpolation should occur in the sRGB color space.

`linearRGB`

Indicates that color interpolation should occur in the linearized RGB color space as described in the sRGB specification.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # ColorInterpolationFiltersProperty |

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

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

See also
--------

* sRGB specification
* `color-interpolation`
from
====

The **`from`** attribute indicates the initial value of the attribute that will be modified during the animation.

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

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" height="100">
    <animate attributeName="width" fill="freeze" from="100" to="150" dur="3s" />
  </rect>
</svg>
```

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

|  |  |
| --- | --- |
| Value | *See below* |
| Default value | *None* |
| Animatable | No |

The exact value type for this attribute depends on the value of the attribute that will be animated.

When a list of values is defined via the `values` attribute, the `from` attribute is ignored.

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

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

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

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

The **`attributeName`** attribute indicates the name of the CSS property or attribute of the target element that is going to be changed during an animation.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="5s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

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

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

`<name>`

This value indicates the name of the CSS property or attribute of the target element to be animated.

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

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

See also
--------

* SMIL Animation specification
baseline-shift
==============

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.

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

**Note:** This property is going to be deprecated and authors are advised to use `vertical-align` instead.

You can use this attribute with the following SVG elements:

* `<textPath>`
* `<tref>`
* `<tspan>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<length-percentage>` | `sub` |
 `super` |
| Default value | `0` |
| Animatable | Yes |

`sub`

The dominant-baseline is shifted to the default position for subscripts.

`super`

The dominant-baseline is shifted to the default position for superscripts.

`<length-percentage>`

A length value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified length.

A percentage value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified percentage of the `line-height`.

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

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # baseline-shift-property |
| Scalable Vector Graphics (SVG) 2 # BaselineShiftProperty |

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

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

The **`cx`** attribute define the x-axis coordinate of a center point.

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<radialGradient>`
Example
-------
```

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



```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <radialGradient cx="25%" id="myGradient">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="45" />
  <ellipse cx="150" cy="50" rx="45" ry="25" />
  <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" />
</svg>
```

circle
------

For `<circle>`, `cx` defines the x-axis coordinate of the center of the shape.

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
| Default value | `0` |
| Animatable | Yes |

**Note:** Starting with SVG2 `cx`, is a *Geometry Property*, meaning this attribute can also be used as CSS property for circles.

ellipse
-------

For `<ellipse>`, `cx` defines the x-axis coordinate of the center of the shape.

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
| Default value | `0` |
| Animatable | Yes |

**Note:** Starting with SVG2 `cx`, is a *Geometry Property*, meaning this attribute can also be used as CSS property for ellipses.

radialGradient
--------------

For `<radialGradient>`, `cx` defines the x-axis coordinate of the end circle for the radial gradient.

|  |  |
| --- | --- |
| Value | `<length-percentage>` |
| Default value | `50%` |
| Animatable | Yes |

### Example
```

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



```html
<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="0" id="myGradient000">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="50%" id="myGradient050">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>

    <radialGradient cx="100%" id="myGradient100">
      <stop offset="0%" stop-color="gold" />
      <stop offset="50%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect
 x="1"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient000)"
 stroke="black" />
  <rect
 x="13"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient050)"
 stroke="black" />
  <rect
 x="25"
 y="1"
 width="8"
 height="8"
 fill="url(#myGradient100)"
 stroke="black" />
</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # CX |
| Scalable Vector Graphics (SVG) 2 # RadialGradientElementCXAttribute |

See also
--------

* `cy`
* `r`
keyTimes
========

The **`keyTimes`** attribute represents a list of time values used to control the pacing of the animation.

Each time in the list corresponds to a value in the `values` attribute list, and defines when the value is used in the animation. Each time value in the `keyTimes` list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the duration of the animation element.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 dur="4s"
 repeatCount="indefinite"
 values="60; 110; 60; 10; 60"
 keyTimes="0; 0.25; 0.5; 0.75; 1" />
    <animate
 attributeName="cy"
 dur="4s"
 repeatCount="indefinite"
 values="10; 60; 110; 60; 10"
 keyTimes="0; 0.25; 0.5; 0.75; 1" />
  </circle>
</svg>
```

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

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

The value of the `keyTimes` attribute is a semicolon-separated list of values.

There must be exactly as many values in the `keyTimes` list as in the `values` list.

Each successive time value must be greater than or equal to the preceding time value.

The `keyTimes` list semantics depends upon the interpolation mode:

* For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be `1`. The key time associated with each value defines when the value is set; values are interpolated between the key times.
* For discrete animation, the first time value in the list must be `0`. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in the list.

If the `calcMode` attribute is set to `paced`, the `keyTimes` attribute is ignored.

If the duration of the animation is indefinite, any `keyTimes` specification will be ignored.

* Safari issue: `keyTimes` values should be separated with semicolon without space before, f.e: `keyTimes="0; 0.25; 0.5; 0.75; 1"`
Specifications
--------------

| Specification |
| --- |
| SVG Animations Level 2 # KeyTimesAttribute |
onclick
=======

The **`onclick`** attribute specifies some script to run when the element is clicked.

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<circle>`
* `<defs>`
* `<desc>`
* `<ellipse>`
* `<foreignObject>`
* `<g>`
* `<image>`
* `<line>`
* `<linearGradient>`
* `<marker>`
* `<metadata>`
* `<mpath>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<radialGradient>`
* `<rect>`
* `<script>`
* `<set>`
* `<stop>`
* `<style>`
* `<svg>`
* `<switch>`
* `<symbol>`
* `<text>`
* `<textPath>`
* `<title>`
* `<tref>`
* `<tspan>`
* `<use>`
* `<view>`
Example
-------
```

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



```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle
 cx="100"
 cy="100"
 r="100"
 onclick="alert('You have clicked the circle.')" />
</svg>
```

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

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

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

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

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

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

The **`tableValues`** attribute defines a list of numbers defining a lookup table of values for a color component transfer function.

You can use this attribute with the following SVG elements:

* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
Example
-------
```

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient
 id="gradient"
 gradientUnits="userSpaceOnUse"
 x1="0"
 y1="0"
 x2="200"
 y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset="0.5" stop-color="#00ff00" />
      <stop offset="1" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  <filter id="componentTransfer1" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0 1" />
      <feFuncG type="table" tableValues="0 1" />
      <feFuncB type="table" tableValues="0 1" />
    </feComponentTransfer>
  </filter>
  <filter id="componentTransfer2" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="1 0" />
      <feFuncG type="table" tableValues="1 0" />
      <feFuncB type="table" tableValues="1 0" />
    </feComponentTransfer>
  </filter>

  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 fill="url(#gradient)"
 style="filter: url(#componentTransfer1);" />
  <rect
 x="0"
 y="0"
 width="200"
 height="200"
 fill="url(#gradient)"
 style="filter: url(#componentTransfer2); transform: translateX(220px);" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<list-of-numbers>` |
| Default value | *Empty list resulting in identity transfer* |
| Animatable | Yes |

`<list-of-numbers>`

This value holds a comma- and/or space-separated list of `<number>`s, which define a lookup table for the color component transfer function. Each number can be between `0` and `1`.

An empty list results in an identity transfer function.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-tablevalues |
maskUnits
=========

The **`maskUnits`** attribute indicates which coordinate system to use for the geometry properties of the `<mask>` element.

You can use this attribute with the following SVG elements:

* `<mask>`
Example
-------
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <mask
 id="myMask1"
 maskUnits="userSpaceOnUse"
 x="20%"
 y="20%"
 width="60%"
 height="60%">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" r="35" />
  </mask>

  <mask
 id="myMask2"
 maskUnits="objectBoundingBox"
 x="20%"
 y="20%"
 width="60%"
 height="60%">
    <rect fill="black" x="0" y="0" width="100%" height="100%" />
    <circle fill="white" cx="50" cy="50" r="35" />
  </mask>

  <!-- Some reference rect to materialized the mask -->
  <rect id="r1" x="0" y="0" width="45" height="45" />
  <rect id="r2" x="0" y="55" width="45" height="45" />
  <rect id="r3" x="55" y="55" width="45" height="45" />
  <rect id="r4" x="55" y="0" width="45" height="45" />

  <!-- The first 3 rect are masked with useSpaceOnUse units -->
  <use mask="url(#myMask1)" href="#r1" fill="red" />
  <use mask="url(#myMask1)" href="#r2" fill="red" />
  <use mask="url(#myMask1)" href="#r3" fill="red" />

  <!-- The last rect is masked with objectBoundingBox units -->
  <use mask="url(#myMask2)" href="#r4" fill="red" />
</svg>
```

mask
----

For `<mask>`, `maskUnits` defines the coordinate system in use for the geometry attributes (`x`, `y`, `width` and `height`) of the element.

|  |  |
| --- | --- |
| Value | `userSpaceOnUse` | `objectBoundingBox` |
| Default value | `objectBoundingBox` |
| Animatable | Yes |

`userSpaceOnUse`

This value indicates that all coordinates for the geometry attributes refer to the user coordinate system as defined when the mask was created.

`objectBoundingBox`

This value indicates that all coordinates for the geometry attributes represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the `<mask>` were bound to a "`0 0 1 1`" `viewBox`.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # element-attrdef-mask-maskunits |

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

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

The **`xChannelSelector`** attribute indicates which color channel from `in2` to use to displace the pixels in `in` along the x-axis.

You can use this attribute with the following SVG elements:

* `<feDisplacementMap>`
Example
-------
```

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



```html
<svg viewBox="0 0 440 160" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feImage
 href="mdn.svg"
 x="0"
 y="0"
 width="100%"
 height="100%"
 result="abc" />
    <feDisplacementMap
 in2="abc"
 in="SourceGraphic"
 scale="30"
 xChannelSelector="R" />
  </filter>
  <filter id="displacementFilter2">
    <feImage
 href="mdn.svg"
 x="0"
 y="0"
 width="100%"
 height="100%"
 result="abc" />
    <feDisplacementMap
 in2="abc"
 in="SourceGraphic"
 scale="30"
 xChannelSelector="B" />
  </filter>

  <text x="10" y="60" font-size="50" filter="url(#displacementFilter)">
    Some displaced text
  </text>
  <text x="10" y="120" font-size="50" filter="url(#displacementFilter2)">
    Some displaced text
  </text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `R` | `G` | `B` | `A` |
| Default value | `A` |
| Animatable | Yes |

`R`

This keyword specifies that the red color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the x-axis.

`G`

This keyword specifies that the green color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the x-axis.

`B`

This keyword specifies that the blue color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the x-axis.

`A`

This keyword specifies that the alpha channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the x-axis.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-xchannelselector |

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

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

**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 **`stemv`** attribute indicates the vertical stem width of the font.

The vertical stem width is the width of vertical (or near-vertical) stems of glyphs. This information is often tied to hinting, and may not be directly accessible in some font formats. The measurement is meant for the dominant vertical stem in the font because there might be different groupings of vertical stems (e.g., one main one, and one lighter weight one as for an uppercase "M" or "N").

If this attribute is used, the `units-per-em` must also be used.

You can use this attribute with the following SVG elements:

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

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

`<number>`

This value indicates the vertical stem width of the font.

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

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

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

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

See also
--------

* `stemh`