recursal/MDN huggingface dataset:
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 **`mathematical`** attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for horizontally oriented glyph layouts. The value is an offset in the font coordinate system.

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) # FontFaceElementMathematicalAttribute |

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

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

The **`font-style`** attribute specifies whether the text is to be rendered using a normal, italic, or oblique face.

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

You can use this attribute with the following SVG elements:

* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
Example
-------
```

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



```html
<svg viewBox="0 0 250 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-style="normal">Normal font style</text>
  <text x="150" y="20" font-style="italic">Italic font style</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `normal` | `italic` | `oblique` |
| Default value | `normal` |
| Animatable | Yes |

For a description of the values, please refer to the CSS `font-style` property.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-style-prop |

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

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

See also
--------

* `CSS font-style`
stitchTiles
===========

The **`stitchTiles`** attribute defines how the Perlin Noise tiles behave at the border.

You can use this attribute with the following SVG elements:

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

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" stitchTiles="noStitch" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="stitch" />
  </filter>

  <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" />
  <rect
 x="0"
 y="0"
 width="100"
 height="100"
 style="filter: url(#noise1); transform: translate(100px, 0);" />
  <rect
 x="0"
 y="0"
 width="100"
 height="100"
 style="filter: url(#noise1); transform: translate(0, 100px);" />
  <rect
 x="0"
 y="0"
 width="100"
 height="100"
 style="filter: url(#noise1); transform: translate(100px, 100px);" />

  <rect
 x="0"
 y="0"
 width="100"
 height="100"
 style="filter: url(#noise2); transform: translate(220px, 0);" />
  <rect
 x="0"
 y="0"
 width="100"
 height="100"
 style="filter: url(#noise2); transform: translate(320px, 0);" />
  <rect
 x="0"
 y="0"
 width="100"
 height="100"
 style="filter: url(#noise2); transform: translate(220px, 100px);" />
  <rect
 x="0"
 y="0"
 width="100"
 height="100"
 style="filter: url(#noise2); transform: translate(320px, 100px);" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `noStitch` | `stitch` |
| Default value | `noStitch` |
| Animatable | Yes |

`noStitch`

This value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function. Sometimes the result will show clear discontinuities at the tile borders.

`stitch`

This value indicates that the user agent will automatically adjust the x and y values of the base frequency such that the `<feTurbulence>` node's width and height (i.e., the width and height of the current subregion) contain an integral number of the tile width and height for the first octave.

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

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

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

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

The **`keySplines`** attribute defines a set of Bézier curve control points associated with the `keyTimes` list, defining a cubic Bézier function that controls interval pacing.

This attribute is ignored unless the `calcMode` attribute is set to `spline`.

If there are any errors in the keySplines specification (bad values, too many or too few values), the animation will not occur.

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"
 calcMode="spline"
 repeatCount="indefinite"
 values="60; 110; 60; 10; 60"
 keyTimes="0; 0.25; 0.5; 0.75; 1"
 keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
    <animate
 attributeName="cy"
 dur="4s"
 calcMode="spline"
 repeatCount="indefinite"
 values="10; 60; 110; 60; 10"
 keyTimes="0; 0.25; 0.5; 0.75; 1"
 keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
  </circle>
</svg>
```

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

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

The attribute value is a semicolon-separated list of control point descriptions.

`<control-point>`

Each control point description is a set of four values: `x1 y1 x2 y2`, describing the Bézier control points for one time segment. The `keyTimes` values that define the associated segment are the Bézier "anchor points", and the `keySplines` values are the control points. Thus, there must be one fewer sets of control points than there are `keyTimes`.

The values of `x1 y1 x2 y2` must all be in the range 0 to 1.

Safari issues

`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 # KeySplinesAttribute |

See also
--------

* Bézier curve
k3
==

The **`k3`** 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="0"
 k3="1"
 k4="0" />
  </filter>
  <filter id="composite2" x="0" y="0" width="100%" height="100%">
    <feComposite
 in2="SourceGraphic"
 operator="arithmetic"
 k1="1"
 k2="0"
 k3="10"
 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-k3 |

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

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

**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:type`** attribute identifies the type of XLink being used. In SVG, only simple links are available.

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 | `simple` |
| Default value | `simple` |
| Animatable | No |

`simple`

This value specifies that the referred resource is a simple link.

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

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

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

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

See also
--------

* Definition of the `xlink:type` attribute in the XLink specification
units-per-em
============

**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 **`units-per-em`** attribute specifies the number of coordinate units on the "em square", an abstract square whose height is the intended distance between lines of type in the same type size. This is the size of the design grid on which glyphs are laid out.

**Note:** This value is almost always necessary as nearly every other attribute requires the definition of a design grid.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | `1000` |
| Animatable | No |

`<number>`

This value indicates the number of coordinate units on the em square.

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

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

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

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

The **`mode`** attribute defines the blending mode on the `<feBlend>` filter primitive.

You can use this attribute with the following SVG elements:

* `<feBlend>`
Example
-------
```

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



```html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="blending1" x="0" y="0" width="100%" height="100%">
    <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="seagreen"
 flood-opacity="1" />
    <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
  </filter>
  <filter id="blending2" x="0" y="0" width="100%" height="100%">
    <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="seagreen"
 flood-opacity="1" />
    <feBlend in="SourceGraphic" in2="floodFill" mode="color-dodge" />
  </filter>

  <image
 href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#blending1);" />
  <image
 href="mdn\_logo\_only\_color.png"
 width="200"
 height="200"
 style="filter:url(#blending2); transform:translateX(220px);" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<blend-mode>` |
| Default value | `normal` |
| Animatable | Yes |

For a description of the values, see `<blend-mode>`.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-feblend-mode |

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

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

The **`ry`** attribute defines a radius on the y-axis.

You can use this attribute with the following SVG elements:

* `<ellipse>`
* `<rect>`
Example
-------
```

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



```html
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="50" cy="50" ry="0" rx="25" />
  <ellipse cx="150" cy="50" ry="25" rx="25" />
  <ellipse cx="250" cy="50" ry="50" rx="25" />

  <rect x="20" y="120" width="60" height="60" ry="0" rx="15" />
  <rect x="120" y="120" width="60" height="60" ry="15" rx="15" />
  <rect x="220" y="120" width="60" height="60" ry="150" rx="15" />
</svg>
```

ellipse
-------

For `<ellipse>`, `ry` defines the y-radius of the shape. With a value lower or equal to zero the ellipse won't be drawn at all.

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

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

rect
----

For `<rect>`, `ry` defines the y-axis radius of the ellipse used to round off the corners of the rectangle.

The way the value of the `ry` attribute is interpreted depend on both the `rx` attribute and the width of the rectangle:

* If a properly specified value is provided for `ry` but not for `rx` (or the opposite), then the browser will consider the missing value equal to the defined one.
* If neither `ry` nor `rx` has a properly specified value, then the browser will draw a rectangle with square corners.
* If `ry` is greater than half of the width of the rectangle, then the browser will consider the value for `ry` as half of the width of the rectangle.

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

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # RY |
targetX
=======

The **`targetX`** attribute determines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image. The leftmost column of the matrix is column number zero. The value must be such that: `0` <= `targetX` < `order` `X`.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `<integer>` |
| Default value | `floor(`order`X / 2)` |
| Animatable | Yes |

`<integer>`

This value indicates the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image.

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

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

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

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

See also
--------

* `targetY`