clip-rule - SVG: Scalable Vector Graphics

clip-rule
=========

« SVG Attribute reference home

The `clip-rule` attribute only applies to graphics elements that are contained within a `<clipPath>` element. The `clip-rule` attribute basically works as the `fill-rule` attribute, except that it applies to `<clipPath>` definitions.

The following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because `clip-rule` is specified on the `<path>` element that defines the clipping shape:

```html
<g>
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>
```

whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the `clip-rule` is specified on the referencing element, not on the object defining the clipping shape:

```html
<g>
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>
```

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

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

|  |  |
| --- | --- |
| Value | nonzero | evenodd | inherit |
| Default value | nonzero |
| Animatable | Yes |

nonzero

See description of `fill-rule` property.

evenodd

See description of `fill-rule` property.

Example
-------

```html
<svg
 width="100"
 viewBox="0 0 100 90"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
  <!-- Define star path -->
  <defs>
    <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
  </defs>

  <!-- Left: evenodd -->
  <clipPath id="emptyStar">
    <use href="#star" clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />

  <!-- Right: nonzero -->
  <clipPath id="filledStar">
    <use href="#star" clip-rule="nonzero" />
  </clipPath>
  <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
</svg>
```

Elements
--------

The following elements can use the `clip-rule` attribute, but only if they are inside a `<clipPath>` element.

* Graphical elements »
Browser compatibility
---------------------

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

See also
--------

* `<clipPath>`


SVG Core Attributes - SVG: Scalable Vector Graphics

SVG Core Attributes
===================

The SVG core attributes are all the common attributes that can be specified on any SVG element.

* `id`
* `lang`
* `tabindex`
* `xml:base`
* `xml:lang`
* `xml:space`
Attributes
----------

`id`

 Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
 *Value*: Any valid ID string; *Animatable*: **No**

`lang`

Participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).

**Note:** SVG 2 introduced the new `lang` attributes. If both `lang` and `xml:lang` attribute are used, `xml:lang` has priority over `lang`.

*Value*: Any valid language ID; *Animatable*: **No**

`tabindex`

 The tabindex SVG attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
 *Value type*: <integer>; *Animatable*: **No**

`xml:base`

 Specifies a base IRI other than the base IRI of the document.
 *Value type*: <IRI>; *Animatable*: **No**

`xml:lang`

It is a universal attribute allowed in all XML dialects to mark up the natural human language that an element contains. It's almost identical in usage to HTML's lang, but in conforming XML 1.0 documents, it does not allow the use of a null attribute value (`xml:lang=""`) to indicate an unknown language. Instead, use `xml:lang="und"`.

**Note:** SVG 2 introduced the new `lang` attributes. If both `lang` and `xml:lang` attribute are used, `xml:lang` has priority over `lang`.

*Value*: Any valid language ID; *Animatable*: **No**

`xml:space`
Deprecated

SVG supports the standard XML attribute `xml:space` to specify the handling of white space characters within a given `<text>` element's character data.

**Note:** Instead of using the `xml:space` attribute you should use the `white-space` CSS property.

*Value*: **`default`** | `preserve`; *Animatable*: **No**

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

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


writing-mode - SVG: Scalable Vector Graphics

writing-mode
============

The **`writing-mode`** attribute specifies whether the initial inline-progression-direction for a `<text>` element shall be left-to-right, right-to-left, or top-to-bottom. The `writing-mode` attribute applies only to `<text>` elements; the attribute is ignored for `<tspan>`, `<tref>`, and `<textPath>` sub-elements. (Note that the inline-progression-direction can change within a `<text>` element due to the Unicode bidirectional algorithm and properties `direction` and `unicode-bidi`.)

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

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Default value | `horizontal-tb` |
| Value | `horizontal-tb` | `vertical-rl` |
 `vertical-lr` |
| Animatable | Yes |

`horizontal-tb`

This value defines a top-to-bottom block flow direction. Both the writing mode and the typographic mode are horizontal.

`vertical-rl`

This value defines a right-to-left block flow direction. Both the writing mode and the typographic mode are vertical.

`vertical-lr`

This value defines a left-to-right block flow direction. Both the writing mode and the typographic mode are vertical.

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |
| Scalable Vector Graphics (SVG) 2 # WritingModeProperty |

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

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

See also
--------

* `CSS writing-mode`


word-spacing - SVG: Scalable Vector Graphics

word-spacing
============

The **`word-spacing`** attribute specifies spacing behavior between words.

If a `<length>` is provided without a unit identifier (e.g. an unqualified number such as 128), the browser processes the <length> as a width value in the current user coordinate system.

If a <length> is provided with one of the unit identifiers (e.g. .25em or 1%), then the browser converts the <length> into a corresponding value in the current user coordinate system.

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">
  <text y="20" word-spacing="2">Bigger spacing between words</text>
  <text x="0" y="40" word-spacing="-0.5">Smaller spacing between words</text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `normal` | `<length>` |
| Animatable | Yes |
| Default values | `normal` |

For a description of the values, please refer to the CSS `letter-spacing` property.

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

| Specification |
| --- |
| CSS Text Module Level 3 # word-spacing-property |

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

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

See also
--------

* `CSS word-spacing`


patternUnits - SVG: Scalable Vector Graphics

patternUnits
============

The **`patternUnits`** attribute indicates which coordinate system to use for the geometry properties of the `<pattern>` element.

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- All geometry properties are relative to the current user space -->
  <pattern
 id="p1"
 x="12.5"
 y="12.5"
 width="25"
 height="25"
 patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- All geometry properties are relative to the target bounding box -->
  <pattern
 id="p2"
 x=".125"
 y=".125"
 width=".25"
 height=".25"
 patternUnits="objectBoundingBox">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>
```

pattern
-------

For `<pattern>`, `patternUnits` defines the coordinate system in use for the geometry properties (`x`, `y`, `width` and `height`) of the element.

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

`userSpaceOnUse`

This value indicates that all coordinates for the geometry properties refer to the user coordinate system as defined when the pattern was applied.

`objectBoundingBox`

This value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the element to which the pattern is applied. A bounding box could be considered the same as if the content of the `<pattern>` were bound to a "`0 0 1 1`" `viewBox`.

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

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

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

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


xlink:title - SVG: Scalable Vector Graphics

xlink:title
===========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`xlink:title`** attribute is used to describe the meaning of a link or resource in a human-readable fashion.

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

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

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<cursor>`
* `<feImage>`
* `<filter>`
* `<font-face-uri>`
* `<glyphRef>`
* `<image>`
* `<linearGradient>`
* `<mpath>`
* `<pattern>`
* `<radialGradient>`
* `<script>`
* `<set>`
* `<textPath>`
* `<tref>`
* `<use>`
Usage context
-------------

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

`<anything>`

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

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

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

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

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


mask - SVG: Scalable Vector Graphics

mask
====

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

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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

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


requiredFeatures - SVG: Scalable Vector Graphics

requiredFeatures
================

**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 **`requiredFeatures`** attribute takes a list of feature strings, with the individual strings separated by white space. It determines whether or not all of the named features are supported by the browser; if all of them are supported, the attribute evaluates to `true` end the element is rendered; otherwise, the attribute evaluates to `false` and the current element and its children are skipped and thus will not be rendered. This provides a way to design SVG that gracefully falls back when features aren't available.

If the attribute is not present, then its implicit evaluated value is `true`. If a null string or empty string value is given to attribute `requiredFeatures`, the attribute is evaluate to `false`.

`requiredFeatures` is often used in conjunction with the `<switch>` element. If `requiredFeatures` is used in other situations, it represents a simple switch on the given element whether to render the element or not.

You can use this attribute with the following SVG elements:

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
* `<circle>`
* `<clipPath>`
* `<cursor>`
* `<defs>`
* `<ellipse>`
* `<foreignObject>`
* `<g>`
* `<image>`
* `<line>`
* `<mask>`
* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
* `<rect>`
* `<set>`
* `<svg>`
* `<switch>`
* `<text>`
* `<textPath>`
* `<tref>`
* `<tspan>`
* `<use>`
Example
-------
```

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

text {
  fill: white;
}
```

```html
<svg viewBox="0 0 250 45" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect fill="forestgreen" x="10" y="10" height="25" width="230" />
    <text x="20" y="27">requiredFeatures supported</text>
  </g>
  <g requiredFeatures="">
    <rect fill="crimson" x="10" y="10" height="25" width="230" />
    <text x="20" y="27">requiredFeatures not supported</text>
  </g>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `<list-of-features>` |
| Default value | `true` if not defined, `false` if null or empty
 string as value
  |
| Animatable | No |

`<list-of-features>`

This is a list of feature strings, separated using white space. Determines whether all of the named *features* are supported by the browser. See Feature strings below for a list of allowed values.

Feature strings
---------------

The following are the feature strings for the `requiredFeatures` attribute. These same feature strings apply to the hasFeature method call that is part of the SVG DOM's support for the `DOMImplementation` interface. In some cases the feature strings map directly to a set of attributes, properties or elements, in others they represent some functionality of the browser. Note that the format and naming for feature strings changed from SVG 1.0 to SVG 1.1. The SVG 1.0 feature strings are not listed here but can be found in the SVG Specification. Some browser support SVG 1.0 Feature strings for compatibility reasons. However, the SVG 1.0 feature strings are considered deprecated.

`http://www.w3.org/TR/SVG11/feature#SVG`

At least one of the following feature is supported:

* `http://www.w3.org/TR/SVG11/feature#SVG-static`
* `http://www.w3.org/TR/SVG11/feature#SVG-animation`
* `http://www.w3.org/TR/SVG11/feature#SVG-dynamic`
* `http://www.w3.org/TR/SVG11/feature#SVGDOM`

`http://www.w3.org/TR/SVG11/feature#SVGDOM`

At least one of the following feature is supported:

* `http://www.w3.org/TR/SVG11/feature#SVGDOM-static`
* `http://www.w3.org/TR/SVG11/feature#SVGDOM-animation`
* `http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic`

`http://www.w3.org/TR/SVG11/feature#SVG-static`

The browser supports all the following features:

* `http://www.w3.org/TR/SVG11/feature#CoreAttribute`
* `http://www.w3.org/TR/SVG11/feature#Structure`
* `http://www.w3.org/TR/SVG11/feature#ContainerAttribute`
* `http://www.w3.org/TR/SVG11/feature#ConditionalProcessing`
* `http://www.w3.org/TR/SVG11/feature#Image`
* `http://www.w3.org/TR/SVG11/feature#Style`
* `http://www.w3.org/TR/SVG11/feature#ViewportAttribute`
* `http://www.w3.org/TR/SVG11/feature#Shape`
* `http://www.w3.org/TR/SVG11/feature#Text`
* `http://www.w3.org/TR/SVG11/feature#PaintAttribute`
* `http://www.w3.org/TR/SVG11/feature#OpacityAttribute`
* `http://www.w3.org/TR/SVG11/feature#GraphicsAttribute`
* `http://www.w3.org/TR/SVG11/feature#Marker`
* `http://www.w3.org/TR/SVG11/feature#ColorProfile`
* `http://www.w3.org/TR/SVG11/feature#Gradient`
* `http://www.w3.org/TR/SVG11/feature#Pattern`
* `http://www.w3.org/TR/SVG11/feature#Clip`
* `http://www.w3.org/TR/SVG11/feature#Mask`
* `http://www.w3.org/TR/SVG11/feature#Filter`
* `http://www.w3.org/TR/SVG11/feature#XlinkAttribute`
* `http://www.w3.org/TR/SVG11/feature#Font`
* `http://www.w3.org/TR/SVG11/feature#Extensibility`

`http://www.w3.org/TR/SVG11/feature#SVGDOM-static`

The browser supports all DOM interfaces and methods to the language features for `http://www.w3.org/TR/SVG11/feature#SVG-static`.

`http://www.w3.org/TR/SVG11/feature#SVG-animation`

The browser supports all of the language features from `http://www.w3.org/TR/SVG11/feature#SVG-static` plus the feature `http://www.w3.org/TR/SVG11/feature#Animation`.

`http://www.w3.org/TR/SVG11/feature#SVGDOM-animation`

The browser supports all DOM interfaces and methods corresponding to the language features for `http://www.w3.org/TR/SVG11/feature#SVG-animation`.

`http://www.w3.org/TR/SVG11/feature#SVG-dynamic`

The browser supports all of the language features from `http://www.w3.org/TR/SVG11/feature#SVG-animation` plus the following features:

* `http://www.w3.org/TR/SVG11/feature#Hyperlinking`
* `http://www.w3.org/TR/SVG11/feature#Scripting`
* `http://www.w3.org/TR/SVG11/feature#View`
* `http://www.w3.org/TR/SVG11/feature#Cursor`
* `http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute`
* `http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute`
* `http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute`

`http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic`

The browser supports all DOM interfaces and methods to the language features for `http://www.w3.org/TR/SVG11/feature#SVG-dynamic`.

`http://www.w3.org/TR/SVG11/feature#CoreAttribute`

The browser supports the `id`, `xml:base`, `xml:lang` and `xml:space` attributes

`http://www.w3.org/TR/SVG11/feature#Structure`

The browser supports `<svg>`, `<g>`, `<defs>`, `<desc>`, `<title>`, `<metadata>`, `<symbol>` and `<use>` elements.

`http://www.w3.org/TR/SVG11/feature#BasicStructure`

The browser supports `<svg>`, `<g>`, `<defs>`, `<desc>`, `<title>`, `<metadata>` and `<use>` elements.

`http://www.w3.org/TR/SVG11/feature#ContainerAttribute`

The browser supports the `enable-background` attribute

`http://www.w3.org/TR/SVG11/feature#ConditionalProcessing`

The browser supports the `<switch>` element, and the `requiredFeatures`, `requiredExtensions`, `systemLanguage` attributes

`http://www.w3.org/TR/SVG11/feature#Image`

The browser supports the `<image>` element.

`http://www.w3.org/TR/SVG11/feature#Style`

The browser supports the `<style>` element.

`http://www.w3.org/TR/SVG11/feature#ViewportAttribute`

The browser supports the `clip` and `overflow` attributes.

`http://www.w3.org/TR/SVG11/feature#Shape`

The browser supports the `<rect>`, `<circle>`, `<line>`, `<polyline>`, `<polygon>`, `<ellipse>` and `<path>` elements.

`http://www.w3.org/TR/SVG11/feature#Text`

The browser supports the `<text>`, `<tspan>`, `<tref>`, `<textPath>`, and `<glyphRef>` elements.

`http://www.w3.org/TR/SVG11/feature#BasicText`

The browser supports the `<text>` element

`http://www.w3.org/TR/SVG11/feature#PaintAttribute`

The browser supports the `color`, `fill`, `fill-rule`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-width`, `color-interpolation` and `color-rendering` attributes

`http://www.w3.org/TR/SVG11/feature#BasicPaintAttribute`

The browser supports the `color`, `fill`, `fill-rule`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-width` and `color-rendering` attributes

`http://www.w3.org/TR/SVG11/feature#OpacityAttribute`

The browser supports the `opacity`, `stroke-opacity` and `fill-opacity` attributes

`http://www.w3.org/TR/SVG11/feature#GraphicsAttribute`

The browser supports the `display`, `image-rendering`, `pointer-events`, `shape-rendering`, `text-rendering` and `visibility` attributes

`http://www.w3.org/TR/SVG11/feature#BasicGraphicsAttribute`

The browser supports the `display` and `visibility` attributes

`http://www.w3.org/TR/SVG11/feature#Marker`

The browser supports the `<marker>` element

`http://www.w3.org/TR/SVG11/feature#Gradient`

The browser supports the `<linearGradient>`, `<radialGradient>` and `<stop>` elements

`http://www.w3.org/TR/SVG11/feature#Pattern`

The browser supports the `<pattern>` element

`http://www.w3.org/TR/SVG11/feature#Clip`

The browser supports the `<clipPath>` element and the `clip-path`, `clip-rule` attributes

`http://www.w3.org/TR/SVG11/feature#BasicClip`

The browser supports the `<clipPath>` element and the `clip-path` attribute

`http://www.w3.org/TR/SVG11/feature#Mask`

The browser supports the `<mask>` element

`http://www.w3.org/TR/SVG11/feature#Filter`

The browser supports the `<filter>`, `<feBlend>`, `<feColorMatrix>`, `<feComponentTransfer>`, `<feComposite>`, `<feConvolveMatrix>`, `<feDiffuseLighting>`, `<feDisplacementMap>`, `<feFlood>`, `<feGaussianBlur>`, `<feImage>`, `<feMerge>`, `<feMergeNode>`, `<feMorphology>`, `<feOffset>`, `<feSpecularLighting>`, `<feTile>`, `<feDistantLight>`, `<fePointLight>`, `<feSpotLight>`, `<feFuncR>`, `<feFuncG>`, `<feFuncB>` and `<feFuncA>` elements

`http://www.w3.org/TR/SVG11/feature#BasicFilter`

The browser supports the `<filter>`, `<feBlend>`, `<feColorMatrix>`, `<feComponentTransfer>`, `<feComposite>`, `<feFlood>`, `<feGaussianBlur>`, `<feImage>`, `<feMerge>`, `<feMergeNode>`, `<feOffset>`, `<feTile>`, `<feFuncR>`, `<feFuncG>`, `<feFuncB>` and `<feFuncA>` elements

`http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute`

The browser supports the `onunload`, `onabort`, `onerror`, `onresize`, `onscroll` and `onzoom` attributes

`http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute`

The browser supports the `onfocusin`, `onfocusout`, `onactivate`, `onclick`, `onmousedown`, `onmouseup`, `onmouseover`, `onmousemove`, `onmouseout` and `onload` attributes

`http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute`

The browser supports the `onbegin`, `onend`, `onrepeat` and `onload` attributes

`http://www.w3.org/TR/SVG11/feature#Cursor`

The browser supports the `<cursor>` element

`http://www.w3.org/TR/SVG11/feature#Hyperlinking`

The browser supports the `<a>` element

`http://www.w3.org/TR/SVG11/feature#XlinkAttribute`

The browser supports the `xlink:type`, `xlink:href`, `xlink:role`, `xlink:arcrole`, `xlink:title`, `xlink:show` and `xlink:actuate` attributes

`http://www.w3.org/TR/SVG11/feature#View`

The browser supports the `<view>` element

`http://www.w3.org/TR/SVG11/feature#Script`

The browser supports the `<script>` element

`http://www.w3.org/TR/SVG11/feature#Animation`

The browser supports the `<animate>`, `<set>`, `<animateMotion>`, `<animateTransform>`, and `<mpath>` elements

`http://www.w3.org/TR/SVG11/feature#Font`

The browser supports the `<font>`, `<font-face>`, `<glyph>`, `<missing-glyph>`, `<hkern>`, `<vkern>`, `<font-face-src>`, `<font-face-uri>`, `<font-face-format>` and `<font-face-name>` elements

`http://www.w3.org/TR/SVG11/feature#BasicFont`

The browser supports the `<font>`, `<font-face>`, `<glyph>`, `<missing-glyph>`, `<hkern>`, `<font-face-src>` and `<font-face-name>` elements

`http://www.w3.org/TR/SVG11/feature#Extensibility`

The browser supports the `<foreignObject>` element

Testing feature support
-----------------------

### SVG

```html
<svg width="450" height="1170" xmlns="http://www.w3.org/2000/svg">
  <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG -->
  <rect class="ko" x="10" y="10" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="10"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG" />
  <text x="20" y="27">http://www.w3.org/TR/SVG11/feature#SVG</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVGDOM -->
  <rect class="ko" x="10" y="35" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="35"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVGDOM" />
  <text x="20" y="52">http://www.w3.org/TR/SVG11/feature#SVGDOM</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG-static -->
  <rect class="ko" x="10" y="60" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="60"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-static" />
  <text x="20" y="77">http://www.w3.org/TR/SVG11/feature#SVG-static</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVGDOM-static -->
  <rect class="ko" x="10" y="85" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="85"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVGDOM-static" />
  <text x="20" y="102">http://www.w3.org/TR/SVG11/feature#SVGDOM-static</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG-animation -->
  <rect class="ko" x="10" y="110" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="110"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-animation" />
  <text x="20" y="127">http://www.w3.org/TR/SVG11/feature#SVG-animation</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVGDOM-animation -->
  <rect class="ko" x="10" y="135" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="135"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVGDOM-animation" />
  <text x="20" y="152">
    http://www.w3.org/TR/SVG11/feature#SVGDOM-animation
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG-dynamic -->
  <rect class="ko" x="10" y="160" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="160"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG-dynamic" />
  <text x="20" y="177">http://www.w3.org/TR/SVG11/feature#SVG-dynamic</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic -->
  <rect class="ko" x="10" y="185" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="185"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic" />
  <text x="20" y="202">http://www.w3.org/TR/SVG11/feature#SVGDOM-dynamic</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#CoreAttribute -->
  <rect class="ko" x="10" y="210" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="210"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#CoreAttribute" />
  <text x="20" y="227">http://www.w3.org/TR/SVG11/feature#CoreAttribute</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Structure -->
  <rect class="ko" x="10" y="235" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="235"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Structure" />
  <text x="20" y="252">http://www.w3.org/TR/SVG11/feature#Structure</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicStructure -->
  <rect class="ko" x="10" y="260" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="260"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicStructure" />
  <text x="20" y="277">http://www.w3.org/TR/SVG11/feature#BasicStructure</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#ContainerAttribute -->
  <rect class="ko" x="10" y="285" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="285"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#ContainerAttribute" />
  <text x="20" y="302">
    http://www.w3.org/TR/SVG11/feature#ContainerAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#ConditionalProcessing -->
  <rect class="ko" x="10" y="310" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="310"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#ConditionalProcessing" />
  <text x="20" y="327">
    http://www.w3.org/TR/SVG11/feature#ConditionalProcessing
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Image -->
  <rect class="ko" x="10" y="335" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="335"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Image" />
  <text x="20" y="352">http://www.w3.org/TR/SVG11/feature#Image</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Style -->
  <rect class="ko" x="10" y="360" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="360"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Style" />
  <text x="20" y="377">http://www.w3.org/TR/SVG11/feature#Style</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#ViewportAttribute -->
  <rect class="ko" x="10" y="385" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="385"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#ViewportAttribute" />
  <text x="20" y="402">
    http://www.w3.org/TR/SVG11/feature#ViewportAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Shape -->
  <rect class="ko" x="10" y="410" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="410"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Shape" />
  <text x="20" y="427">http://www.w3.org/TR/SVG11/feature#Shape</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Text -->
  <rect class="ko" x="10" y="435" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="435"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Text" />
  <text x="20" y="452">http://www.w3.org/TR/SVG11/feature#Text</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicText -->
  <rect class="ko" x="10" y="460" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="460"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicText" />
  <text x="20" y="477">http://www.w3.org/TR/SVG11/feature#BasicText</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#PaintAttribute -->
  <rect class="ko" x="10" y="485" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="485"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#PaintAttribute" />
  <text x="20" y="502">http://www.w3.org/TR/SVG11/feature#PaintAttribute</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicPaintAttribute -->
  <rect class="ko" x="10" y="510" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="510"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicPaintAttribute" />
  <text x="20" y="527">
    http://www.w3.org/TR/SVG11/feature#BasicPaintAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#OpacityAttribute -->
  <rect class="ko" x="10" y="535" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="535"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#OpacityAttribute" />
  <text x="20" y="552">
    http://www.w3.org/TR/SVG11/feature#OpacityAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#GraphicsAttribute -->
  <rect class="ko" x="10" y="560" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="560"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#GraphicsAttribute" />
  <text x="20" y="577">
    http://www.w3.org/TR/SVG11/feature#GraphicsAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicGraphicsAttribute -->
  <rect class="ko" x="10" y="585" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="585"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicGraphicsAttribute" />
  <text x="20" y="602">
    http://www.w3.org/TR/SVG11/feature#BasicGraphicsAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Marker -->
  <rect class="ko" x="10" y="610" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="610"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Marker" />
  <text x="20" y="627">http://www.w3.org/TR/SVG11/feature#Marker</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#ColorProfile -->
  <rect class="ko" x="10" y="635" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="635"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#ColorProfile" />
  <text x="20" y="652">http://www.w3.org/TR/SVG11/feature#ColorProfile</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Gradient -->
  <rect class="ko" x="10" y="660" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="660"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient" />
  <text x="20" y="677">http://www.w3.org/TR/SVG11/feature#Gradient</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Pattern -->
  <rect class="ko" x="10" y="685" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="685"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Pattern" />
  <text x="20" y="702">http://www.w3.org/TR/SVG11/feature#Pattern</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Clip -->
  <rect class="ko" x="10" y="710" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="710"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Clip" />
  <text x="20" y="727">http://www.w3.org/TR/SVG11/feature#Clip</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicClip -->
  <rect class="ko" x="10" y="735" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="735"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicClip" />
  <text x="20" y="752">http://www.w3.org/TR/SVG11/feature#BasicClip</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Mask -->
  <rect class="ko" x="10" y="760" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="760"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Mask" />
  <text x="20" y="777">http://www.w3.org/TR/SVG11/feature#Mask</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Filter -->
  <rect class="ko" x="10" y="785" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="785"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Filter" />
  <text x="20" y="802">http://www.w3.org/TR/SVG11/feature#Filter</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicFilter -->
  <rect class="ko" x="10" y="810" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="810"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicFilter" />
  <text x="20" y="827">http://www.w3.org/TR/SVG11/feature#BasicFilter</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute -->
  <rect class="ko" x="10" y="835" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="835"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute" />
  <text x="20" y="852">
    http://www.w3.org/TR/SVG11/feature#DocumentEventsAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute -->
  <rect class="ko" x="10" y="860" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="860"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute" />
  <text x="20" y="877">
    http://www.w3.org/TR/SVG11/feature#GraphicalEventsAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute -->
  <rect class="ko" x="10" y="885" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="885"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute" />
  <text x="20" y="902">
    http://www.w3.org/TR/SVG11/feature#AnimationEventsAttribute
  </text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Cursor -->
  <rect class="ko" x="10" y="910" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="910"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Cursor" />
  <text x="20" y="927">http://www.w3.org/TR/SVG11/feature#Cursor</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Hyperlinking -->
  <rect class="ko" x="10" y="935" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="935"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Hyperlinking" />
  <text x="20" y="952">http://www.w3.org/TR/SVG11/feature#Hyperlinking</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#XlinkAttribute -->
  <rect class="ko" x="10" y="960" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="960"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#XlinkAttribute" />
  <text x="20" y="977">http://www.w3.org/TR/SVG11/feature#XlinkAttribute</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#View -->
  <rect class="ko" x="10" y="1010" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="1010"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#View" />
  <text x="20" y="1027">http://www.w3.org/TR/SVG11/feature#View</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Script -->
  <rect class="ko" x="10" y="1035" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="1035"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Script" />
  <text x="20" y="1052">http://www.w3.org/TR/SVG11/feature#Script</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Animation -->
  <rect class="ko" x="10" y="1060" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="1060"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Animation" />
  <text x="20" y="1077">http://www.w3.org/TR/SVG11/feature#Animation</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Font -->
  <rect class="ko" x="10" y="1085" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="1085"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Font" />
  <text x="20" y="1102">http://www.w3.org/TR/SVG11/feature#Font</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#BasicFont -->
  <rect class="ko" x="10" y="1110" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="1110"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicFont" />
  <text x="20" y="1127">http://www.w3.org/TR/SVG11/feature#BasicFont</text>

  <!-- Testing : http://www.w3.org/TR/SVG11/feature#Extensibility -->
  <rect class="ko" x="10" y="1135" height="25" width="430" />
  <rect
 class="ok"
 x="10"
 y="1135"
 height="25"
 width="430"
 requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" />
  <text x="20" y="1152">http://www.w3.org/TR/SVG11/feature#Extensibility</text>
</svg>
```

### CSS

```css
.ko {
  fill: #900;
}

.ok {
  fill: #060;
}

rect {
  stroke: #000;
  stroke-width: 2px;
}

text {
  fill: #fff;
  font: 12px sans-serif;
}
```

### Result

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

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

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

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


stroke-linecap - SVG: Scalable Vector Graphics

stroke-linecap
==============

The **`stroke-linecap`** attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the (default) "butt" value -->
  <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "round" value -->
  <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "square" value -->
  <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | `butt` | `round` | `square` |
| Default value | `butt` |
| Animatable | discrete |

### butt

The `butt` value indicates that the stroke for each subpath does not extend beyond its two endpoints. On a zero length subpath, the path will not be rendered at all.

#### Example
```

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

```html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "butt" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "butt" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="butt" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
```

### round

The `round` value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width. On a zero length subpath, the stroke consists of a full circle centered at the subpath's point.

#### Example
```

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

```html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "round" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="round" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
```

### square

The `square` value indicates that at the end of each subpath the stroke will be extended by a rectangle with a width equal to half the width of the stroke and a height equal to the width of the stroke. On a zero length subpath, the stroke consists of a square with its width equal to the stroke width, centered at the subpath's point.

#### Example
```

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

```html
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "square" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="square" />

  <!-- Effect of the "square" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="square" />

  <!--
 the following pink lines highlight the
 position of the path for each stroke
 -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>
```

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

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

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

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


style - SVG: Scalable Vector Graphics

style
=====

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

You can use this attribute with any SVG element.

Example
-------
```

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

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

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

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

`<style>`

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

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

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

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

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

See also
--------

* `<style>`
* HTML `style` attribute


stemh - SVG: Scalable Vector Graphics

stemh
=====

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`stemh`** attribute indicates the horizontal stem width of the font.

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

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

You can use this attribute with the following SVG elements:

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

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

`<number>`

This value indicates the horizontal stem width of the font.

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

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

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

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

See also
--------

* `stemv`


widths - SVG: Scalable Vector Graphics

widths
======

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`widths`** attribute indicates a list of range values, each followed by one or more glyph widths.

You can use this attribute with the following SVG elements:

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

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

`<number>`

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

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

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

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

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

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

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

See also
--------

* ISO 10646


shape-rendering - SVG: Scalable Vector Graphics

shape-rendering
===============

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

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

`auto`

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

`optimizeSpeed`

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

`crispEdges`

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

`geometricPrecision`

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

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

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

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

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


id - SVG: Scalable Vector Graphics

id
==

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

You can use this attribute with any SVG element.

Example
-------

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

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

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

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

<id>

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

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

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

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

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

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

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

See also
--------

* HTML `id`
* `class`


operator - SVG: Scalable Vector Graphics

operator
========

The **`operator`** attribute has two meanings based on the context it's used in. Either it defines the compositing or morphing operation to be performed.

You can use this attribute with the following SVG elements:

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

html,
body,
svg {
  height: 100%;
  font:
    20px Arial,
    Helvetica,
    sans-serif;
}
```

```html
<svg viewBox="0 0 120 70" xmlns="http://www.w3.org/2000/svg">
  <filter id="erode">
    <feMorphology operator="erode" radius="0.4" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="0.8" />
  </filter>

  <text x="0" y="15">Normal text</text>
  <text x="0" y="40" filter="url(#erode)">Thin text</text>
  <text x="0" y="65" filter="url(#dilate)">Fat text</text>
</svg>
```

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

For `<feComposite>`, `operator` defines the compositing operation that is to be performed.

|  |  |
| --- | --- |
| Value | `over` | `in` | `out` |
 `atop` | `xor` | `lighter` |
 `arithmetic` |
| Default value | `over` |
| Animatable | Yes |

`over`

This value indicates that the source graphic defined in the `in` attribute is placed over the destination graphic defined in the `in2` attribute.

`in`

This value indicates that the parts of the source graphic defined in the `in` attribute that overlap the destination graphic defined in the `in2` attribute, replace the destination graphic.

`out`

This value indicates that the parts of the source graphic defined in the `in` attribute that fall outside the destination graphic defined in the `in2` attribute, are displayed.

`atop`

This value indicates that the parts of the source graphic defined in the `in` attribute, which overlap the destination graphic defined in the `in2` attribute, replace the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched.

`xor`

This value indicates that the non-overlapping regions of the source graphic defined in the `in` attribute and the destination graphic defined in the `in2` attribute are combined.

`lighter`

This value indicates that the sum of the source graphic defined in the `in` attribute and the destination graphic defined in the `in2` attribute is displayed.

`arithmetic`

This value indicates that the source graphic defined in the `in` attribute and the destination graphic defined in the `in2` attribute are combined using the following formula:

`result = k1*i1*i2 + k2*i1 + k3*i2 + k4`

 where:
 `i1` and `i2` indicate the corresponding pixel channel values of the input image, which map to `in` and `in2` respectively, and `k1`, `k2`, `k3`, and `k4` indicate the values of the attributes with the same name.

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

For `<feMorphology>`, `operator` defines whether to erode (i.e., thin) or dilate (fatten) the source graphic.

|  |  |
| --- | --- |
| Value | `erode` | `dilate` |
| Default value | `erode` |
| Animatable | Yes |

`erode`

This value thins the source graphic defined in the `in` attribute.

`dilate`

This value fattens the source graphic defined in the `in` attribute.

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

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


pathLength - SVG: Scalable Vector Graphics

pathLength
==========

The **`pathLength`** attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance computations using the ratio `pathLength` / (*computed value of path length*).

This can affect the actual rendered lengths of paths; including text paths, animation paths, and various stroke operations. Basically, all computations that require the length of the path. `stroke-dasharray`, for example, will assume the start of the path being 0 and the end point the value defined in the `pathLength` attribute.

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
  <style>
 path {
 fill: none;
 stroke: black;
 stroke-width: 2;
 stroke-dasharray: 10;
 }
 </style>

  <!-- No pathLength, the real length of the path is used. In that case, 100 user units -->
  <path d="M 0,10 h100" />

  <!-- compute everything like if the path length was 90 user units long -->
  <path d="M 0,20 h100" pathLength="90" />

  <!-- compute everything like if the path length was 50 user units long -->
  <path d="M 0,30 h100" pathLength="50" />

  <!-- compute everything like if the path length was 30 user units long -->
  <path d="M 0,40 h100" pathLength="30" />

  <!-- compute everything like if the path length was 10 user units long -->
  <path d="M 0,50 h100" pathLength="10" />
</svg>
```

circle
------

For `<circle>`, `pathLength` lets authors specify a total length for the circle, in user units.

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

ellipse
-------

For `<ellipse>`, `pathLength` lets authors specify a total length for the ellipse, in user units.

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

line
----

For `<line>`, `pathLength` lets authors specify a total length for the line, in user units.

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

path
----

For `<path>`, `pathLength` lets authors specify a total length for the path, in user units.

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

polygon
-------

For `<polygon>`, `pathLength` lets authors specify a total length for the shape, in user units.

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

polyline
--------

For `<polyline>`, `pathLength` lets authors specify a total length for the shape, in user units.

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

rect
----

For `<rect>`, `pathLength` lets authors specify a total length for the rectangle, in user units.

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

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

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


xml:base - SVG: Scalable Vector Graphics

xml:base
========

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`xml:base`** attribute specifies a base IRI other than the base IRI of the document or external entity.

You can use this attribute with any SVG element.

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

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

`<iri>`

This value specifies the base IRI of the element.

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

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

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

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

See also
--------

* XML Base specification


accumulate - SVG: Scalable Vector Graphics

accumulate
==========

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

It is frequently useful for repeated animations to build upon the previous results, accumulating with each iteration. This attribute said to the animation if the value is added to the previous animated attribute's value on each iteration.

You can use this attribute with the following SVG elements:

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

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

`sum`

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

`none`

Specifies that repeat iterations are not cumulative.

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

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

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

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

See also
--------

* SMIL Animation specification


stroke-miterlimit - SVG: Scalable Vector Graphics

stroke-miterlimit
=================

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

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

stroke-miterlimit
=

miterLength

stroke-width

=

1

sin

(

θ

2

)

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

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

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

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

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

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

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

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


fx - SVG: Scalable Vector Graphics

fx
==

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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


glyph-orientation-vertical - SVG: Scalable Vector Graphics

glyph-orientation-vertical
==========================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The **`glyph-orientation-vertical`** attribute affects the amount that the current text position advances as each glyph is rendered.

When the inline-progression-direction is vertical and the `glyph-orientation-vertical` results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph. Otherwise, if the angle is not a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.

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

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

You can use this attribute with the following SVG elements:

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

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

`auto`

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

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

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

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

`<angle>`

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

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

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

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

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


begin - SVG: Scalable Vector Graphics

begin
=====

The **`begin`** attribute defines when an animation should begin.

The attribute value is a semicolon separated list of values. The interpretation of a list of start times is detailed in the SMIL specification in "Evaluation of begin and end time lists". Each individual value can be one of the following: `<offset-value>`, `<syncbase-value>`, `<event-value>`, `<repeat-value>`, `<accessKey-value>`, `<wallclock-sync-value>` or the keyword `indefinite`.

You can use this attribute with the following SVG elements:

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

For `<animate>`, `<animateMotion>`, `<animateTransform>`, and `<set>`, `begin` defines when the element should begin, i.e. become active.

|  |  |
| --- | --- |
| Value | `<begin-value-list>` |
| Default value | `0s` |
| Animatable | No |

The `<begin-value-list>` is a semicolon-separated list of values. Each value can be one of the following:

`<offset-value>`

This value defines a clock-value that represents a point in time relative to the beginning of the SVG document (usually the `load` or `DOMContentLoaded` event). Negative values are valid.

`<syncbase-value>`

This value defines a *syncbase* and an optional offset from that *syncbase*. The element's animation start time is defined relative to the begin or active end of another animation.

A valid syncbase-value consists of an ID reference to another animation element followed by a dot and either `begin` or `end` to identify whether to synchronize with the beginning or active end of the referenced animation element. An optional offset value as defined in `<offset-value>` can be appended.

`<event-value>`

This value defines an event and an optional offset that determines the time at which the element's animation should begin. The animation start time is defined relative to the time that the specified event is fired.

A valid event-value consists of an element ID followed by a dot and one of the supported events for that element. All valid events (not necessarily supported by all elements) are defined by the DOM and HTML specifications. Those are:

* `focus`
* `blur`
* `focusin`
* `focusout`
* `DOMActivate`
* `auxclick`
* `click`
* `dblclick`
* `mousedown`
* `mouseenter`
* `mouseleave`
* `mousemove`
* `mouseout`
* `mouseover`
* `mouseup`
* `wheel`
* `beforeinput`
* `input`
* `keydown`
* `keyup`
* `compositionstart`
* `compositionupdate`
* `compositionend`
* `load`
* `unload`
* `abort`
* `error`
* `select`
* `resize`
* `scroll`
* `beginEvent`
* `endEvent`
* `repeatEvent`

An optional offset value as defined in `<offset-value>` can be appended.

`<repeat-value>`

This value defines a qualified repeat event. The element animation start time is defined relative to the time that the repeat event is raised with the specified iteration value.

A valid repeat value consists of an element ID followed by a dot and the function `repeat()` with an integer value specifying the number of repetitions as parameter. An optional offset value as defined in `<offset-value>` can be appended.

`<accessKey-value>`

This value defines an access key that should trigger the animation. The element animation will begin when the user presses the specified key.

A valid accessKey-value consists of the function `accessKey()` with the character to be input as parameter. An optional offset value as defined in `<offset-value>` can be appended.

`<wallclock-sync-value>`

This value defines the animation start time as a real-world clock time.

A valid wallclock-sync-value consists of the function `wallclock()` with a time value as parameter. The time syntax is based upon the syntax defined in ISO 8601.

`indefinite`

The begin of the animation will be determined by a `beginElement()` method call or a hyperlink targeted to the element.

Examples
--------

### Offset example

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="100"
 begin="0s"
 dur="8s"
 fill="freeze" />
  </rect>

  <rect x="35" y="60" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="75"
 begin="2s"
 dur="6s"
 fill="freeze" />
  </rect>

  <rect x="60" y="85" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="50"
 begin="4s"
 dur="4s"
 fill="freeze" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>
```

begin-1-offset.svg

### Syncbase example

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="50"
 id="first"
 begin="0s;third.end"
 dur="4s" />
  </rect>

  <rect x="60" y="60" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="25"
 id="second"
 begin="first.end"
 dur="2s" />
  </rect>

  <rect x="85" y="85" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 to="25"
 id="third"
 begin="second.end"
 dur="2s" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>
```

begin-2-syncbase.svg

### Event example

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 begin="startButton.click"
 dur="8s"
 fill="freeze" />
  </rect>

  <!-- trigger -->
  <rect
 id="startButton"
 style="cursor:pointer;"
 x="19.5"
 y="62.5"
 rx="5"
 height="25"
 width="80"
 fill="#EFEFEF"
 stroke="black"
 stroke-width="1" />

  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Click me.
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

begin-3-event.svg

### Repeat example

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 id="myLoop"
 begin="0s;myLoop.end"
 dur="4s"
 repeatCount="3" />

    <set
 attributeType="CSS"
 attributeName="fill"
 to="green"
 begin="myLoop.begin" />

    <set
 attributeType="CSS"
 attributeName="fill"
 to="gold"
 begin="myLoop.repeat(1)" />

    <set
 attributeType="CSS"
 attributeName="fill"
 to="red"
 begin="myLoop.repeat(2)" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">1s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">2s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">3s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">4s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

begin-4-repeat.svg

### Accesskey example

```html
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
 attributeType="XML"
 attributeName="width"
 from="0"
 to="100"
 begin="accessKey(s)"
 dur="8s"
 fill="freeze" />
  </rect>

  <!-- trigger -->
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Hit the "s" key
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>
```

*This example is embedded in an iFrame. If you want to activate the key events, you have to click on it first.*

begin-5-accesskey.svg

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

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


radius - SVG: Scalable Vector Graphics

radius
======

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

If two numbers are provided, the first number represents the x-radius and the second one the y-radius. If one number is provided, then that value is used for both x and y. The values are in the coordinate system established by the `primitiveUnits` attribute on the `<filter>` element.

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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


k2 - SVG: Scalable Vector Graphics

k2
==

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

The pixel composition is computed using the following formula:

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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


lighting-color - SVG: Scalable Vector Graphics

lighting-color
==============

The **`lighting-color`** attribute defines the color of the light source for lighting filter primitives.

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" lighting-color="white">
      <fePointLight x="60" y="60" z="20" />
    </feDiffuseLighting>
  </filter>
  <filter id="diffuseLighting2" x="0" y="0" width="100%" height="100%">
    <feDiffuseLighting in="SourceGraphic" lighting-color="blue">
      <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>
```

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

|  |  |
| --- | --- |
| Value | `color` |
| Default value | `white` |
| Animatable | Yes |

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

| Specification |
| --- |
| Filter Effects Module Level 1 # LightingColorProperty |

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

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

See also
--------

* Description of Phong reflection model on Wikipedia


yChannelSelector - SVG: Scalable Vector Graphics

yChannelSelector
================

The **`yChannelSelector`** attribute indicates which color channel from `in2` to use to displace the pixels in `in` along the y-axis.

You can use this attribute with the following SVG elements:

* `<feDisplacementMap>`
Example
-------
```

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

```html
<svg viewBox="0 0 440 160" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feImage
 href="mdn.svg"
 x="0"
 y="0"
 width="100%"
 height="100%"
 result="abc" />
    <feDisplacementMap
 in2="abc"
 in="SourceGraphic"
 scale="30"
 yChannelSelector="R" />
  </filter>
  <filter id="displacementFilter2">
    <feImage
 href="mdn.svg"
 x="0"
 y="0"
 width="100%"
 height="100%"
 result="abc" />
    <feDisplacementMap
 in2="abc"
 in="SourceGraphic"
 scale="30"
 yChannelSelector="B" />
  </filter>

  <text x="10" y="60" font-size="50" filter="url(#displacementFilter)">
    Some displaced text
  </text>
  <text x="10" y="120" font-size="50" filter="url(#displacementFilter2)">
    Some displaced text
  </text>
</svg>
```

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

|  |  |
| --- | --- |
| Value | `R` | `G` | `B` | `A` |
| Default value | `A` |
| Animatable | Yes |

`R`

This keyword specifies that the red color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the y-axis.

`G`

This keyword specifies that the green color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the y-axis.

`B`

This keyword specifies that the blue color channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the y-axis.

`A`

This keyword specifies that the alpha channel of the input image defined in `in2` will be used to displace the pixels of the input image defined in `in` along the y-axis.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # element-attrdef-fedisplacementmap-ychannelselector |

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

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


tabindex - SVG: Scalable Vector Graphics

tabindex
========

The **`tabindex`** attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.

You can use this attribute with any SVG element.

Example
-------
```

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

```html
<?xml version="1.0"?>
<svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="15" tabindex="0" />
  <circle cx="60" cy="160" r="30" tabindex="0" />
  <circle cx="160" cy="60" r="30" tabindex="0" />
  <circle cx="160" cy="160" r="60" tabindex="0" />
</svg>
```

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

|  |  |
| --- | --- |
| Value | valid integer |
| Default value | *None* |
| Animatable | No |

valid integer

Relative order of the element for the purposes of sequential focus navigation.

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

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

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

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

See also
--------

* HTML `tabindex`


g2 - SVG: Scalable Vector Graphics

g2
==

**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 **`g2`** attribute specifies a list of glyph names which identify a set of possible second glyphs in the kerning pair.

All glyphs with the given glyph name are included in the set. The total set of possible second glyphs in the kerning pair is the union of glyphs specified by the `u2` and `g2` attributes.

You can use this attribute with the following SVG elements:

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

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

`<name>#`

This value indicates a comma-separated sequence of glyph names (i.e., values that match `glyph-name` attributes on `<glyph>` elements) which identify a set of possible second glyphs in the kerning pair.

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

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

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

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