recursal/MDN huggingface dataset:
vert-adv-y
==========

**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 **`vert-adv-y`** attribute indicates the vertical advance after rendering a glyph in vertical orientation.

You can use this attribute with the following SVG elements:

* `<font>`
* `<glyph>`
* `<missing-glyph>`
font
----

For `<font>` elements, `vert-adv-y` specifies the default vertical advance for a glyph in vertical orientation.

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *1 em as of `units-per-em`* |
| Animatable | No |

`<number>`

This value indicates the default vertical advance of the glyph in vertical direction

glyph, missing-glyph
--------------------

For `<glyph>` and `<missing-glyph>` elements, `vert-adv-y` specifies the vertical advance for a glyph in vertical orientation.

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *`<font>`'s `vert-adv-y` value* |
| Animatable | No |

`<number>`

This value indicates the vertical advance of the glyph in vertical direction

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

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

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

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

See also
--------

* `horiz-adv-x`
* `units-per-em`
stroke-dasharray
================

The **`stroke-dasharray`** attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;

**Note:** As a presentation attribute, `stroke-dasharray` 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="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
 line {
 stroke: black;
 }
 </style>
  <!-- No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- Dashes and gaps of various sizes with an even number of values -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- Dashes starting with a gap -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `none` | `<dasharray>` |
| Default value | `none` |
| Animatable | Yes |

<dasharray>

A list of comma and/or white space separated `<length>`s and `<percentage>`s that specify the lengths of alternating dashes and gaps.

If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, `5,3,2` is equivalent to `5,3,2,5,3,2`.

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

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

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

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

The **`repeatCount`** attribute indicates the number of times an animation will take place.

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 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="5" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

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

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

`<number>`

This value specifies the number of iterations. It can include partial iterations expressed as fraction values. A fractional value describes a portion of the simple duration. Values must be greater than `0`.

`indefinite`

This value indicates that the animation will be repeated indefinitely (i.e. until the document ends).

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

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

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

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

**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 **`v-mathematical`** attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for vertically oriented glyph layouts. The value is an offset in the font coordinate system relative to the glyph-specific `vert-origin-x` attribute.

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 alignment coordinate for the glyphs.

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

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

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

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

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.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="diffuseLighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <fePointLight x="60" y="60" z="10" />
    </feDiffuseLighting>
  </filter>
  <filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <fePointLight x="60" y="60" z="50" />
    </feDiffuseLighting>
  </filter>

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

fePointLight
------------

For `<fePointLight>`, `z` defines the location along the z-axis for the light source in the coordinate system established by the `primitiveUnits` attribute on the `<filter>` element.

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

feSpotLight
-----------

For `<feSpotLight>`, `z` defines the location along the z-axis for the light source in the coordinate system established by the `primitiveUnits` attribute on the `<filter>` element.

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-z |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-z |
repeatDur
=========

The **`repeatDur`** attribute specifies the total duration for repeating 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 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatDur="5s" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="0"
 to="50"
 dur="1s"
 repeatDur="indefinite" />
  </rect>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<clock-value>`
 | `indefinite` |
| Default values | *None* |
| Animatable | No |

`<clock-value>`

This value specifies the duration in presentation time to repeat the animation.

`indefinite`

This value indicates that the animation will be repeated indefinitely (i.e. until the document ends).

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

| Specification |
| --- |
| SVG Animations Level 2 # RepeatDurAttribute |
filter
======

The **`filter`** attribute specifies the filter effects defined by the `<filter>` element that shall be applied to its element.

**Note:** As a presentation attribute, `filter` can be used as a CSS property. See `CSS filter` for further information.

As a presentation attribute, it can be applied to any element but it only has effect on container elements without the `<defs>` element, all graphics elements and the `<use>` element.

Example
-------
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>

  <rect x="10" y="10" width="80" height="80" filter="url(#blur)" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `none`
|
`<filter-function-list>` |
| Default value | `none` |
| Animatable | Yes |

For a description of the values see the `CSS filter` property.

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

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

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

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

See also
--------

* `<filter>`
* `CSS filter`
strikethrough-thickness
=======================

The `strikethrough-thickness` attribute represents the ideal thickness of the strikethrough. The strikethrough thickness is expressed in the font's coordinate system.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Categories | *None* |
| Value | <number> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |
underline-thickness
===================

The `underline-thickness` attribute represents the ideal thickness of the underline. The underline thickness is expressed in the font's coordinate system.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Categories | *None* |
| Value | <number> |
| Animatable | No |
| Normative document | SVG 1.1 (2nd Edition) |
attributeType
=============

**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 **`attributeType`** attribute specifies the namespace in which the target attribute and its associated values are defined.

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 | `CSS` | `XML` | `auto` |
| Default value | `auto` |
| Animatable | No |

`CSS`

This value specifies that the value of `attributeName` is the name of a CSS property defined as animatable.

`XML`

This value specifies that the value of `attributeName` is the name of an XML attribute defined as animatable in the default XML namespace for the target element.

`auto`

This value specifies that the implementation should match the `attributeName` to an attribute for the target element. User agents first search through the list of CSS properties for a matching property name, and if none is found, search the default XML namespace for the element.

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

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

See also
--------

* SMIL Animation specification
startOffset
===========

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.

You can use this attribute with the following SVG elements:

* `<textPath>`
Example
-------
```

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



```html
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <path
 id="path1"
 fill="none"
 stroke="red"
 d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
  <path
 id="path2"
 fill="none"
 stroke="red"
 d="M130,90 Q210,90 210,45 Q210,10 170,10 Q130,10 130,40 Q130,70 165,70 Q190,70 195,50" />

  <text>
    <textPath href="#path1" startOffset="0">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>

  <text>
    <textPath href="#path2" startOffset="40">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>
```

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

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

`<length-percentage>`

A length represents a distance along the path measured in the current user coordinate system for the `<textPath>` element.

If a percentage is given, then the start offset represents a percentage distance along the entire path. Thus, `0%` indicates the start point of the path and `100%` indicates the end point of the path.

`<number>`

This value indicates a distance along the path measured in the current user coordinate system for the `<textPath>` element.


**Note:** Negative values and values larger than the path length (e.g. `150%`) are allowed.

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

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

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

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

SVG Attribute reference home

The `cursor` attribute specifies the mouse cursor displayed when the mouse pointer is over an element.

This attribute behaves exactly like the `CSS cursor` property except that if the browser supports the `<cursor>` element, you should be able to use it with the <funciri> notation.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see `CSS cursor` for further information.

Usage context
-------------

|  |  |
| --- | --- |
| Categories | Presentation attribute |
| Value | 
 [[<funciri>,]\* [ **auto** | crosshair | default | pointer | move |
 e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
 s-resize | w-resize| text | wait | help ]] | inherit
  |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |

Elements
--------

The following elements can use the `cursor` attribute

* Container elements
* Graphics elements
Browser compatibility
---------------------

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

See also
--------

* `CSS cursor`
by
==

The **`by`** attribute specifies a relative offset value for an attribute that will be modified during an animation.

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.

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" width="100" height="100">
    <animate attributeName="width" fill="freeze" by="50" dur="3s" />
  </rect>
</svg>
```

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

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

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

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

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

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

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

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

**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 **`unicode`** attribute specifies one or more Unicode characters indicating the sequence of Unicode characters which corresponds to a glyph.

If a character is provided, then this glyph corresponds to the given Unicode character. If multiple characters are provided, then this glyph corresponds to the given sequence of Unicode characters. One use of a sequence of characters is ligatures. For example, if `unicode="ffl"`, then the given glyph will be used to render the sequence of characters "f", "f", and "l".

It is often useful to refer to characters using XML character references expressed in hexadecimal notation or decimal notation. For example, `unicode="ffl"` could be expressed as XML character references in hexadecimal notation as `unicode="&#x66;&#x66;&#x6c;"` or in decimal notation as `unicode="&#102;&#102;&#108;"`.

The `unicode` attribute contributes to the process for deciding which glyph(s) are used to represent which character(s).

You can use this attribute with the following SVG elements:

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

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

`<string>`

This value specifies one or more Unicode characters corresponding to a glyph.

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

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

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

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

The **`fr`** attribute defines the radius of the focal point for the radial gradient.

You can use this attribute with the following SVG elements:

* `<radialGradient>`
Examples
--------
```

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

### Changing the value of `fr`

The following example presents two circles: the first one has `fr` set to `5%` while the other circle has `fr` set to `25%`.


```html
<svg
 viewBox="0 0 480 200"
 width="420"
 height="160"
 xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="gradient1"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="darkseagreen" />
    </radialGradient>
    <radialGradient
 id="gradient2"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="25%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="darkseagreen" />
    </radialGradient>
  </defs>

  <circle cx="100" cy="100" r="100" fill="url(#gradient1)" />
  <circle
 cx="100"
 cy="100"
 r="100"
 fill="url(#gradient2)"
 style="transform: translateX(240px);" />
</svg>
```

### The focal point's relationship to `(fx, fy)`

This example has `fr` equal to `5%` and is representing how the attributes `fx` and `fy` (the points labeled as such in the SVG) act as the origin for the focal point of the radial gradient. This focal point is a circle whose radius (the value of `fr`) defines when the first color stop, in this case the color red, should start transitioning into the other color stop, which in this case is the color blue.


```html
<svg
 viewBox="0 0 120 120"
 width="165"
 height="165"
 xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="Gradient"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
 x="10"
 y="10"
 rx="15"
 ry="15"
 width="100"
 height="100"
 fill="url(#Gradient)"
 stroke="black"
 stroke-width="2" />

  <circle
 cx="60"
 cy="60"
 r="50"
 fill="transparent"
 stroke="white"
 stroke-width="2" />
  <circle cx="45" cy="45" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<length>` |
| Default value | `0` |
| Animatable | None |

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

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

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

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