recursal/MDN huggingface dataset:
slope
=====

**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 **`slope`** attribute indicates the vertical stroke angle of a font.

You can use this attribute with the following SVG elements:

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

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

`<number>`

This value indicates the vertical stroke angle of the font.

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

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

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

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

**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 **`baseProfile`** attribute describes the minimum SVG language profile that the author believes is necessary to correctly render the content. The attribute does not specify any processing restrictions; It can be considered metadata.

For example, the value of the attribute could be used by an authoring tool to warn the user when they are modifying the document beyond the scope of the specified base profile.

Each SVG profile should define the text that is appropriate for this attribute.

You can use this attribute with the following SVG elements:

* `<svg>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | Profile name |
| Default value | `none` |
| Animatable | No |

Example
-------


```svg
<svg width="120" height="120" version="1.1"
 xmlns="http://www.w3.org/2000/svg" baseProfile="full">

  ...

</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # SVGElementBaseProfileAttribute |
in2
===

The **`in2`** attribute identifies the second input for the given filter primitive. It works exactly like the `in` attribute.

You can use this attribute with the following SVG elements:

* `<feBlend>`
* `<feComposite>`
* `<feDisplacementMap>`
feBlend
-------

For `<feBlend>`, `in2` defines the second input image to the blending operation.

|  |  |
| --- | --- |
| Value | `SourceGraphic` | `SourceAlpha` |
 `BackgroundImage` | `BackgroundAlpha` |
 `FillPaint` | `StrokePaint` |
 `<filter-primitive-reference>` |
| Default value | `SourceGraphic` for first filter primitive, otherwise result
 of previous filter primitive
  |
| Animatable | Yes |

feComposite
-----------

For `<feComposite>`, `in2` defines the second input image to the compositing operation.

|  |  |
| --- | --- |
| Value | `SourceGraphic` | `SourceAlpha` |
 `BackgroundImage` | `BackgroundAlpha` |
 `FillPaint` | `StrokePaint` |
 `<filter-primitive-reference>` |
| Default value | `SourceGraphic` for first filter primitive, otherwise result
 of previous filter primitive
  |
| Animatable | Yes |

feDisplacementMap
-----------------

For `<feDisplacementMap>`, `in2` defines the second input image, which is used to displace the pixels in the image defined in the `in` attribute.

|  |  |
| --- | --- |
| Value | `SourceGraphic` | `SourceAlpha` |
 `BackgroundImage` | `BackgroundAlpha` |
 `FillPaint` | `StrokePaint` |
 `<filter-primitive-reference>` |
| Default value | `SourceGraphic` for first filter primitive, otherwise result
 of previous filter primitive
  |
| Animatable | Yes |

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-in2 |
| Filter Effects Module Level 1 # element-attrdef-fecomposite-in2 |
| Filter Effects Module Level 1 # element-attrdef-feblend-in2 |
specularExponent
================

The **`specularExponent`** attribute controls the focus for the light source. The bigger the value the brighter the light.

You can use this attribute with the following SVG elements:

* `<feSpecularLighting>`
* `<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%">
    <feSpecularLighting in="SourceGraphic" specularExponent="1">
      <fePointLight x="60" y="60" z="20" />
    </feSpecularLighting>
  </filter>
  <filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
    <feSpecularLighting in="SourceGraphic" specularExponent="5">
      <fePointLight x="60" y="60" z="20" />
    </feSpecularLighting>
  </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>
```

feSpecularLighting
------------------

For `<feSpecularLighting>`, `specularExponent` defines the exponent value for the specular term.

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

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

For `<feSpotLight>`, `specularExponent` defines the exponent value controlling the focus for the light source.

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fespecularlighting-specularexponent |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-specularexponent |

See also
--------

* Description of Phong reflection model on Wikipedia
calcMode
========

The **`calcMode`** attribute specifies the interpolation mode for the animation.

The default mode is `linear`, however if the attribute does not support linear interpolation (e.g. for strings), the `calcMode` attribute is ignored and discrete interpolation is used.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `discrete` | `linear` | `paced` |
 `spline` |
| Default value | `linear` |
| Animatable | No |

`discrete`

This specifies that the animation function will jump from one value to the next without any interpolation.

`linear`

Simple linear interpolation between values is used to calculate the animation function. Except for `<animateMotion>`, this is the default value.

`paced`

Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any `keyTimes` or `keySplines` will be ignored. For `<animateMotion>`, this is the default value.

`spline`

Interpolates from one value in the `values` list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are defined in the `keyTimes` attribute, and the control points for each interval are defined in the `keySplines` attribute.

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

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

See also
--------

* SMIL Animation specification
primitiveUnits
==============

The **`primitiveUnits`** attribute specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion.

You can use this attribute with the following SVG elements:

* `<filter>`
Usage notes
-----------

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

userSpaceOnUse

This value indicates that any length values within the filter definitions represent values in the current user coordinate system in place at the time when the `<filter>` element is referenced (i.e., the user coordinate system for the element referencing the `<filter>` element via a `filter` attribute).

objectBoundingBox

This value indicates that any length values within the filter definitions represent fractions or percentages of the bounding box on the referencing element.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-primitiveunits |

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

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

The **`fill-opacity`** attribute is a presentation attribute defining the opacity of the paint server (*color*, *gradient*, *pattern*, etc.) applied to a shape.

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

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Default fill opacity: 1 -->
  <circle cx="50" cy="50" r="40" />

  <!-- Fill opacity as a number -->
  <circle cx="150" cy="50" r="40" fill-opacity="0.7" />

  <!-- Fill opacity as a percentage -->
  <circle cx="250" cy="50" r="40" fill-opacity="50%" />

  <!-- Fill opacity as a CSS property -->
  <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `[0-1]` |
 **<percentage>** |
| Default value | `1` |
| Animatable | Yes |

**Note:** SVG2 introduces percentage values for `fill-opacity`, however, it is not widely supported yet (*See Browser compatibility below*) as a consequence, it is best practices to set opacity with a value in the range `[0-1]`.

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

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

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

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

The **`clipPathUnits`** attribute indicates which coordinate system to use for the contents of the `<clipPath>` element.

You can use this attribute with the following SVG elements:

* `<clipPath>`
Example
-------
```

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



```html
<svg viewBox="0 0 100 100">
  <clipPath id="myClip1" clipPathUnits="userSpaceOnUse">
    <circle cx="50" cy="50" r="35" />
  </clipPath>

  <clipPath id="myClip2" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".35" />
  </clipPath>

  <!-- Some reference rect to materialized to clip path -->
  <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 clipped with userSpaceOnUse units -->
  <use clip-path="url(#myClip1)" href="#r1" fill="red" />
  <use clip-path="url(#myClip1)" href="#r2" fill="red" />
  <use clip-path="url(#myClip1)" href="#r3" fill="red" />

  <!-- The last rect is clipped with objectBoundingBox units -->
  <use clip-path="url(#myClip2)" href="#r4" fill="red" />
</svg>
```

clipPath
--------

For `<clipPath>`, `clipPathUnits` define the coordinate system in use for the content of the element.

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

userSpaceOnUse

This value indicates that all coordinates inside the `<clipPath>` element refer to the user coordinate system as defined when the clipping path was created.

objectBoundingBox

This value indicates that all coordinates inside the `<clipPath>` element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # element-attrdef-clippath-clippathunits |
paint-order
===========

The **`paint-order`** attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted.

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

You can use this attribute with the following SVG elements:

* `<circle>`
* `<ellipse>`
* `<line>`
* `<path>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<text>`
* `<textPath>`
* `<tspan>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `normal` | [ `fill` || `stroke` ||
 `markers` ]
  |
| Default value | `normal` |
| Animatable | discrete |

normal

This value indicates that the fill will be painted first, then the stroke, and finally the markers.

[ fill || stroke || markers ]

The order of these three keywords indicates the order in which the painting happens, from left to right. If any of the three painting components is omitted, they will be painted in their default order after the specified components. For example, using `stroke` is equivalent to `stroke fill markers`.

Example
-------


```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
    <stop stop-color="#888" />
    <stop stop-color="#ccc" offset="1" />
  </linearGradient>
  <rect width="400" height="200" fill="url(#g)" />
  <g
 fill="crimson"
 stroke="white"
 stroke-width="6"
 stroke-linejoin="round"
 text-anchor="middle"
 font-family="sans-serif"
 font-size="50px"
 font-weight="bold">
    <text x="200" y="75">stroke over</text>
    <text x="200" y="150" paint-order="stroke" id="stroke-under">
      stroke under
    </text>
  </g>
</svg>
```


The example would be rendered as follows:

![An image showing how the paint-order example looks in a UA that supports the paint-order property.](/en-US/docs/Web/SVG/Attribute/paint-order/paint-order-2.png)

The stroke under effect could be achieved via the following CSS property:


```css
#stroke-under {
  paint-order: stroke;
}
```

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

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

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

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

**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 **`alphabetic`** attribute defines the lower baseline of a font. It has the same syntax and semantics as the `baseline` descriptor within an `@font-face`.

For horizontally oriented glyph layouts, it indicates the alignment coordinate for glyphs to achieve alphabetic baseline alignment. 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 | `0` |
| Animatable | No |

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

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

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

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

See also
--------

* `v-alphabetic`
overline-position
=================

The `overline-position` attribute represents the ideal vertical position of the overline. The overline position 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) |
u1
==

**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 **`u1`** attribute specifies list of Unicode characters (refer to the description of the `unicode` attribute of the `<glyph>` element for a description of how to express individual Unicode characters) and/or ranges of Unicode characters, which identify a set of possible first glyphs in a kerning pair.

If a given Unicode character within the set has multiple corresponding `<glyph>` elements (i.e., there are multiple `<glyph>` elements with the same `unicode` attribute value but different `glyph-name` values), then all such glyphs are included in the set. Comma is the separator character; thus, to kern a comma, specify the comma as part of a range of Unicode characters or as a glyph name using the `g1` attribute. The total set of possible first glyphs in the kerning pair is the union of glyphs specified by the `u1` and `g1` attributes.

You can use this attribute with the following SVG elements:

* `<hkern>`
* `<vkern>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | [
`<character>`
|
`<urange>`
]# |
| Default value | *None* |
| Animatable | No |

`[ <character> | <urange> ]#`

This value indicates a comma-separated sequence of Unicode characters and/or ranges of Unicode characters, which identify a set of possible first glyphs in a kerning pair.

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

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

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

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

The **`unicode-bidi`** attribute specifies how the accumulation of the background image is managed.

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

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | Error: could not find syntax for this item |
| Default value | `normal` |
| Animatable | No |

For a description of the values, please refer to the CSS `unicode-bidi` property.

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # unicode-bidi |

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

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

The **`y1`** attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the `y` attribute instead.

You can use this attribute with the following SVG elements:

* `<line>`
* `<linearGradient>`
Example
-------
```

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



```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="1" x2="9" y1="1" y2="5" stroke="red" />
  <line x1="1" x2="9" y1="5" y2="5" stroke="green" />
  <line x1="1" x2="9" y1="9" y2="5" stroke="blue" />
</svg>
```

line
----

For `<line>`, `y1` defines the y coordinate of the starting point of the line.

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

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



```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <line x1="1" x2="9" y1="1" y2="5" stroke="red" />
  <line x1="1" x2="9" y1="5" y2="5" stroke="green" />
  <line x1="1" x2="9" y1="9" y2="5" stroke="blue" />
</svg>
```

linearGradient
--------------

For `<linearGradient>`, `y1` defines the y coordinate of the starting point of the *gradient vector* used to map the gradient stop values. The exact behavior of this attribute is influenced by the `gradientUnits` attributes

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

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



```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 By default the gradient vector start at the top left
 corner of the bounding box of the shape it is applied to.
 -->
  <linearGradient y1="0%" id="g0">
    <stop offset="5%" stop-color="black" />
    <stop offset="50%" stop-color="red" />
    <stop offset="95%" stop-color="black" />
  </linearGradient>

  <rect x="1" y="1" width="8" height="8" fill="url(#g0)" />

  <!--
 Here the gradient vector start at the bottom left
 corner of the bounding box of the shape it is applied to.
 -->
  <linearGradient y1="100%" id="g1">
    <stop offset="5%" stop-color="black" />
    <stop offset="50%" stop-color="red" />
    <stop offset="95%" stop-color="black" />
  </linearGradient>

  <rect x="11" y="1" width="8" height="8" fill="url(#g1)" />
</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineElementY1Attribute |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementY1Attribute |