recursal/MDN huggingface dataset:
enable-background
=================

**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 **`enable-background`** attribute specifies how the accumulation of the background image is managed.

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

You can use this attribute with the following SVG elements:

* `<a>`
* `<defs>`
* `<glyph>`
* `<g>`
* `<marker>`
* `<mask>`
* `<missing-glyph>`
* `<pattern>`
* `<svg>`
* `<switch>`
* `<symbol>`
Context notes
-------------

|  |  |
| --- | --- |
| Value | `accumulate` | `new` [ `<x>`
`<y>` `<width>`
`<height>` ]?
  |
| Default value | `accumulate` |
| Animatable | No |

`accumulate`

If an ancestor container element has a property value of `enable-background: new`, then all graphics elements within the current container element are rendered both onto the parent container element's background image canvas and onto the target device.

Otherwise, there is no current background image canvas, so graphics elements are only rendered onto the target device.

`new [ <x> <y> <width> <height> ]?`

This value enables the ability of children of the current container element to access the background image.

It also indicates that a new (i.e., initially transparent black) background image canvas is established and that in effect all children of the current container element shall be rendered into the new background image canvas in addition to being rendered onto the target device.

 The optional `<x>`, `<y>`, `<width>`, and `<height>` parameters are `<number>` values that indicate the subregion of the container element's user space where access to the background image is allowed to happen. Those values act as a clipping rectangle on the background image canvas.
 Negative values for `<width>` or `<height>` are forbidden. If one, two, or three values are specified or if neither `<width>` nor `<height>` are specified, the `BackgroundImage` and `BackgroundAlpha` of a filter primitive are processed as if background image processing were not enabled.


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

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

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

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

The **`font-size`** attribute refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment.

**Note:** As a presentation attribute, `font-size` can be used as a CSS property. See the `CSS font-size` 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 200 30" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-size="smaller">smaller</text>
  <text x="100" y="20" font-size="2em">2em</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<absolute-size>` | `<relative-size>` |
 `<length-percentage>` |
| Default value | `medium` |
| Animatable | Yes |

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

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

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

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

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

See also
--------

* `CSS font-size`
stroke-width
============

The **`stroke-width`** attribute is a presentation attribute defining the width of the stroke to be applied to the shape.

You can use this attribute with the following SVG elements:

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

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



```html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Default stroke width: 1 -->
  <circle cx="5" cy="5" r="3" stroke="green" />

  <!-- Stroke width as a number -->
  <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" />

  <!-- Stroke width as a percentage -->
  <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" />
</svg>
```

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

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

**Note:** A percentage value is always computed as a percentage of the normalized `viewBox` diagonal length.

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

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

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

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

The lengthAdjust attribute controls how the text is stretched into the length defined by the `textLength` attribute.

You can use this attribute with the following SVG elements:

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

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



```html
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <g font-face="sans-serif">
    <text x="0" y="20" textLength="300" lengthAdjust="spacing">
      Stretched using spacing only.
    </text>
    <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
      Stretched using spacing and glyphs.
    </text>
    <text x="0" y="80" textLength="100" lengthAdjust="spacing">
      Shrunk using spacing only.
    </text>
    <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
      Shrunk using spacing and glyphs.
    </text>
  </g>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `spacing` | `spacingAndGlyphs` |
| Default value | `spacing` |
| Animatable | Yes |

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

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

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

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

The **`markerUnits`** attribute defines the coordinate system for the `markerWidth` and `markerHeight` attributes and the contents of the `<marker>`.

You can use this attribute with the following SVG elements:

* `<marker>`
Usage notes
-----------

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

`userSpaceOnUse`

This value specifies that the `markerWidth` and `markerHeight` attributes and the contents of the `<marker>` element represent values in the current user coordinate system in place for the graphic object referencing the marker (i.e., the user coordinate system for the element referencing the `<marker>` element via a `marker`, `marker-start`, `marker-mid`, or `marker-end` property).

`strokeWidth`

This value specifies that the `markerWidth` and `markerHeight` attributes and the contents of the `<marker>` element represent values in a coordinate system which has a single unit equal the size in user units of the current stroke width (see the `stroke-width` attribute) in place for the graphic object referencing the marker.

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

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

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

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

See also
--------

* `<marker>`
* `markerWidth`
* `markerHeight`
* `stroke-width`
cap-height
==========

**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 **`cap-height`** attribute defines the height of uppercase glyphs of the font within the font coordinate system.

**Note:** It was specified to share the syntax and semantics of the obsolete `cap-height` descriptor of the `@font-face` at-rule defined in an early version of CSS 2.

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

See also
--------

* `x-height`
* `accent-height`
restart
=======

The **`restart`** attribute specifies whether or not an animation can restart.

You can use this attribute with the following SVG elements:

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

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

a {
  fill: blue;
  text-decoration: underline;
  cursor: pointer;
}
```



```html
<svg viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg">
  <rect y="30" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="30"
 to="100"
 dur="5s"
 repeatCount="1"
 restart="always" />
  </rect>
  <rect x="120" y="30" width="100" height="100">
    <animate
 attributeType="XML"
 attributeName="y"
 from="30"
 to="100"
 dur="5s"
 repeatCount="1"
 restart="whenNotActive" />
  </rect>
  <a id="restart"><text y="20">Restart animation</text></a>
</svg>
```



```js
document.getElementById("restart").addEventListener("click", (evt) => {
  document.querySelectorAll("animate").forEach((element) => {
    element.beginElement();
  });
});
```

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

|  |  |
| --- | --- |
| Value | `always` | `whenNotActive` | `never` |
| Default value | `always` |
| Animatable | No |

`always`

This value indicates that the animation can be restarted at any time.

`whenNotActive`

This value indicates that the animation can only be restarted when it is not active (i.e. after the active end). Attempts to restart the animation during its active duration are ignored.

`never`

This value indicates that the animation cannot be restarted.

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

| Specification |
| --- |
| SVG Animations Level 2 # RestartAttribute |
marker-end
==========

The **`marker-end`** attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape.

For all shape elements, except `<polyline>` and `<path>`, the last vertex is the same as the first vertex. In this case, if the value of `marker-start` and `marker-end` are both not `none`, then two markers will be rendered on that final vertex. For `<path>` elements, for each closed subpath, the last vertex is the same as the first vertex. `marker-end` is only rendered on the final vertex of the path data.

**Note:** As a presentation attribute, `marker-end` 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 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="triangle"
 viewBox="0 0 10 10"
 refX="1"
 refY="5"
 markerUnits="strokeWidth"
 markerWidth="10"
 markerHeight="10"
 orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
    </marker>
  </defs>
  <polyline
 fill="none"
 stroke="black"
 points="20,100 40,60 70,80 100,20"
 marker-end="url(#triangle)" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `none` | `<marker-ref>` |
| Default value | `none` |
| Animatable | discrete |

`none`

Indicates that no marker symbol shall be drawn at the final vertex.

`<marker-ref>`

This value is a reference to a `<marker>` element, which will be drawn at the final vertex. If the reference is not valid, then no marker will be drawn.

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

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

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

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

See also
--------

* `<marker>`
* `marker-start`
* `marker-mid`
fy
==

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

You can use this attribute with the following SVG elements:

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

### Example 1
```

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.35"
 fy="0.75"
 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>
```

### Example 2


```html
<svg
 viewBox="0 0 120 120"
 width="200"
 height="200"
 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="35" cy="35" 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 | 
 Coincides with the presentational value of `cy` for
 the element whether the value for `cy` was inherited or not.
  |
| Animatable | None |

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

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

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

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

The **`media`** attribute specifies a media query that must be matched for a style sheet to apply.

You can use this attribute with the following SVG elements:

* `<style>`
Example
-------
```

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



```html
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg">
  <style>
 rect {
 fill: black;
 }
 </style>
  <style media="all and (min-width: 600px)">
 rect {
 fill: seagreen;
 }
 </style>

  <text y="15">Resize the window to see the effect</text>
  <rect y="20" width="200" height="200" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<media-query-list>` |
| Default value | `all` |
| Animatable | Yes |

`<media-query-list>`

This value holds a media query that needs to match in order for the style sheet to be applied.

If not specified, the style sheet is applied unconditionally.

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

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

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

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

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

**Note:** As a presentation attribute `stroke-opacity` 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 40 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Default stroke opacity: 1 -->
  <circle cx="5" cy="5" r="4" stroke="green" />

  <!-- Stroke opacity as a number -->
  <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" />

  <!-- Stroke opacity as a percentage -->
  <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" />

  <!-- Stroke opacity as a CSS property -->
  <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" />
</svg>
```

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

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

**Note:** SVG2 introduces percentage values for `stroke-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]`.

It's important to know that the stroke partially covers the fill of a shape, so a stroke with an opacity different than `1` will partially show the fill underneath. To avoid this effect, it is possible to apply a global opacity with the `opacity` attribute or to put the stroke behind the fill with the `paint-order` attribute.

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

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

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

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

The `rotate` attribute specifies how the animated element rotates as it travels along a path specified in an `<animateMotion>` element.

You can use this attribute with the following SVG elements:

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

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

The `auto` and `auto-reverse` values allow the animated element's rotation to change dynamically as it travels along the path. If the value of `rotate` is `auto`, the element turns to align its right-hand side in the current direction of motion. If the value is `auto-reverse`, it turns its left-hand side in the current direction of motion.

Setting `rotate`'s value to a number specifies a constant rotation, in degrees, that does not change with the animation. The default value of `0` keeps the animated element in its original orientation.

Examples
--------

### SVG


```html
<svg
 width="400"
 height="120"
 viewBox="0 0 480 120"
 xmlns="http://www.w3.org/2000/svg">
  <!-- Draw the outline of the motion path in grey -->
  <path
 d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
 stroke="lightgrey"
 stroke-width="2"
 fill="none"
 id="theMotionPath" />

  <!-- Red arrow which will not rotate -->
  <path fill="red" d="M-5,-5 L10,0 -5,5 0,0 Z">
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="0">
      <mpath href="#theMotionPath" />
    </animateMotion>
  </path>

  <g transform="translate(100, 0)">
    <use href="#theMotionPath" />
    <!-- Green arrow which will rotate along the motion path -->
    <path fill="green" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- Define the motion path animation -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>

  <g transform="translate(200, 0)">
    <use href="#theMotionPath" />
    <!-- Blue arrow which will rotate backwards along the motion path -->
    <path fill="blue" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- Define the motion path animation -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto-reverse">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>

  <g transform="translate(300, 0)">
    <use href="#theMotionPath" />
    <!-- Purple arrow which will have a static rotation of 210 degrees -->
    <path fill="purple" d="M-5,-5 L10,0 -5,5 0,0 Z">
      <!-- Define the motion path animation -->
      <animateMotion dur="6s" repeatCount="indefinite" rotate="210">
        <mpath href="#theMotionPath" />
      </animateMotion>
    </path>
  </g>
</svg>
```

### Result

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

| Specification |
| --- |
| SVG Animations Level 2 # RotateAttribute |
stop-color
==========

The **`stop-color`** attribute indicates what color to use at a gradient stop.

**Note:** With respect to gradients, SVG treats the `transparent` keyword differently than CSS. SVG does not calculate gradients in pre-multiplied space, so `transparent` really means transparent black. So, specifying a `stop-color` with the value `transparent` is equivalent to specifying a `stop-color` with the value `black` and a `stop-opacity` with the value `0`.

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

You can use this attribute with the following SVG elements:

* `<stop>`
Usage notes
-----------

|  |  |
| --- | --- |
| Value | `currentcolor` |
 `<color>`
`<icccolor>` |
| Default value | `black` |
| Animatable | Yes |

`currentcolor`

This keyword denotes the current fill color and can be specified in the same manner as within a `<paint>` specification for the `fill` and `stroke` attributes.

`<color>`

This value indicates a color value.

`<icccolor>`

This value refers to an ICC color profile.

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

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

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

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

See also
--------

* `stop-opacity`
preserveAlpha
=============

the `preserveAlpha` attribute indicates how a `<feConvolveMatrix>` element handles alpha transparency.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
Example
-------
```

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



```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="convolveMatrix1" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix kernelMatrix="1 -1 2 0 0 0 0 0 -2" preserveAlpha="true" />
  </filter>
  <filter id="convolveMatrix2" x="0" y="0" width="100%" height="100%">
    <feConvolveMatrix
 kernelMatrix="1 -1 2 0 0 0 0 0 -2"
 preserveAlpha="false" />
  </filter>

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

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

|  |  |
| --- | --- |
| Default value | `false` |
| Value | `true` | `false` |
| Animatable | Yes |

`true`

This value indicates that the convolution is applied only to the color channels. In this case, the filter temporarily removes alpha premultiplication from the color component values, applies the kernel, and then reapplies alpha premultiplication as a final step.

`false`

This value indicates that the convolution is applied to all channels, including the alpha channel.

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

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

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

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