dominant-baseline - SVG: Scalable Vector Graphics

dominant-baseline
=================

The **`dominant-baseline`** attribute specifies the dominant baseline, which is the baseline used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the box's alignment context.

It is used to determine or re-determine a scaled-baseline-table. A scaled-baseline-table is a compound value with three components:

1. a baseline-identifier for the dominant-baseline,
2. a baseline-table, and
3. a baseline-table font-size.

Some values of the property re-determine all three values. Others only re-establish the baseline-table font-size. When the initial value, `auto`, would give an undesired result, this property can be used to explicitly set the desired scaled-baseline-table.

If there is no baseline table in the nominal font, or if the baseline table lacks an entry for the desired baseline, then the browser may use heuristics to determine the position of the desired baseline.

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

You can use this attribute with the following SVG elements:

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

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

text {
  font:
    bold 14px Verdana,
    Helvetica,
    Arial,
    sans-serif;
}
```

```html
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
  <path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />

  <text dominant-baseline="auto" x="30" y="20">Auto</text>
  <text dominant-baseline="middle" x="30" y="50">Middle</text>
  <text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `auto`
|
`text-bottom` | `alphabetic` |
 `ideographic` | `middle` | `central` |
 `mathematical` | `hanging` | `text-top` |
| Default value | `auto` |
| Animatable | discrete |

`auto`

If this property occurs on a `<text>` element, then the computed value depends on the value of the `writing-mode` attribute.

If the `writing-mode` is horizontal, then the value of the dominant-baseline component is `alphabetic`. Otherwise, if the `writing-mode` is vertical, then the value of the dominant-baseline component is `central`.

If this property occurs on a `<tspan>`, `<tref>`, or `<textPath>` element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element.

If the computed `baseline-shift` value actually shifts the baseline, then the baseline-table font-size component is set to the value of the `font-size` attribute on the element on which the `dominant-baseline` attribute occurs, otherwise the baseline-table font-size remains the same as that of the element.

If there is no parent text content element, the scaled-baseline-table value is constructed as above for `<text>` elements.

`use-script`
Deprecated

The dominant-baseline and the baseline-table components are set by determining the predominant script of the character data content. The `writing-mode`, whether horizontal or vertical, is used to select the appropriate set of baseline-tables and the dominant baseline is used to select the baseline-table that corresponds to that baseline. The baseline-table font-size component is set to the value of the `font-size` attribute on the element on which the `dominant-baseline` attribute occurs.

`no-change`
Deprecated

The dominant-baseline, the baseline-table, and the baseline-table font-size remain the same as that of the parent text content element.

`reset-size`
Deprecated

The dominant-baseline and the baseline-table remain the same, but the baseline-table font-size is changed to the value of the `font-size` attribute on this element. This re-scales the baseline-table for the current `font-size`.

`ideographic`

The baseline-identifier for the dominant-baseline is set to be `ideographic`, the derived baseline-table is constructed using the `ideographic` baseline-table in the font, and the baseline-table font-size is changed to the value of the `font-size` attribute on this element.

`alphabetic`

The baseline-identifier for the dominant-baseline is set to be `alphabetic`, the derived baseline-table is constructed using the `alphabetic` baseline-table in the font, and the baseline-table font-size is changed to the value of the `font-size` attribute on this element.

`hanging`

The baseline-identifier for the dominant-baseline is set to be `hanging`, the derived baseline-table is constructed using the `hanging` baseline-table in the font, and the baseline-table font-size is changed to the value of the `font-size` attribute on this element.

`mathematical`

The baseline-identifier for the dominant-baseline is set to be `mathematical`, the derived baseline-table is constructed using the `mathematical` baseline-table in the font, and the baseline-table font-size is changed to the value of the `font-size` attribute on this element.

`central`

The baseline-identifier for the dominant-baseline is set to be `central`. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: `ideographic`, `alphabetic`, `hanging`, `mathematical`. The baseline-table font-size is changed to the value of the `font-size` attribute on this element.

`middle`

The baseline-identifier for the dominant-baseline is set to be `middle`. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. That font baseline-table is chosen using the following priority order of baseline-table names: `alphabetic`, `ideographic`, `hanging`, `mathematical`. The baseline-table font-size is changed to the value of the `font-size` attribute on this element.

`text-after-edge`

The baseline-identifier for the dominant-baseline is set to be `text-after-edge`. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which font baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the `font-size` attribute on this element.

`text-before-edge`

The baseline-identifier for the dominant-baseline is set to be `text-before-edge`. The derived baseline-table is constructed from the defined baselines in a baseline-table in the font. The choice of which baseline-table to use from the baseline-tables in the font is browser dependent. The baseline-table font-size is changed to the value of the `font-size` attribute on this element.

`text-top`

This value uses the top of the em box as the baseline.

### SVG

```html
<svg
 width="400"
 height="300"
 viewBox="0 0 300 300"
 xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
 d="M60,20 L60,270
 M30,20 L400,20
 M30,70 L400,70
 M30,120 L400,120
 M30,170 L400,170
 M30,220 L400,220
 M30,270 L400,270"
 stroke="grey" />

  <!-- Anchors in action -->
  <text dominant-baseline="auto" x="70" y="20">auto</text>
  <text dominant-baseline="middle" x="70" y="70">middle</text>
  <text dominant-baseline="hanging" x="70" y="170">hanging</text>
  <text dominant-baseline="mathematical" x="70" y="220">mathematical</text>
  <text dominant-baseline="text-top" x="70" y="270">text-top</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="20" r="3" fill="red" />
  <circle cx="60" cy="70" r="3" fill="red" />
  <circle cx="60" cy="120" r="3" fill="red" />
  <circle cx="60" cy="170" r="3" fill="red" />
  <circle cx="60" cy="220" r="3" fill="red" />
  <circle cx="60" cy="270" r="3" fill="red" />

  <style>
 <![CDATA[
 text {
 font: bold 30px Verdana, Helvetica, Arial, sans-serif;
 }
 ]]>
 </style>
</svg>
```

### Result

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # DominantBaselineProperty |
| CSS Inline Layout Module Level 3 # dominant-baseline-property |

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

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


vert-origin-x - SVG: Scalable Vector Graphics

vert-origin-x
=============

**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-origin-x`** attribute indicates the x-coordinate in the font coordinate system of the origin of a glyph to be used when drawing vertically oriented text.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `<number>` |
| Default value | *Half of `horiz-adv-x` value* |
| Animatable | No |

`<number>`

This value indicates the x-coordinate of the origin of a glyph for vertically oriented text.

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

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

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

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

See also
--------

* `horiz-origin-x`
* `horiz-origin-y`
* `vert-origin-y`


pointsAtY - SVG: Scalable Vector Graphics

pointsAtY
=========

The **`pointsAtY`** attribute represents the y location in the coordinate system established by attribute `primitiveUnits` on the `<filter>` element of the point at which the light source is pointing.

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="lighting1" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <feSpotLight x="60" y="60" z="50" pointsAtY="0" />
    </feDiffuseLighting>
  </filter>
  <filter id="lighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic">
      <feSpotLight x="60" y="60" z="50" pointsAtY="400" />
    </feDiffuseLighting>
  </filter>

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

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

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

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

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

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

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


clip - SVG: Scalable Vector Graphics

clip
====

**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 **`clip`** attribute is a presentation attribute defining the visible region of an element.

This attribute has the same parameter values as defined for the `CSS clip property`. Unitless values, which indicate current user coordinates, are permitted on the coordinate values on the `rect()`. The value of `auto` defines a clipping path along the bounds of the viewport created by the given element.

You can use this attribute with the following SVG elements:

* `<svg>`
* `<symbol>`
* `<image>`
* `<foreignObject>`
* `<pattern>`
* `<marker>`
Example
-------
```

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

```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Auto clipping -->
  <svg x="0" width="10" height="10" clip="auto">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>

  <!-- Rect(top, right, bottom, left) clipping -->
  <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)">
    <circle cx="5" cy="5" r="4" stroke="green" />
  </svg>
</svg>
```

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

**Warning:** This property is deprecated. Use `clip-path` instead.

|  |  |
| --- | --- |
| Value | `auto` | `rect()` |
| Default value | `auto` |
| Animatable | Yes |

The value `auto` defines a clipping path along the bounds of the viewport created by the given element. The value `rect()` defines a clipping rectangle following the following syntax: `rect(<top>, <right>, <bottom>, <left>)`. The `<top>` and `<bottom>` values specify offsets from the *top border edge* of the element viewport, while `<right>` and `<left>` specify offsets from the *left border edge* of the element viewport.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

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

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


seed - SVG: Scalable Vector Graphics

seed
====

The **`seed`** attribute represents the starting number for the pseudo random number generator of the `<feTurbulence>` filter primitive.

You can use this attribute with the following SVG elements:

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

### Example 1
```

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

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

### Example 2

```html
<svg
 width="200"
 height="200"
 viewBox="0 0 220 220"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence baseFrequency="0.05" seed="1000" result="turbulence" />
    <feDisplacementMap
 in2="turbulence"
 in="SourceGraphic"
 scale="50"
 xChannelSelector="R"
 yChannelSelector="G" />
  </filter>

  <circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)" />
</svg>
```

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

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

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

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

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

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


overline-thickness - SVG: Scalable Vector Graphics

overline-thickness
==================

The `overline-thickness` attribute represents the ideal thickness of the overline. The overline 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) |


SVG Presentation Attributes - SVG: Scalable Vector Graphics

SVG Presentation Attributes
===========================

SVG presentation attributes are CSS properties that can be used as attributes on SVG elements.

* alignment-baseline
* baseline-shift
* clip
* clip-path
* clip-rule
* color
* color-interpolation
* color-interpolation-filters
* color-profile
* color-rendering
* cursor
* d
* direction
* display
* dominant-baseline
* enable-background
* fill
* fill-opacity
* fill-rule
* filter
* flood-color
* flood-opacity
* font-family
* font-size
* font-size-adjust
* font-stretch
* font-style
* font-variant
* font-weight
* glyph-orientation-horizontal
* glyph-orientation-vertical
* image-rendering
* kerning
* letter-spacing
* lighting-color
* marker-end
* marker-mid
* marker-start
* mask
* opacity
* overflow
* pointer-events
* shape-rendering
* solid-color
* solid-opacity
* stop-color
* stop-opacity
* stroke
* stroke-dasharray
* stroke-dashoffset
* stroke-linecap
* stroke-linejoin
* stroke-miterlimit
* stroke-opacity
* stroke-width
* text-anchor
* text-decoration
* text-rendering
* transform
* unicode-bidi
* vector-effect
* visibility
* word-spacing
* writing-mode
Attributes
----------

`alignment-baseline`

 It specifies how an object is aligned along the font baseline with respect to its parent.
 *Value*: **`auto`**|`baseline`|`before-edge`|`text-before-edge`|`middle`|`central`|`after-edge`|`text-after-edge`|`ideographic`|`alphabetic`|`hanging`|`mathematical`|`inherit`; *Animatable*: **Yes**

`baseline-shift`

 It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.
 *Value*: **`auto`**|`baseline`|`super`|`sub`|<percentage>|<length>|`inherit`; *Animatable*: **Yes**

`clip`
Deprecated

 It defines what portion of an element is visible.
 *Value*: **`auto`**|`<shape>`|`inherit`; *Animatable*: **Yes**

`clip-path`

 It binds the element it is applied to with a given `<clipPath>` element.
 *Value*: **`none`**|<FuncIRI>|`inherit`; *Animatable*: **Yes**

`clip-rule`

 It indicates how to determine what side of a path is inside a shape in order to know how a `<clipPath>` should clip its target.
 *Value*: **`nonzero`**|`evenodd`|`inherit`; *Animatable*: **Yes**

`color`

 It provides a potential indirect value (`currentcolor`) for the `fill`, `stroke`, `stop-color`, `flood-color` and `lighting-color` presentation attributes.
 *Value*: <color>|`inherit`; *Animatable*: **Yes**

`color-interpolation`

 It specifies the color space for gradient interpolations, color animations, and alpha compositing.
 *Value*: `auto`|**`sRGB`**|`linearRGB`|`inherit`; *Animatable*: **Yes**

`color-interpolation-filters`

 It specifies the color space for imaging operations performed via filter effects.
 *Value*: `auto`|`sRGB`|**`linearRGB`**|`inherit`; *Animatable*: **Yes**

`color-profile`
Deprecated

 It defines which color profile a raster image included through the `<image>` element should use.
 *Value*: `auto`|`sRGB`|`linearRGB`|<name>|<IRI>|`inherit`; *Animatable*: **Yes**

`color-rendering`

 It provides a hint to the browser about how to optimize its color interpolation and compositing operations.
 *Value*: **`auto`**|`optimizeSpeed`|`optimizeQuality`|`inherit`; *Animatable*: **Yes**

`cursor`

 It specifies the mouse cursor displayed when the mouse pointer is over an element.
 *Value*: <FuncIRI>|<keywords>|`inherit`; *Animatable*: **Yes**

`d`

 It defines a path to be drawn.
 *Value*: path()|`none`

`direction`

 It specifies the base writing direction of text.
 *Value*: **`ltr`**|`rtl`|`inherit`; *Animatable*: **Yes**

`display`

 It allows to control the rendering of graphical or container elements.
 *Value*: see CSS `display`; *Animatable*: **Yes**

`dominant-baseline`

 It defines the baseline used to align the box's text and inline-level contents.
 *Value*: `auto`|`text-bottom`|`alphabetic`|`ideographic`|`middle`|`central`| `mathematical`|`hanging`|`text-top`; *Animatable*: **Yes**

`enable-background`
Deprecated

 It tells the browser how to manage the accumulation of the background image.
 *Value*: **`accumulate`**|`new`|`inherit`; *Animatable*: **No**

`fill`

 It defines the color of the inside of the graphical element it applies to.
 *Value*: <paint>; *Animatable*: **Yes**

`fill-opacity`

 It specifies the opacity of the color or the content the current object is filled with.
 *Value*: <number>|<percentage>; *Animatable*: **Yes**

`fill-rule`

 It indicates how to determine what side of a path is inside a shape.
 *Value*: **`nonzero`**|`evenodd`|`inherit`; *Animatable*: **Yes**

`filter`

 It defines the filter effects defined by the `<filter>` element that shall be applied to its element.
 *Value*: <FuncIRI>|**`none`**|`inherit`; *Animatable*: **Yes**

`flood-color`

 It indicates what color to use to flood the current filter primitive subregion defined through the `<feFlood>` or `<feDropShadow>` element.
 *Value*: <color>; *Animatable*: **Yes**

`flood-opacity`

 It indicates the opacity value to use across the current filter primitive subregion defined through the `<feFlood>` or `<feDropShadow>` element.
 *Value*: <number>|<percentage>; *Animatable*: **Yes**

`font-family`

 It indicates which font family will be used to render the text of the element.
 *Value*: see CSS `font-family`; *Animatable*: **Yes**

`font-size`

 It specifies the size of the font.
 *Value*: see CSS `font-size`; *Animatable*: **Yes**

`font-size-adjust`

 It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.
 *Value*: <number>|**`none`**|`inherit`; *Animatable*: **Yes**

`font-stretch`

 It selects a normal, condensed, or expanded face from a font.
 *Value*: see CSS `font-stretch`; *Animatable*: **Yes**

`font-style`

 It specifies whether a font should be styled with a normal, italic, or oblique face from its `font-family`.
 *Value*: **`normal`**|`italic`|`oblique`; *Animatable*: **Yes**

`font-variant`

 It specifies whether a font should be used with some of their variation such as small caps or ligatures.
 *Value*: see CSS `font-variant`; *Animatable*: **Yes**

`font-weight`

 It specifies the weight (or boldness) of the font.
 *Value*: **`normal`**|`bold`|`lighter`|`bolder`|`100`|`200`|`300`|`400`|`500`|`600`|`700`|`800`|`900`; *Animatable*: **Yes**

`glyph-orientation-horizontal`
Deprecated

 It controls glyph orientation when the inline-progression-direction is horizontal.
 *Value*: <angle>|`inherit`; *Animatable*: **No**

`glyph-orientation-vertical`
Deprecated

 It controls glyph orientation when the inline-progression-direction is vertical.
 *Value*: **`auto`**|<angle>|`inherit`; *Animatable*: **No**

`image-rendering`

 It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.
 *Value*: **`auto`**|`optimizeQuality`|`optimizeSpeed`; *Animatable*: **Yes**

`kerning`
Deprecated

 It indicates whether the browser should adjust inter-glyph spacing.
 *Value*: **`auto`**|<length>|`inherit`; *Animatable*: **Yes**

`letter-spacing`

 It controls spacing between text characters.
 *Value*: **`normal`**|<length>|`inherit`; *Animatable*: **Yes**

`lighting-color`

 It defines the color of the light source for filter primitives elements `<feDiffuseLighting>` and `<feSpecularLighting>`.
 *Value*: <color>; *Animatable*: **Yes**

`marker-end`

 It defines the arrowhead or polymarker that will be drawn at the final vertex of the given `<path>` element or basic shape.
 *Value*: <FuncIRI>|**`none`**|`inherit`; *Animatable*: **Yes**

`marker-mid`

 It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given `<path>` element or basic shape.
 *Value*: <FuncIRI>|**`none`**|`inherit`; *Animatable*: **Yes**

`marker-start`

 It defines the arrowhead or polymarker that will be drawn at the first vertex of the given `<path>` element or basic shape.
 *Value*: <FuncIRI>|**`none`**|`inherit`; *Animatable*: **Yes**

`mask`

 It alters the visibility of an element by either masking or clipping the image at specific points.
 *Value*: see CSS `mask`; *Animatable*: **Yes**

`opacity`

 It specifies the transparency of an object or a group of objects.
 *Value*: <opacity-value>; *Animatable*: **Yes**

`overflow`

 Specifies whether the content of a block-level element is clipped when it overflows the element's box.
 *Value*: **`visible`**|`hidden|scroll`|`auto`|`inherit`; *Animatable*: **Yes**

`pointer-events`

 Defines whether or when an element may be the target of a mouse event.
 *Value*: `bounding-box`|**`visiblePainted`**|`visibleFill`|`visibleStroke`|`visible` |`painted`|`fill`|`stroke`|`all`|`none`; *Animatable*: **Yes**

`shape-rendering`

 Hints about what tradeoffs to make as the browser renders `<path>` element or basic shapes.
 *Value*: **`auto`**|`optimizeSpeed`|`crispEdges`|`geometricPrecision` |`inherit`; *Animatable*: **Yes**

`solid-color`

 -
 *Value*:; *Animatable*: **-**

`solid-opacity`

 -
 *Value*:; *Animatable*: **-**

`stop-color`

 Indicates what color to use at that gradient stop.
 *Value*: `currentcolor`|<color>|<icccolor>|`inherit`; *Animatable*: **Yes**

`stop-opacity`

 Defines the opacity of a given gradient stop.
 *Value*: <opacity-value>|`inherit`; *Animatable*: **Yes**

`stroke`

 Defines the color used to paint the outline of the shape.
 *Value*: <paint>; *Animatable*: **Yes**

`stroke-dasharray`

 Defines the pattern of dashes and gaps used to paint the outline of the shape.
 *Value*: `none`|`<dasharray>`; *Animatable*: **Yes**

`stroke-dashoffset`

 Defines an offset on the rendering of the associated dash array.
 *Value*: <percentage>|<length>; *Animatable*: **Yes**

**`stroke-linecap`**

 Defines the shape to be used at the end of open subpaths when they are stroked.
 *Value*: **`butt`**|`round`|`square`; *Animatable*: **Yes**

**`stroke-linejoin`**

 Defines the shape to be used at the corners of paths when they are stroked.
 *Value*: `arcs`|`bevel`|**`miter`**|`miter-clip`|`round`; *Animatable*: **Yes**

**`stroke-miterlimit`**

 Defines a limit on the ratio of the miter length to the `stroke-width` used to draw a miter join.
 *Value*: <number>; *Animatable*: **Yes**

**`stroke-opacity`**

 Defines the opacity of the stroke of a shape.
 *Value*: <opacity-value>|<percentage>; *Animatable*: **Yes**

**`stroke-width`**

 Defines the width of the stroke to be applied to the shape.
 *Value*: <length>|<percentage>; *Animatable*: **Yes**

**`text-anchor`**

 Defines the vertical alignment a string of text.
 *Value*: `start`|`middle`|`end`|**`inherit`**; *Animatable*: **Yes**

**`text-decoration`**

 Sets the appearance of decorative lines on text.
 *Value*: `none`|`underline`|`overline`|`line-through`|`blink`|**`inherit`**; *Animatable*: **Yes**

**`text-rendering`**

 Hints about what tradeoffs to make as the browser renders text.
 *Value*: **`auto`**|`optimizeSpeed`|`optimizeLegibility`|`geometricPrecision`|`inherit`; *Animatable*: **Yes**

**`transform`**

 Defines a list of transform definitions that are applied to an element and the element's children.
 *Value*: <transform-list>; *Animatable*: **Yes**

**`unicode-bidi`**

 -
 *Value*:; *Animatable*: **-**

**`vector-effect`**

 Specifies the vector effect to use when drawing an object.
 *Value*: `default`|`non-scaling-stroke`|`inherit`|`<uri>`; *Animatable*: **Yes**

**`visibility`**

 Lets you control the visibility of graphical elements.
 *Value*: **`visible`**|`hidden`|`collapse`|`inherit`; *Animatable*: **Yes**

**`word-spacing`**

 Specifies spacing behavior between words.
 *Value*: <length>|**`inherit`**; *Animatable*: **Yes**

**`writing-mode`**

 Specifies whether the initial inline-progression-direction for a `<text>` element shall be left-to-right, right-to-left, or top-to-bottom.
 *Value*: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`; *Animatable*: **Yes**

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

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


x1 - SVG: Scalable Vector Graphics

x1
==

The **`x1`** attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the `x` 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="5" y1="1" y2="9" stroke="red" />
  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
  <line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
</svg>
```

line
----

For `<line>`, `x1` defines the x 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="5" y1="1" y2="9" stroke="red" />
  <line x1="5" x2="5" y1="1" y2="9" stroke="green" />
  <line x1="9" x2="5" y1="1" y2="9" stroke="blue" />
</svg>
```

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

For `<linearGradient>`, `x1` defines the x 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 left
 bounding limit of the shape it is applied to
 -->
  <linearGradient x1="0%" id="g0">
    <stop offset="0" stop-color="black" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>

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

  <!--
 Here the gradient vector start at 80% of the left
 bounding limit of the shape it is applied to
 -->
  <linearGradient x1="80%" id="g1">
    <stop offset="0" stop-color="black" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineElementX1Attribute |
| Scalable Vector Graphics (SVG) 2 # LinearGradientElementX1Attribute |


dx - SVG: Scalable Vector Graphics

dx
==

The **`dx`** attribute indicates a shift along the x-axis on the position of an element or its content.

You can use this attribute with the following SVG elements:

* `<feDropShadow>`
* `<feOffset>`
* `<glyphRef>`
* `<text>`
* `<tref>`
* `<tspan>`
Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="0" x2="100%" y1="50%" y2="50%" />
  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="60%" x2="60%" y1="0" y2="100%" />

  <!-- Some reference text -->
  <text x="10%" y="50%" fill="grey">SVG</text>

  <!-- The same text with a shift along the x-axis -->
  <text dx="50%" x="10%" y="50%">SVG</text>
</svg>
```

```css
line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}
```

feDropShadow
------------

For `<feDropShadow>`, `dx` defines the x offset of the dropped shadow. The unit used to resolve the value of the attribute is set by the `primitiveUnits` attribute of the `<filter>` element.

|  |  |
| --- | --- |
| Value | **<number>** |
| Default value | `2` |
| Animatable | Yes |

feOffset
--------

For `<feOffset>`, `dx` defines the x offset of the filter input graphic. The unit used to resolve the value of the attribute is set by the `primitiveUnits` attribute of the `<filter>` element.

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

glyphRef
--------

**Warning:** As of SVG2 `<glyphRef>` is deprecated and shouldn't be used.

For `<glyphRef>`, `dx` defines the x offset of the glyph, in the font metric system.

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

text
----

For `<text>`, if it contains a single value, `dx` defines a shift along the x-axis for all glyphs.

If there are multiple values, `dx` defines a shift along the x-axis for each individual glyph relative to the preceding glyph. If there are less values than glyphs, the remaining glyphs use a value of `0`. If there are more values than glyphs, extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of
 **<length>** |
| Default value | *none* |
| Animatable | Yes |

### Example
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Lines materialized the position of the glyphs -->
  <line x1="0" x2="100%" y1="25%" y2="25%" />
  <line x1="0" x2="100%" y1="50%" y2="50%" />
  <line x1="0" x2="100%" y1="75%" y2="75%" />

  <line x1="10%" x2="10%" y1="0" y2="100%" />
  <line x1="30%" x2="30%" y1="0" y2="100%" />
  <line x1="60%" x2="60%" y1="0" y2="100%" />

  <!-- Behaviors change based on the number
 of values in the attributes -->
  <text dx="20%" x="10%" y="25%">SVG</text>
  <text dx="0 10%" x="10%" y="50%">SVG</text>
  <text dx="0 10% 20%" x="10%" y="75%">SVG</text>
</svg>
```

```css
line {
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 3px;
}
```

tref
----

**Warning:** As of SVG2 `<tref>` is deprecated and shouldn't be used.

For `<tref>`, if it contains a single value, `dx` defines a shift along the x-axis for all glyphs.

If there are multiple values, `dx` defines a shift along the x-axis for each individual glyph relative to the preceding glyph. If there are less values than glyphs, the remaining glyphs use a value of `0`. If there are more values than glyphs, extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of
 **<length>** |
| Default value | *none* |
| Animatable | Yes |

tspan
-----

For `<tspan>`, if it contains a single value, `dx` defines a shift along the x-axis for all alternate glyph.

If there are multiple values, `dx` defines a shift along the x-axis for each individual glyph relative to the preceding glyph. If there are less values than glyphs, the remaining glyphs use a value of `0`. If there are more values than glyphs, extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of
 **<length>** |
| Default value | *none* |
| Animatable | Yes |

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedropshadow-dx |
| Filter Effects Module Level 1 # element-attrdef-feoffset-dx |
| Scalable Vector Graphics (SVG) 2 # TextElementDXAttribute |


color - SVG: Scalable Vector Graphics

color
=====

The **`color`** attribute is used to provide a potential indirect value, `currentcolor`, for the `fill`, `stroke`, `stop-color`, `flood-color`, and `lighting-color` attributes.

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

As a presentation attribute, it can be applied to any element, but as noted above, it has no direct effect on SVG elements.

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

|  |  |
| --- | --- |
| Value | `<color>`
 | `inherit` |
| Default value | Depends on user agent |
| Animatable | Yes |

Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g color="green">
    <rect width="50" height="50" fill="currentcolor" />
    <circle
 r="25"
 cx="70"
 cy="70"
 stroke="currentcolor"
 fill="none"
 stroke-width="5" />
  </g>
</svg>
```

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

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

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

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


patternTransform - SVG: Scalable Vector Graphics

patternTransform
================

The **`patternTransform`** attribute defines a list of transform definitions that are applied to a pattern tile.

You can use this attribute with the following SVG elements:

* `<pattern>`
Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Apply a transform on the tile -->
  <pattern
 id="p1"
 width=".25"
 height=".25"
 patternTransform="rotate(20)
 skewX(30)
 scale(1 0.5)">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Apply the transformed pattern tile -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
</svg>
```

pattern
-------

For `<pattern>`, `patternTransform` defines a list of transform definitions that are applied to a pattern tile.

**Note:** As of SVG2, it is also allowed to use the CSS `transform` property. However, the current state of implementation isn't very good. For backward compatibility reason, it is highly suggested to keep using the `patternTransform` attribute.

|  |  |
| --- | --- |
| Value | <transform-list> |
| Default value | *Identity transform* |
| Animatable | Yes |

### Transform functions

To know more about the definition of transform functions, see the `transform` attribute definition.

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

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

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

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


font-family - SVG: Scalable Vector Graphics

font-family
===========

The **`font-family`** attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.

**Note:** As a presentation attribute, `font-family` can be used as a CSS property. See the `CSS font-family` 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-family="Arial, Helvetica, sans-serif">Sans serif</text>
  <text x="100" y="20" font-family="monospace">Monospace</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | Error: could not find syntax for this item |
| Default value | Depends on user agent |
| Animatable | Yes |

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

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

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

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

See also
--------

* `CSS font-family`


pointer-events - SVG: Scalable Vector Graphics

pointer-events
==============

The **`pointer-events`** attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
 The circle will always intercept the mouse event.
 To change the color of the rect underneath you have
 to click outside the circle
 -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePainted" />

  <!--
 The circle below will never catch a mouse event.
 The rect underneath will change color whether you
 are clicking on the circle or the rect itself
 -->
  <rect x="10" y="0" height="10" width="10" fill="black" />
  <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>
```

```js
window.addEventListener("mouseup", (e) => {
  // Let's pick a random color between #000000 and #FFFFFF
  const color = Math.round(Math.random() \* 0xffffff);

  // Let's format the color to fit CSS requirements
  const fill = `#${color.toString(16).padStart(6, "0")}`;

  // Let's apply our color in the
  // element we actually clicked on
  e.target.style.fill = fill;
});
```

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

|  |  |
| --- | --- |
| Value | `bounding-box` | `visiblePainted` |
 `visibleFill` | `visibleStroke` |
 `visible` | `painted` | `fill` |
 `stroke` | `all` | `none` |
| Default value | `visiblePainted` |
| Animatable | Yes |

*For a detailed explanation of each possible value, have a look at the CSS `pointer-events` documentation.*

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

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

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

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


edgeMode - SVG: Scalable Vector Graphics

edgeMode
========

The **`edgeMode`** attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.

You can use this attribute with the following SVG elements:

* `<feConvolveMatrix>`
* `<feGaussianBlur>`
feConvolveMatrix
----------------

For `<feConvolveMatrix>`, `edgeMode` determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.

|  |  |
| --- | --- |
| Value | `duplicate` | `wrap` | `none` |
| Default value | `duplicate` |
| Animatable | Yes |

`duplicate`

This value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.

`wrap`

This value indicates that the input image is extended by taking the color values from the opposite edge of the image.

`none`

This value indicates that the input image is extended with pixel values of zero for R, G, B and A.

feGaussianBlur
--------------

For `<feGaussianBlur>`, `edgeMode` determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.

|  |  |
| --- | --- |
| Value | `duplicate` | `wrap` | `none` |
| Default value | `none` |
| Animatable | Yes |

`duplicate`

This value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.

`wrap`

This value indicates that the input image is extended by taking the color values from the opposite edge of the image.

`none`

This value indicates that the input image is extended with pixel values of zero for R, G, B and A.

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

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


min - SVG: Scalable Vector Graphics

min
===

The **`min`** attribute specifies the minimum value of the active animation duration.

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 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 dur="4s"
 min="2s"
 repeatCount="indefinite"
 values="60 ; 110 ; 60 ; 10 ; 60"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
    <animate
 attributeName="cy"
 dur="4s"
 min="2s"
 repeatCount="indefinite"
 values="10 ; 60 ; 110 ; 60 ; 10"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
  </circle>
</svg>
```

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

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

`<clock-value>`

Specifies the length of the minimum value of the active duration, measured in local time. The value must be greater than 0.

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

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


method - SVG: Scalable Vector Graphics

method
======

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`method`** attribute indicates the method by which text should be rendered along the path of a `<textPath>` element.

You can use this attribute with the following SVG elements:

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

For `<textPath>`, `method` indicates the method by which text should be rendered along the path.

|  |  |
| --- | --- |
| Value | `align` | `stretch` |
| Default value | `align` |
| Animatable | Yes |

align

This value indicates that the characters should be rendered so that they are not stretched or warped. The characters are rotated, scaled and stretched when they are rendered. As a result, for fonts with connected characters (e.g. cursive fonts), the connections may not align properly when text is rendered along the path.

stretch

This value indicates that the character outlines will be converted into paths, and then stretched and possibly warped. With this approach, connected characters, such as in cursive fonts, will maintain their connections.

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

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


surfaceScale - SVG: Scalable Vector Graphics

surfaceScale
============

The **`surfaceScale`** attribute represents the height of the surface for a light filter primitive.

You can use this attribute with the following SVG elements:

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

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

For `<feSpecularLighting>`, `surfaceScale` defines the height of the surface.

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

feDiffuseLighting
-----------------

For `<feDiffuseLighting>`, `surfaceScale` defines the height of the surface.

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fediffuselighting-surfacescale |
| Filter Effects Module Level 1 # element-attrdef-fespecularlighting-surfacescale |

See also
--------

* Description of Phong reflection model on Wikipedia


max - SVG: Scalable Vector Graphics

max
===

The **`max`** attribute specifies the maximum value of the active animation duration.

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 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 dur="4s"
 max="6s"
 repeatCount="indefinite"
 values="60 ; 110 ; 60 ; 10 ; 60"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
    <animate
 attributeName="cy"
 dur="4s"
 max="6s"
 repeatCount="indefinite"
 values="10 ; 60 ; 110 ; 60 ; 10"
 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" />
  </circle>
</svg>
```

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

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

`<clock-value>`

Specifies the length of the maximum value of the active duration, measured in local time. The value must be greater than 0.

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

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

See also
--------

* `min`


v-hanging - SVG: Scalable Vector Graphics

v-hanging
=========

**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-hanging`** attribute indicates the alignment coordinate for glyphs to achieve hanging baseline alignment. 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 to achieve hanging baseline alignment.

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

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

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

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

See also
--------

* `hanging`


exponent - SVG: Scalable Vector Graphics

exponent
========

The **`exponent`** attribute defines the exponent of the gamma function.

You can use this attribute with the following SVG elements:

* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
Example
-------
```

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient
 id="gradient"
 gradientUnits="userSpaceOnUse"
 x1="0"
 y1="0"
 x2="200"
 y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset="0.5" stop-color="#00ff00" />
      <stop offset="1" stop-color="#0000ff" />
    </linearGradient>
  </defs>

  <filter id="componentTransfer1" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="gamma" exponent="1" />
      <feFuncG type="gamma" exponent="1" />
      <feFuncB type="gamma" exponent="1" />
    </feComponentTransfer>
  </filter>
  <filter id="componentTransfer2" x="0" y="0" width="100%" height="100%">
    <feComponentTransfer>
      <feFuncR type="gamma" exponent="5" />
      <feFuncG type="gamma" exponent="5" />
      <feFuncB type="gamma" exponent="5" />
    </feComponentTransfer>
  </filter>

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

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

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

`<number>`

If the `type` attribute of the component element is set to `gamma`, this value specifies the exponent of the gamma function

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-exponent |


width - SVG: Scalable Vector Graphics

width
=====

The **`width`** attribute defines the horizontal length of an element in the user coordinate system.

You can use this attribute with the following SVG elements:

* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMorphology>`
* `<feOffset>`
* `<feSpecularLighting>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<use>`
Example
-------
```

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

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <!-- With a width of 0 or less, nothing will be rendered -->
  <rect x="0" y="0" width="0" height="90" />
  <rect x="0" y="100" width="60" height="90" />
  <rect x="0" y="200" width="100%" height="90" />
</svg>
```

feBlend
-------

For `<feBlend>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feColorMatrix
-------------

For `<feColorMatrix>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feComponentTransfer
-------------------

For `<feComponentTransfer>`, `width` defines the horizontal length for the rendering area of the primitive.

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

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

For `<feComposite>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feConvolveMatrix
----------------

For `<feConvolveMatrix>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feDiffuseLighting
-----------------

For `<feDiffuseLighting>`, `width` defines the horizontal length for the rendering area of the primitive.

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

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

For `<feDisplacementMap>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feDropShadow
------------

For `<feDropShadow>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feFlood
-------

For `<feFlood>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feGaussianBlur
--------------

For `<feGaussianBlur>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feImage
-------

For `<feImage>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feMerge
-------

For `<feMerge>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feMorphology
------------

For `<feMorphology>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feOffset
--------

For `<feOffset>`, `width` defines the horizontal length for the rendering area of the primitive.

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

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

For `<feSpecularLighting>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feTile
------

For `<feTile>`, `width` defines the horizontal length for the rendering area of the primitive.

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

feTurbulence
------------

For `<feTurbulence>`, `width` defines the horizontal length for the rendering area of the primitive.

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

filter
------

For `<filter>`, `width` defines the horizontal length for the rendering area of the filter.

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

foreignObject
-------------

For `<foreignObject>`, `width` defines the horizontal length for the rendering area for the referenced document.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

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

image
-----

For `<image>`, `width` defines the horizontal length for the image.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as the intrinsic width of the image) |
| Animatable | Yes |

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

mask
----

For `<mask>`, `width` defines the horizontal length of its area of effect. The exact effect of this attribute is influenced by the `maskUnits` attribute.

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

pattern
-------

For `<pattern>`, `width` defines the horizontal length of the tile pattern. The exact effect of this attribute is influenced by the `patternUnits` and `patternTransform` attributes.

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

rect
----

For `<rect>`, `width` defines the horizontal length for the rectangle.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

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

svg
---

For `<svg>`, `width` defines the horizontal length for the rendering area of the SVG viewport.

**Note:** In an HTML document if both the `viewBox` and `width` attributes are omitted, the svg element will be rendered with a width of `300px`

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `100%`) |
| Animatable | Yes |

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

use
---

For `<use>`, `width` defines the horizontal length for the referenced element.

|  |  |
| --- | --- |
| Value | `auto` |
 **<length>**
 |
 **<percentage>** |
| Default value | `auto` (treated as `0`) |
| Animatable | Yes |

**Note:** `width` has no effect on `use` elements, unless the element referenced has a viewBox - i.e. they only have an effect when `use` refers to a `svg` or `symbol` element.

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

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-filter-width |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-width |
| CSS Masking Module Level 1 # element-attrdef-mask-width |
| Scalable Vector Graphics (SVG) 2 # Sizing |
| Scalable Vector Graphics (SVG) 2 # PatternElementWidthAttribute |


slope - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 |


transform - SVG: Scalable Vector Graphics

transform
=========

The **`transform`** attribute defines a list of transform definitions that are applied to an element and the element's children.

**Note:** As of SVG2, `transform` is a presentation attribute, meaning it can be used as a CSS property. However, be aware that there are some differences in syntax between the CSS property and the attribute. See the documentation for the CSS property `transform` for the specific syntax to use in that case.

You can use this attribute with any SVG element.

Example
-------
```

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

```html
<svg
 viewBox="-40 0 150 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <g
 fill="grey"
 transform="rotate(-10 50 100)
 translate(-36 45.5)
 skewX(40)
 scale(1 0.5)">
    <path
 id="heart"
 d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use href="#heart" fill="none" stroke="red" />
</svg>
```

In SVG 1.1, only these 16 elements were allowed to use it: `<a>`, `<circle>`, `<clipPath>`, `<defs>`, `<ellipse>`, `<foreignObject>`, `<g>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<switch>`, `<text>`, and `<use>`.

Also, as a legacy from SVG 1.1, `<linearGradient>` and `<radialGradient>` support the `gradientTransform` attribute, and `<pattern>` supports the `patternTransform` attribute, both of which act exactly like the `transform` attribute.

|  |  |
| --- | --- |
| Value | **`<transform-list>`** |
| Default value | *none* |
| Animatable | Yes |

Transform functions
-------------------

The following transform functions can be used by the `transform` attribute `<transform-list>`

**Warning:** As per the spec, you should be able to also use CSS transform functions. However, the compatibility isn't guaranteed.

### Matrix

The `matrix(<a> <b> <c> <d> <e> <f>)` transform function specifies a transformation in the form of a transformation matrix of six values. `matrix(a,b,c,d,e,f)` is equivalent to applying the transformation matrix:

(

a

c

e

b

d

f

0

0

1

)

\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}

 which maps coordinates from a previous coordinate system into a new coordinate system by the following matrix equalities:

(

x

newCoordSys

y

newCoordSys

1

)

=

(

a

c

e

b

d

f

0

0

1

)

(

x

prevCoordSys

y

prevCoordSys

1

)

=

(

a

x

prevCoordSys

+
c

y

prevCoordSys

+
e

b

x

prevCoordSys

+
d

y

prevCoordSys

+
f

1

)

 \begin{pmatrix} x\_{\mathrm{newCoordSys}} \\ y\_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\_{\mathrm{prevCoordSys}} \\ y\_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x\_{\mathrm{prevCoordSys}} + c y\_{\mathrm{prevCoordSys}} + e \\ b x\_{\mathrm{prevCoordSys}} + d y\_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}

#### 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="30" height="20" fill="green" />

  <!--
 In the following example we are applying the matrix:
 [a c e] [3 -1 30]
 [b d f] => [1 3 40]
 [0 0 1] [0 0 1]

 which transform the rectangle as such:

 top left corner: oldX=10 oldY=10
 newX = a \* oldX + c \* oldY + e = 3 \* 10 - 1 \* 10 + 30 = 50
 newY = b \* oldX + d \* oldY + f = 1 \* 10 + 3 \* 10 + 40 = 80

 top right corner: oldX=40 oldY=10
 newX = a \* oldX + c \* oldY + e = 3 \* 40 - 1 \* 10 + 30 = 140
 newY = b \* oldX + d \* oldY + f = 1 \* 40 + 3 \* 10 + 40 = 110

 bottom left corner: oldX=10 oldY=30
 newX = a \* oldX + c \* oldY + e = 3 \* 10 - 1 \* 30 + 30 = 30
 newY = b \* oldX + d \* oldY + f = 1 \* 10 + 3 \* 30 + 40 = 140

 bottom right corner: oldX=40 oldY=30
 newX = a \* oldX + c \* oldY + e = 3 \* 40 - 1 \* 30 + 30 = 120
 newY = b \* oldX + d \* oldY + f = 1 \* 40 + 3 \* 30 + 40 = 170
 -->
  <rect
 x="10"
 y="10"
 width="30"
 height="20"
 fill="red"
 transform="matrix(3 1 -1 3 30 40)" />
</svg>
```

### Translate

The `translate(<x> [<y>])` transform function moves the object by `x` and `y`. If `y` is not provided, it is assumed to be `0`.

In other words:
```

xnew = xold + <x>
ynew = yold + <y>
```

#### Example
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- No translation -->
  <rect x="5" y="5" width="40" height="40" fill="green" />

  <!-- Horizontal translation -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="blue"
 transform="translate(50)" />

  <!-- Vertical translation -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="red"
 transform="translate(0 50)" />

  <!-- Both horizontal and vertical translation -->
  <rect
 x="5"
 y="5"
 width="40"
 height="40"
 fill="yellow"
 transform="translate(50 50)" />
</svg>
```

### Scale

The `scale(<x> [<y>])` transform function specifies a scale operation by `x` and `y`. If `y` is not provided, it is assumed to be equal to `x`.

#### Example
```

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

```html
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- uniform scale -->
  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />

  <!-- vertical scale -->
  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />

  <!-- horizontal scale -->
  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />

  <!-- No scale -->
  <circle cx="0" cy="0" r="10" fill="black" />
</svg>
```

### Rotate

The `rotate(<a> [<x> <y>])` transform function specifies a rotation by `a` degrees about a given point. If optional parameters `x` and `y` are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters `x` and `y` are supplied, the rotation is about the point `(x, y)`.

#### Example
```

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

```html
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="10" height="10" />

  <!-- rotation is done around the point 0,0 -->
  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />

  <!-- rotation is done around the point 10,10 -->
  <rect
 x="0"
 y="0"
 width="10"
 height="10"
 fill="green"
 transform="rotate(100, 10, 10)" />
</svg>
```

### SkewX

The `skewX(<a>)` transform function specifies a skew transformation along the x axis by `a` degrees.

#### Example
```

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

```html
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>
```

### SkewY

The `skewY(<a>)` transform function specifies a skew transformation along the y axis by `a` degrees.

#### Example
```

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

```html
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>
```

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # svg-transform |
| Scalable Vector Graphics (SVG) 2 # TransformProperty |


enable-background - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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 - SVG: Scalable Vector Graphics

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`