recursal/MDN huggingface dataset:
xlink:title
===========

**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:title`** attribute is used to describe the meaning of a link or resource in a human-readable fashion.

The use of this information is highly dependent on the type of processing being done. It may be used, for example, to make titles available to applications used by visually impaired users, or to create a table of links, or to present help text that appears when a user lets a mouse pointer hover over a starting resource.

**Note:** New content should use a `<title>` child element rather than a `xlink:title` attribute.

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 context
-------------

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

`<anything>`

This value specifies the title used to describe the meaning of the link or resource.

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

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

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

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

The **`mask`** attribute is a presentation attribute mainly used to bind a given `<mask>` element with the element the attribute belongs to.

**Note:** As a presentation attribute `mask` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<a>`
* `<circle>`
* `<clipPath>`
* `<ellipse>`
* `<g>`
* `<glyph>`
* `<image>`
* `<line>`
* `<marker>`
* `<mask>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<svg>`
* `<symbol>`
* `<text>`
* `<use>`
Example
-------
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="0" y="0" width="100%" height="100%" />
    <polygon
 fill="black"
 points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
  </mask>

  <!--
 Punch a hole in a shape of a star inside the red circle,
 revealing the yellow circle underneath
 -->
  <circle cx="50" cy="50" r="20" fill="yellow" />
  <circle cx="50" cy="50" r="45" fill="red" mask="url(#myMask)" />
</svg>
```


Since SVG2, the `mask` attribute is defined as a CSS property and is a shorthand for many other properties: `mask-image`, `mask-mode`, `mask-repeat`, `mask-position`, `mask-clip`, `mask-origin`, `mask-size`, and `mask-composite`.

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

|  |  |
| --- | --- |
| Value | See the CSS property `mask` |
| Default value | `none` |
| Animatable | Yes |

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask |

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

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

The **`style`** attribute allows to style an element using CSS declarations. It functions identically to the `style` attribute in HTML.

You can use this attribute with any SVG element.

Example
-------
```

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



```html
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
  <rect
 width="80"
 height="40"
 x="10"
 y="10"
 style="fill: skyblue; stroke: cadetblue; stroke-width: 2;" />
</svg>
```

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

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

`<style>`

The syntax of style data depends on the style sheet language. By default, the style sheet language is CSS.

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

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

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

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

See also
--------

* `<style>`
* HTML `style` attribute
stemh
=====

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

The stem width refers to the dominant stem of the font. There may be two or more designed widths. For example, the main vertical stems of Roman characters will differ from the thin stems on serifed "M" and "N", plus there may be different widths for uppercase and lowercase characters in the same font. Also, either by design or by error, all stems may have slightly different widths.

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 horizontal stem width of the font.

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

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

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

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

See also
--------

* `stemv`
widths
======

**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 **`widths`** attribute indicates a list of range values, each followed by one or more glyph widths.

You can use this attribute with the following SVG elements:

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

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

`<number>`

This value is a comma-separated list of UCS range values as defined in ISO 10646, each followed by one or more glyph widths.

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

If the range is omitted, a range of U+0-7FFFFFFF is assumed which covers all characters and their glyphs. If not enough glyph widths are given, the last in the list is replicated to cover that range. If too many widths are provided, the extras are ignored.

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

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

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

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

See also
--------

* ISO 10646
shape-rendering
===============

The **`shape-rendering`** attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles.

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

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<line>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
Example
-------
```

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" shape-rendering="geometricPrecision" />
  <circle cx="320" cy="100" r="100" shape-rendering="crispEdges" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `auto` | `optimizeSpeed` |
 `crispEdges` | `geometricPrecision` |
| Default value | `auto` |
| Animatable | discrete |

`auto`

This value indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.

`optimizeSpeed`

This value indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.

`crispEdges`

This value indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.

`geometricPrecision`

Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.

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

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

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

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

The **`id`** attribute assigns a unique name to an element.

You can use this attribute with any SVG element.

Example
-------


```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">
  <style>
 <![CDATA[
 #smallRect {
 stroke: #000066;
 fill: #00cc00;
 }
 ]]>
 </style>

  <rect id="smallRect" x="10" y="10" width="100" height="100" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | <id> |
| Default value | *None* |
| Animatable | No |

<id>

Specifies the element's ID. The ID must be unique within the node tree, must not be an empty string, and must not contain any whitespace characters.

**Note:** You should avoid the use of `id` values that would be parsed as an SVG view specification (e.g., `MyDrawing.svg#svgView(viewBox(0,200,1000,1000))`) or a basic media fragment when used as a URL target fragment.

It must be valid in XML documents. A stand-alone SVG document uses XML 1.0 syntax, which specifies that valid IDs only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Core.attrib |

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

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

See also
--------

* HTML `id`
* `class`
xml:base
========

**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 **`xml:base`** attribute specifies a base IRI other than the base IRI of the document or external entity.

You can use this attribute with any SVG element.

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

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

`<iri>`

This value specifies the base IRI of the element.

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

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

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

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

See also
--------

* XML Base specification
accumulate
==========

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

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.

You can use this attribute with the following SVG elements:

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

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

`sum`

Specifies that each repeat iteration after the first builds upon the last value of the previous iteration.

`none`

Specifies that repeat iterations are not cumulative.

This attribute is ignored if the target attribute value does not support addition, or if the animation element does not repeat.

This attribute will be ignored if the animation function is specified with only the `to` attribute.

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

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

See also
--------

* SMIL Animation specification
stroke-miterlimit
=================

The **`stroke-miterlimit`** attribute is a presentation attribute defining a limit on the ratio of the miter length to the `stroke-width` used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel.

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

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
  <!-- Impact of the default miter limit -->
  <path
 stroke="black"
 fill="none"
 stroke-linejoin="miter"
 id="p1"
 d="M1,9 l7 ,-3 l7 ,3
 m2,0 l3.5 ,-3 l3.5 ,3
 m2,0 l2 ,-3 l2 ,3
 m2,0 l0.75,-3 l0.75,3
 m2,0 l0.5 ,-3 l0.5 ,3" />

  <!-- Impact of the smallest miter limit (1) -->
  <path
 stroke="black"
 fill="none"
 stroke-linejoin="miter"
 stroke-miterlimit="1"
 id="p2"
 d="M1,19 l7 ,-3 l7 ,3
 m2, 0 l3.5 ,-3 l3.5 ,3
 m2, 0 l2 ,-3 l2 ,3
 m2, 0 l0.75,-3 l0.75,3
 m2, 0 l0.5 ,-3 l0.5 ,3" />

  <!-- Impact of a large miter limit (8) -->
  <path
 stroke="black"
 fill="none"
 stroke-linejoin="miter"
 stroke-miterlimit="8"
 id="p3"
 d="M1,29 l7 ,-3 l7 ,3
 m2, 0 l3.5 ,-3 l3.5 ,3
 m2, 0 l2 ,-3 l2 ,3
 m2, 0 l0.75,-3 l0.75,3
 m2, 0 l0.5 ,-3 l0.5 ,3" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <path
 stroke="pink"
 fill="none"
 stroke-width="0.05"
 d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
 M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
 M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</svg>
```


When two line segments meet at a sharp angle and `miter` joins have been specified for `stroke-linejoin`, it is possible for the miter to extend far beyond the thickness of the line stroking the path. The `stroke-miterlimit` ratio is used to define when the limit is exceeded, if so the join is converted from a miter to a bevel.

The ratio of miter length (distance between the outer tip and the inner corner of the miter) to `stroke-width` is directly related to the angle (theta) between the segments in user space by the formula:


stroke-miterlimit
=

miterLength

stroke-width

=

1

sin

(

θ

2

)



For example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.

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

|  |  |
| --- | --- |
| Value | **<number>** |
| Default value | 4 |
| Animatable | Yes |

The value of `stroke-miterlimit` must be greater than or equal to 1.

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

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

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

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

The **`fx`** attribute defines the x-axis coordinate of the focal point for a radial gradient.

You can use this attribute with the following SVG elements:

* `<radialGradient>`
Example
-------
```

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



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

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

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

|  |  |
| --- | --- |
| Value | `<length>` |
| Default value | 
 Coincides with the presentational value of `cx` for
 the element whether the value for `cx` was inherited or not.
  |
| Animatable | None |

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
glyph-orientation-vertical
==========================

**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 **`glyph-orientation-vertical`** attribute affects the amount that the current text position advances as each glyph is rendered.

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.

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

**Note:** As a presentation attribute, `glyph-orientation-vertical` can be used as a CSS property.

You can use this attribute with the following SVG elements:

* `<textPath>`
* `<text>`
* `<tref>`
* `<tspan>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `auto` |
 `<angle>` |
| Default value | `auto` |
| Animatable | No |

`auto`

Fullwidth ideographic and fullwidth Latin text will be set with a glyph orientation of 0 degrees. Ideographic punctuation and other ideographic characters having alternate horizontal and vertical forms will use the vertical form of the glyph. Text which is not fullwidth will be set with a glyph orientation of 90 degrees.

This reorientation rule applies only to the first-level non-ideographic text. All further embedding of writing modes or bidirectional processing will be based on the first-level rotation.

**Note:** Text set in this "rotated" manner may contain ligatures or other glyph combining and reordering common to the language and script. (This presentation form does not disable auto-ligature formation or similar context-driven variations.)

The determination of which characters should be auto-rotated may vary across user agents. The determination is based on a complex interaction between country, language, script, character properties, font, and character context.

`<angle>`

 The value of the angle is restricted to 0, 90, 180, and 270 degrees. If another angle is specified, it is rounded to the closest of the permitted values.
 A value of `0deg` indicates that all glyphs are set with the top of the glyphs oriented towards the reference orientation. A value of `90deg` indicates an orientation of 90 degrees clockwise from the reference orientation.


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

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

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

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

The **`radius`** attribute represents the radius (or radii) for the operation on a given `<feMorphology>` filter primitive.

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.

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

You can use this attribute with the following SVG elements:

* `<feMorphology>`
Usage notes
-----------

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-femorphology-radius |

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

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

The **`k2`** attribute defines one of the values to be used within the `arithmetic` operation of the `<feComposite>` filter primitive.

The pixel composition is computed using the following formula:


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


You can use this attribute with the following SVG elements:

* `<feComposite>`
Example
-------
```

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="composite1" x="0" y="0" width="100%" height="100%">
    <feComposite
 in2="SourceGraphic"
 operator="arithmetic"
 k1="1"
 k2="1"
 k3="0"
 k4="0" />
  </filter>
  <filter id="composite2" x="0" y="0" width="100%" height="100%">
    <feComposite
 in2="SourceGraphic"
 operator="arithmetic"
 k1="1"
 k2="10"
 k3="0"
 k4="0" />
  </filter>

  <image
 href="mdn.svg"
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#composite1);" />
  <image
 href="mdn.svg"
 x="0"
 y="0"
 width="200"
 height="200"
 style="filter: url(#composite2); transform: translateX(220px);" />
</svg>
```

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

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecomposite-k2 |

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

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