cap-height - SVG: Scalable Vector Graphics

cap-height
==========

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

The **`cap-height`** attribute defines the height of uppercase glyphs of the font within the font coordinate system.

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

See also
--------

* `x-height`
* `accent-height`


restart - SVG: Scalable Vector Graphics

restart
=======

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

`always`

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

`whenNotActive`

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

`never`

This value indicates that the animation cannot be restarted.

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

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


marker-end - SVG: Scalable Vector Graphics

marker-end
==========

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

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

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

`none`

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

`<marker-ref>`

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

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

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

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

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

See also
--------

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


fy - SVG: Scalable Vector Graphics

fy
==

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

You can use this attribute with the following SVG elements:

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

### Example 1
```

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

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

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

### Example 2

```html
<svg
 viewBox="0 0 120 120"
 width="200"
 height="200"
 xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient
 id="Gradient"
 cx="0.5"
 cy="0.5"
 r="0.5"
 fx="0.35"
 fy="0.35"
 fr="5%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>

  <rect
 x="10"
 y="10"
 rx="15"
 ry="15"
 width="100"
 height="100"
 fill="url(#Gradient)"
 stroke="black"
 stroke-width="2" />

  <circle
 cx="60"
 cy="60"
 r="50"
 fill="transparent"
 stroke="white"
 stroke-width="2" />
  <circle cx="35" cy="35" r="2" fill="white" stroke="white" />
  <circle cx="60" cy="60" r="2" fill="white" stroke="white" />
  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">
    (fx,fy)
  </text>
  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">
    (cx,cy)
  </text>
</svg>
```

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

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

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

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

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

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


media - SVG: Scalable Vector Graphics

media
=====

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

`<media-query-list>`

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

If not specified, the style sheet is applied unconditionally.

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

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

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

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


fill - SVG: Scalable Vector Graphics

fill
====

The **`fill`** attribute has two different meanings. For shapes and text it's a presentation attribute that defines the color (*or any SVG paint servers like gradients or patterns*) used to paint the element; for animation it defines the final state of the animation.

You can use this attribute with the following SVG elements:

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

For animation, these elements are using this attribute: `<animate>`, `<animateMotion>`, `<animateTransform>`, and `<set>`.

Example
-------
```

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

```html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color fill -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Fill circle with a gradient -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%" stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />

  <!--
 Keeping the final state of an animated circle
 which is a circle with a radius of 40.
 -->
  <circle cx="250" cy="50" r="20">
    <animate
 attributeType="XML"
 attributeName="r"
 from="0"
 to="40"
 dur="5s"
 fill="freeze" />
  </circle>
</svg>
```

animate
-------

For `<animate>`, `fill` defines the final state of the animation.

|  |  |
| --- | --- |
| Value | `freeze` (*Keep the state of the last animation frame*) | `remove` (*Keep the state of the first animation frame*) |
| Default value | `remove` |
| Animatable | No |

animateMotion
-------------

For `<animateMotion>`, `fill` defines the final state of the animation.

|  |  |
| --- | --- |
| Value | `freeze` (*Keep the state of the last animation frame*) | `remove` (*Keep the state of the first animation frame*) |
| Default value | `remove` |
| Animatable | No |

animateTransform
----------------

For `<animateTransform>`, `fill` defines the final state of the animation.

|  |  |
| --- | --- |
| Value | `freeze` (*Keep the state of the last animation frame*) | `remove` (*Keep the state of the first animation frame*) |
| Default value | `remove` |
| Animatable | No |

circle
------

For `<circle>`, `fill` is a presentation attribute that defines the color of the circle.

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

ellipse
-------

For `<ellipse>`, `fill` is a presentation attribute that defines the color of the ellipse.

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

path
----

For `<path>`, `fill` is a presentation attribute that defines the color of the interior of the shape. (*Interior is define by the `fill-rule` attribute*)

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

polygon
-------

For `<polygon>`, `fill` is a presentation attribute that defines the color of the interior of the shape. (*Interior is define by the `fill-rule` attribute*)

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

polyline
--------

For `<polyline>`, `fill` is a presentation attribute that defines the color of the interior of the shape. (*Interior is define by the `fill-rule` attribute*)

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

rect
----

For `<rect>`, `fill` is a presentation attribute that defines the color of the rectangle.

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

set
---

For `<set>`, `fill` defines the final state of the animation.

|  |  |
| --- | --- |
| Value | `freeze` (*Keep the state of the last animation frame*) | `remove` (*Keep the state of the first animation frame*) |
| Default value | `remove` |
| Animatable | No |

text
----

For `<text>`, `fill` is a presentation attribute that defines the color of the text.

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

textPath
--------

For `<textPath>`, `fill` is a presentation attribute that defines the color of the text.

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

tref
----

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

For `<tref>`, `fill` is a presentation attribute that defines the color of the text.

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

tspan
-----

For `<tspan>`, `fill` is a presentation attribute that defines the color of the text.

|  |  |
| --- | --- |
| Value | **<paint>** |
| Default value | `black` |
| Animatable | Yes |

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

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

| Specification |
| --- |
| SVG Animations Level 2 # FillAttribute |
| Scalable Vector Graphics (SVG) 2 # SpecifyingFillPaint |

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

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


stroke-opacity - SVG: Scalable Vector Graphics

stroke-opacity
==============

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

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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

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

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

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

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


d - SVG: Scalable Vector Graphics

d
=

The **`d`** attribute defines a path to be drawn.

 A path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters.
 The commands are detailed below.

You can use this attribute with the following SVG elements: `<path>`, `<glyph>`, `<missing-glyph>`.

`d` is a presentation attribute, and hence can also be used as a CSS property.

Example
-------
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 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" />
</svg>
```

path
----

For `<path>`, `d` is a string containing a series of path commands that define the path to be drawn.

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

glyph
-----

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

For `<glyph>`, `d` is a string containing a series of path commands that define the outline shape of the glyph.

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

**Note:** The point of origin (the coordinate `0`, `0`) is usually the *upper left corner* of the context. However the `<glyph>` element has its origin in the *bottom left corner* of its letterbox.

missing-glyph
-------------

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

For `<missing-glyph>`, `d` is a string containing a series of path commands that define the outline shape of the glyph.

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

Using d as a CSS property
-------------------------

`d` is a presentation attribute, and hence can be also be modified using CSS.
 The property takes either path() or `none`.

 The example below shows how you might apply a new path on hover over an element.
 The new path is the same as the old one, but adds a line across the heart.

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

/\* This path is displayed on hover\*/
#svg\_css\_ex1:hover path {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90"
  );
}
```

```html
<svg id="svg\_css\_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 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
 " />
</svg>
```

Path commands
-------------

Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.

SVG defines 6 types of path commands, for a total of 20 commands:

* MoveTo: `M`, `m`
* LineTo: `L`, `l`, `H`, `h`, `V`, `v`
* Cubic Bézier Curve: `C`, `c`, `S`, `s`
* Quadratic Bézier Curve: `Q`, `q`, `T`, `t`
* Elliptical Arc Curve: `A`, `a`
* ClosePath: `Z`, `z`

**Note:** Commands are *case-sensitive*. An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position.

It is always possible to specify a negative value as an argument to a command:

* negative angles will be anti-clockwise;
* *absolute* negative *x* and *y* values are interpreted as negative coordinates;
* *relative* negative *x* values move to the left, and relative negative *y* values move upwards.
### MoveTo path commands

*MoveTo* instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else—in other words, moving the *current point* (*Po*; {*xo*, *yo*}). There is no line drawn between *Po* and the new *current point* (*Pn*; {*xn*, *yn*}).

| Command | Parameters | Notes |
| --- | --- | --- |
| M | (`x`, `y`)+ |
 Move the *current point* to the coordinate
 `x`,`y`. Any subsequent coordinate pair(s) are interpreted as parameter(s)
 for implicit absolute LineTo (`L`) command(s) (*see below*).

**Formula:** Pn = {`x`, `y`} |
| m | (`dx`, `dy`)+ |
 Move the *current point* by shifting the last known position of
 the path by `dx` along the x-axis and by
 `dy` along the y-axis. Any subsequent coordinate
 pair(s) are interpreted as parameter(s) for implicit relative LineTo
 (`l`) command(s) (*see below*).

**Formula:** Pn = {xo
 + `dx`, yo + `dy`}
  |

#### Examples
```

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

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path
 fill="none"
 stroke="red"
 d="M 10,10 h 10
 m 0,10 h 10
 m 0,10 h 10
 M 40,20 h 10
 m 0,10 h 10
 m 0,10 h 10
 m 0,10 h 10
 M 50,50 h 10
 m-20,10 h 10
 m-20,10 h 10
 m-20,10 h 10" />
</svg>
```

### LineTo path commands

*LineTo* instructions draw a straight line from the *current point* (*Po*; {*xo*, *yo*}) to the *end point* (*Pn*; {*xn*, *yn*}), based on the parameters specified. The *end point* (*Pn*) then becomes the *current point* for the next command (*Po′*).

| Command | Parameters | Notes |
| --- | --- | --- |
| L | (`x`, `y`)+ |
 Draw a line from the *current point* to the
 *end point* specified by `x`,`y`. Any subsequent coordinate pair(s) are interpreted as parameter(s)
 for implicit absolute LineTo (`L`) command(s).

**Formula:** Po′ =
 Pn = {`x`, `y`}
  |
| l | (`dx`, `dy`)+ |
 Draw a line from the *current point* to the
 *end point,* which is the *current point* shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. Any subsequent coordinate
 pair(s) are interpreted as parameter(s) for implicit relative LineTo
 (`l`) command(s) (*see below*).

**Formula:** Po′ =
 Pn = {xo +
 `dx`, yo + `dy`}
  |
| H | `x`+ |
 Draw a horizontal line from the *current point* to the
 *end point*, which is specified by the
 `x` parameter and the *current point's*
`y` coordinate. Any subsequent value(s) are interpreted as
 parameter(s) for implicit absolute horizontal LineTo (`H`)
 command(s).

**Formula:** Po′ =
 Pn = {`x`, yo}
  |
| h | `dx`+ |
 Draw a horizontal line from the *current point* to the
 *end point,* which is specified by the
 *current point* shifted by `dx` along the
 x-axis and the *current point's* `y` coordinate. Any
 subsequent value(s) are interpreted as parameter(s) for implicit
 relative horizontal LineTo (`h`) command(s).

**Formula:** Po′ =
 Pn = {xo +
 `dx`, yo}
  |
| V | `y`+ |
 Draw a vertical line from the *current point* to the
 *end point*, which is specified by the
 `y` parameter and the *current point's*
`x` coordinate. Any subsequent values are interpreted as
 parameters for implicit absolute vertical LineTo (`V`)
 command(s).

**Formula:** Po′ =
 Pn = {xo, `y`}
  |
| v | `dy`+ |
 Draw a vertical line from the *current point* to the
 *end point,* which is specified by the
 *current point* shifted by `dy` along the
 y-axis and the *current point's* `x` coordinate. Any
 subsequent value(s) are interpreted as parameter(s) for implicit
 relative vertical LineTo (`v`) command(s).

**Formula:** Po′ =
 Pn = {xo, yo + `dy`}
  |

#### Examples
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- LineTo commands with absolute coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 10,10
 L 90,90
 V 10
 H 50" />

  <!-- LineTo commands with relative coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 110,10
 l 80,80
 v -80
 h -40" />
</svg>
```

### Cubic Bézier Curve

*Cubic Bézier curves* are smooth curve definitions using four points:

starting point (current point)

(*Po* = {*xo*, *yo*})

end point

(*Pn* = {*xn*, *yn*})

start control point

 (*Pcs* = {*xcs*, *ycs*})
 (controls curvature near the start of the curve)

end control point

 (*Pce* = {*xce*, *yce*})
 (controls curvature near the end of the curve)

After drawing, the *end point* (*Pn*) becomes the *current point* for the next command (*Po′*).

| Command | Parameters | Notes |
| --- | --- | --- |
| C | (`x1`,`y1`, `x2`,`y2`, `x`,`y`)+ |
 Draw a cubic Bézier curve from the *current point* to the
 *end point* specified by `x`,`y`. The *start control point* is specified by
 `x1`,`y1` and the *end control point* is
 specified by `x2`,`y2`. Any subsequent triplet(s) of coordinate pairs are interpreted as
 parameter(s) for implicit absolute cubic Bézier curve (`C`)
 command(s).

Formulae:
Po′ = Pn = {`x`, `y`} ;Pcs = {`x1`, `y1`} ;Pce = {`x2`, `y2`}
 |
| c | (`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+ |
 Draw a cubic Bézier curve from the *current point* to the
 *end point,* which is the *current point* shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. The
 *start control point* is the *current point* (starting
 point of the curve) shifted by `dx1` along the
 x-axis and `dy1` along the y-axis. The
 *end control point* is the *current point* (starting
 point of the curve) shifted by `dx2` along the
 x-axis and `dy2` along the y-axis. Any
 subsequent triplet(s) of coordinate pairs are interpreted as
 parameter(s) for implicit relative cubic Bézier curve (`c`)
 command(s).

Formulae:

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pcs = {xo +
 `dx1`, yo + `dy1`} ;Pce = {xo +
 `dx2`, yo + `dy2`}

 |
| S | (`x2`,`y2`, `x`,`y`)+ |
 Draw a smooth cubic Bézier curve from the *current point* to the
 *end point* specified by `x`,`y`. The *end control point* is specified by
 `x2`,`y2`. The *start control point* is the reflection of the
 *end control point* of the previous curve command about the *current point*. If the
 previous command wasn't a cubic Bézier curve, the
 *start control point* is the same as the curve starting point
 (*current point*). Any subsequent pair(s) of coordinate pairs are
 interpreted as parameter(s) for implicit absolute smooth cubic Bézier
 curve (`S`) commands.
  |
| s | (`dx2`,`dy2`, `dx`,`dy`)+ |
 Draw a smooth cubic Bézier curve from the *current point* to the
 *end point*, which is the *current point* shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. The
 *end control point* is the *current point* (starting point
 of the curve) shifted by `dx2` along the x-axis
 and `dy2` along the y-axis. The
 *start control point* is the reflection of the
 *end control point* of the previous curve command about the *current point*. If the
 previous command wasn't a cubic Bézier curve, the
 *start control point* is the same as the curve starting point
 (*current point*). Any subsequent pair(s) of coordinate pairs are
 interpreted as parameter(s) for implicit relative smooth cubic Bézier
 curve (`s`) commands.
  |

#### Examples
```

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

```html
<svg
 viewBox="0 0 200 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Cubic Bézier curve with absolute coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 10,90
 C 30,90 25,10 50,10
 S 70,90 90,90" />

  <!-- Cubic Bézier curve with relative coordinates -->
  <path
 fill="none"
 stroke="red"
 d="M 110,90
 c 20,0 15,-80 40,-80
 s 20,80 40,80" />

  <!-- Highlight the curve vertex and control points -->
  <g id="ControlPoints">
    <!-- First cubic command control points -->
    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
    <circle cx="30" cy="90" r="1.5" />

    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
    <circle cx="25" cy="10" r="1.5" />

    <!-- Second smooth command control points (the first one is implicit) -->
    <line
 x1="50"
 y1="10"
 x2="75"
 y2="10"
 stroke="lightgrey"
 stroke-dasharray="2" />
    <circle cx="75" cy="10" r="1.5" fill="lightgrey" />

    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
    <circle cx="70" cy="90" r="1.5" />

    <!-- curve vertex points -->
    <circle cx="10" cy="90" r="1.5" />
    <circle cx="50" cy="10" r="1.5" />
    <circle cx="90" cy="90" r="1.5" />
  </g>
  <use href="#ControlPoints" x="100" />
</svg>
```

### Quadratic Bézier Curve

*Quadratic Bézier curves* are smooth curve definitions using three points:

starting point (current point)

*Po* = {*xo*, *yo*}

end point

*Pn* = {*xn*, *yn*}

control point

*Pc* = {*xc*, *yc*}
 (controls curvature)

After drawing, the *end point* (*Pn*) becomes the *current point* for the next command (*Po′*).

| Command | Parameters | Notes |
| --- | --- | --- |
| Q | (`x1`,`y1`, `x`,`y`)+ |
 Draw a quadratic Bézier curve from the *current point* to the
 *end point* specified by `x`,`y`. The *control point* is specified by
 `x1`,`y1`. Any subsequent pair(s) of coordinate pairs are interpreted as
 parameter(s) for implicit absolute quadratic Bézier curve
 (`Q`) command(s).

**Formulae:**
Po′ = Pn = {`x`, `y`} ;Pc = {`x1`, `y1`}
 |
| q | (`dx1`,`dy1`, `dx`,`dy`)+ |
 Draw a quadratic Bézier curve from the *current point* to the
 *end point*, which is the *current point* shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. The
 *control point* is the *current point* (starting point
 of the curve) shifted by `dx1` along the x-axis
 and `dy1` along the y-axis. Any subsequent
 pair(s) of coordinate pairs are interpreted as parameter(s) for
 implicit relative quadratic Bézier curve (`q`) command(s).

Formulae:

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pc = {xo +
 `dx1`, yo + `dy1`}

 |
| T | (`x`,`y`)+ |
 Draw a smooth quadratic Bézier curve from the
 *current point* to the *end point* specified by
 `x`,`y`. The *control point* is the reflection of the
 *control point* of the previous curve command about the *current point*. If the previous
 command wasn't a quadratic Bézier curve, the *control point* is
 the same as the curve starting point (*current point*). Any
 subsequent coordinate pair(s) are interpreted as parameter(s) for
 implicit absolute smooth quadratic Bézier curve (`T`)
 command(s).

Formula:
Po′ = Pn = {`x`, `y`}
 |
| t | (`dx`,`dy`)+ |
 Draw a smooth quadratic Bézier curve from the
 *current point* to the *end point*, which is the
 *current point* shifted by `dx` along the
 x-axis and `dy` along the y-axis. The
 *control point* is the reflection of the
 *control point* of the previous curve command about the *current point*. If the previous
 command wasn't a quadratic Bézier curve, the *control point* is
 the same as the curve starting point (*current point*). Any
 subsequent coordinate pair(s) are interpreted as parameter(s) for
 implicit relative smooth quadratic Bézier curve (`t`)
 command(s).

Formulae:

Po′ = Pn = {xo
 + `dx`, yo + `dy`}

 |

#### Examples
```

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

```html
<svg
 viewBox="0 0 200 100"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Quadratic Bézier curve with implicit repetition -->
  <path
 fill="none"
 stroke="red"
 d="M 10,50
 Q 25,25 40,50
 t 30,0 30,0 30,0 30,0 30,0" />

  <!-- Highlight the curve vertex and control points -->
  <g>
    <polyline
 points="10,50 25,25 40,50"
 stroke="rgb(0 0 0 / 20%)"
 fill="none" />
    <circle cx="25" cy="25" r="1.5" />

    <!-- Curve vertex points -->
    <circle cx="10" cy="50" r="1.5" />
    <circle cx="40" cy="50" r="1.5" />

    <g id="SmoothQuadraticDown">
      <polyline
 points="40,50 55,75 70,50"
 stroke="rgb(0 0 0 / 20%)"
 stroke-dasharray="2"
 fill="none" />
      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
      <circle cx="70" cy="50" r="1.5" />
    </g>

    <g id="SmoothQuadraticUp">
      <polyline
 points="70,50 85,25 100,50"
 stroke="rgb(0 0 0 / 20%)"
 stroke-dasharray="2"
 fill="none" />
      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
      <circle cx="100" cy="50" r="1.5" />
    </g>

    <use href="#SmoothQuadraticDown" x="60" />
    <use href="#SmoothQuadraticUp" x="60" />
    <use href="#SmoothQuadraticDown" x="120" />
  </g>
</svg>
```

### Elliptical Arc Curve

*Elliptical arc curves* are curves defined as a portion of an ellipse. It is sometimes easier to draw highly regular curves with an elliptical arc than with a Bézier curve.

| Command | Parameters | Notes |
| --- | --- | --- |
| A |
 (`rx` `ry`
`angle` `large-arc-flag`
`sweep-flag` `x`
`y`)+
  |
 Draw an Arc curve from the current point to the coordinate
 `x`,`y`. The center of the ellipse used to draw the arc is determined
 automatically based on the other parameters of the command:
 * `rx` and `ry` are the
 two radii of the ellipse;
* `angle` represents a rotation (in degrees) of
 the ellipse relative to the x-axis;
* `large-arc-flag` and
 `sweep-flag` allows to chose which arc must be
 drawn as 4 possible arcs can be drawn out of the other parameters.
    + `large-arc-flag` allows to chose one of
     the large arc (`1`) or small arc (`0`),
    + `sweep-flag` allows to chose one of the
     clockwise turning arc (`1`) or counterclockwise
     turning arc (`0`)

The coordinate `x`,`y` becomes the new current point for the next
 command. All subsequent sets of parameters are considered implicit
 absolute arc curve (`A`) commands.
  |
| a |
 (`rx` `ry`
`angle` `large-arc-flag`
`sweep-flag` `dx`
`dy`)+
  |
 Draw an Arc curve from the current point to a point for which
 coordinates are those of the current point shifted by
 `dx` along the x-axis and
 `dy` along the y-axis. The center of the ellipse
 used to draw the arc is determined automatically based on the other
 parameters of the command:
 * `rx` and `ry` are the
 two radii of the ellipse;
* `angle` represents a rotation (in degrees) of
 the ellipse relative to the x-axis;
* `large-arc-flag` and
 `sweep-flag` allows to chose which arc must be
 drawn as 4 possible arcs can be drawn out of the other parameters.
    + `large-arc-flag` allows a choice of large
     arc (`1`) or small arc (`0`),
    + `sweep-flag` allows a choice of a
     clockwise arc (`1`) or counterclockwise arc
     (`0`)

The current point gets its X and Y coordinates shifted by
 `dx` and `dy` for the next
 command. All subsequent sets of parameters are considered implicit
 relative arc curve (`a`) commands.
  |

#### Examples
```

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

```html
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- The influence of the arc flags with which the arc is drawn -->
  <path
 fill="none"
 stroke="red"
 d="M 6,10
 A 6 4 10 1 0 14,10" />

  <path
 fill="none"
 stroke="lime"
 d="M 6,10
 A 6 4 10 1 1 14,10" />

  <path
 fill="none"
 stroke="purple"
 d="M 6,10
 A 6 4 10 0 1 14,10" />

  <path
 fill="none"
 stroke="pink"
 d="M 6,10
 A 6 4 10 0 0 14,10" />
</svg>
```

### ClosePath

*ClosePath* instructions draw a straight line from the *current position* to the first point in the path.

| Command | Parameters | Notes |
| --- | --- | --- |
| Z, z |  |
 Close the current subpath by connecting the last point of the path with
 its initial point. If the two points are at different coordinates, a
 straight line is drawn between those two points.
  |

**Note:** The appearance of a shape closed with *ClosePath* may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the `stroke-linejoin` setting), rather than just being placed at the same coordinates.

#### Examples
```

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

```html
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
  <!--
 An open shape with the last point of
 the path different to the first one
 -->
  <path
 stroke="red"
 d="M 5,1
 l -4,8 8,0" />

  <!--
 An open shape with the last point of
 the path matching the first one
 -->
  <path
 stroke="red"
 d="M 15,1
 l -4,8 8,0 -4,-8" />

  <!--
 A closed shape with the last point of
 the path different to the first one
 -->
  <path
 stroke="red"
 d="M 25,1
 l -4,8 8,0
 z" />
</svg>
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # DProperty |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute |

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

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


rotate - SVG: Scalable Vector Graphics

rotate
======

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

You can use this attribute with the following SVG elements:

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

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

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

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

Examples
--------

### SVG

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

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

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

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

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

### Result

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

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


stop-color - SVG: Scalable Vector Graphics

stop-color
==========

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

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

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

You can use this attribute with the following SVG elements:

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

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

`currentcolor`

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

`<color>`

This value indicates a color value.

`<icccolor>`

This value refers to an ICC color profile.

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

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

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

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

See also
--------

* `stop-opacity`


preserveAlpha - SVG: Scalable Vector Graphics

preserveAlpha
=============

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

`true`

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

`false`

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

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

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

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

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


mathematical - SVG: Scalable Vector Graphics

mathematical
============

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

The **`mathematical`** attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for horizontally oriented glyph layouts. The value is an offset in the font coordinate system.

You can use this attribute with the following SVG elements:

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

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

`<number>`

This value indicates the alignment coordinate for the glyphs.

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

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

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

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


font-style - SVG: Scalable Vector Graphics

font-style
==========

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

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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

See also
--------

* `CSS font-style`


stitchTiles - SVG: Scalable Vector Graphics

stitchTiles
===========

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise1" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="noStitch" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence baseFrequency="0.025" stitchTiles="stitch" />
  </filter>

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

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

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

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

`noStitch`

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

`stitch`

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

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

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

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

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


keySplines - SVG: Scalable Vector Graphics

keySplines
==========

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

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

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

You can use this attribute with the following SVG elements:

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

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

```html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
 attributeName="cx"
 dur="4s"
 calcMode="spline"
 repeatCount="indefinite"
 values="60; 110; 60; 10; 60"
 keyTimes="0; 0.25; 0.5; 0.75; 1"
 keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
    <animate
 attributeName="cy"
 dur="4s"
 calcMode="spline"
 repeatCount="indefinite"
 values="10; 60; 110; 60; 10"
 keyTimes="0; 0.25; 0.5; 0.75; 1"
 keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
  </circle>
</svg>
```

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

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

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

`<control-point>`

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

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

Safari issues

`keyTimes` values should be separated with semicolon without space before, f.e: `keyTimes="0; 0.25; 0.5; 0.75; 1"`

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

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

See also
--------

* Bézier curve


k3 - SVG: Scalable Vector Graphics

k3
==

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

The pixel composition is computed using the following formula:

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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


xlink:type - SVG: Scalable Vector Graphics

xlink:type
==========

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

The **`xlink:type`** attribute identifies the type of XLink being used. In SVG, only simple links are available.

You can use this attribute with the following SVG elements:

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

|  |  |
| --- | --- |
| Value | `simple` |
| Default value | `simple` |
| Animatable | No |

`simple`

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

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

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

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

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

See also
--------

* Definition of the `xlink:type` attribute in the XLink specification


units-per-em - SVG: Scalable Vector Graphics

units-per-em
============

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

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

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

You can use this attribute with the following SVG elements:

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

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

`<number>`

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

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

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

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

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


y - SVG: Scalable Vector Graphics

y
=

The **`y`** attribute defines a y-axis coordinate in the user coordinate system.

You can use this attribute with the following SVG elements:

* `<cursor>`
* `<feBlend>`
* `<feColorMatrix>`
* `<feComponentTransfer>`
* `<feComposite>`
* `<feConvolveMatrix>`
* `<feDiffuseLighting>`
* `<feDisplacementMap>`
* `<feDropShadow>`
* `<feFlood>`
* `<feFuncA>`
* `<feFuncB>`
* `<feFuncG>`
* `<feFuncR>`
* `<feGaussianBlur>`
* `<feImage>`
* `<feMerge>`
* `<feMergeNode>`
* `<feMorphology>`
* `<feOffset>`
* `<fePointLight>`
* `<feSpecularLighting>`
* `<feSpotLight>`
* `<feTile>`
* `<feTurbulence>`
* `<filter>`
* `<foreignObject>`
* `<glyphRef>`
* `<image>`
* `<mask>`
* `<pattern>`
* `<rect>`
* `<svg>`
* `<symbol>`
* `<text>`
* `<tref>`
* `<tspan>`
* `<use>`
Example
-------
```

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

```html
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
  <rect y="20" x="20" width="60" height="60" />
  <rect y="120" x="20" width="60" height="60" />
  <rect y="220" x="20" width="60" height="60" />
</svg>
```

feBlend
-------

For `<feBlend>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feColorMatrix>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feComponentTransfer>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feComposite>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feConvolveMatrix>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feDiffuseLighting>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feDisplacementMap>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feDropShadow>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feFlood
-------

For `<feFlood>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feFuncA
-------

For `<feFuncA>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feFuncB
-------

For `<feFuncB>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feFuncG
-------

For `<feFuncG>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feFuncR
-------

For `<feFuncR>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feGaussianBlur>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feImage
-------

For `<feImage>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feMerge
-------

For `<feMerge>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feMergeNode
-----------

For `<feMergeNode>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feMorphology>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

feOffset
--------

For `<feOffset>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

fePointLight
------------

For `<fePointLight>`, `y` defines the y location for the light source in the coordinate system defined by the `primitiveUnits` attribute on the `<filter>` element.

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

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

For `<feSpecularLighting>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feSpotLight>`, `y` defines the y location for the light source in the coordinate system defined by the `primitiveUnits` attribute on the `<filter>` element.

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

feTile
------

For `<feTile>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

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

For `<feTurbulence>`, `y` defines the minimum y coordinate for the rendering area of the primitive.

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

filter
------

For `<filter>`, `y` defines the y coordinate of the upper left corner for the rendering area of the filter.

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

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

For `<foreignObject>`, `y` defines the y coordinate of the upper left corner of its viewport.

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

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

glyphRef
--------

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

For `<glyphRef>`, `y` defines the y-axis coordinate of the glyph.

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

image
-----

For `<image>`, `y` defines the y coordinate of the upper left corner of the image.

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

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

mask
----

For `<mask>`, `y` defines the y coordinate of the upper left corner of its area of effect. The exact effect of this attribute is influenced by the `maskUnits` attribute.

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

pattern
-------

For `<pattern>`, `y` defines the y coordinate of the upper left corner 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>`, `y` defines the y coordinate of the upper left corner of the shape.

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

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

svg
---

For `<svg>`, `y` defines the y coordinate of the upper left corner of its viewport.

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

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

text
----

For `<text>`, if it contains a single value, `y` defines the y coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `y` defines the y coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | `0` |
| Animatable | Yes |
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <!-- y with a single value -->
  <text y="40%" x="5%">SVG</text>

  <!-- y with multiple values -->
  <text y="40%,60%,80%" x="55%">SVG</text>
</svg>
```

```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

tref
----

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

For `<tref>`, if it contains a single value, `y` defines the y coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `y` defines the y coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | `0` |
| Animatable | Yes |

tspan
-----

For `<tspan>`, if it contains a single value, `y` defines the y coordinate where the *content text position* must be placed. The *content text position* is usually a point on the baseline of the first line of text. The exact *content text position* is influenced by other properties, such as `text-anchor` or `direction`.

If it contains multiple values, `y` defines the y coordinate of each individual glyph from the text. If there are fewer values than glyphs, the remaining glyphs are placed in line with the last positioned glyph. If there are more values than glyphs, the extra values are ignored.

|  |  |
| --- | --- |
| Value |
 List of (**<length>**
 |
 **<percentage>**)
  |
| Default value | *none* |
| Animatable | Yes |
```

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

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- horizontal line to materialized the text base line -->
  <line x1="0" y1="40%" x2="100%" y2="40%" />
  <line x1="0" y1="60%" x2="100%" y2="60%" />
  <line x1="0" y1="80%" x2="100%" y2="80%" />

  <!-- vertical line to materialized the x positioning -->
  <line x1="5%" y1="0" x2="5%" y2="100%" />
  <line x1="55%" y1="0" x2="55%" y2="100%" />

  <text>
    <!-- y with a single value -->
    <tspan y="40%" x="5%">SVG</tspan>

    <!-- y with multiple values -->
    <tspan y="40%,60%,80%" x="55%">SVG</tspan>
  </text>
</svg>
```

```css
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: 0.5px;
  stroke-dasharray: 2px;
}
```

use
---

For `<use>`, `y` defines the y coordinate of the upper left corner of the referenced element.

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

**Note:** Starting with SVG2, `y` 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-y |
| Filter Effects Module Level 1 # element-attrdef-fespotlight-y |
| Filter Effects Module Level 1 # element-attrdef-fepointlight-y |
| Filter Effects Module Level 1 # element-attrdef-filter-primitive-y |
| CSS Masking Module Level 1 # element-attrdef-mask-y |
| Scalable Vector Graphics (SVG) 2 # Y |
| Scalable Vector Graphics (SVG) 2 # PatternElementYAttribute |
| Scalable Vector Graphics (SVG) 2 # TextElementYAttribute |


mode - SVG: Scalable Vector Graphics

mode
====

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

You can use this attribute with the following SVG elements:

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

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

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

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

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

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

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

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

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

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

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


ry - SVG: Scalable Vector Graphics

ry
==

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

You can use this attribute with the following SVG elements:

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

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

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

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

ellipse
-------

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

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

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

rect
----

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

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

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

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

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

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

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


targetX - SVG: Scalable Vector Graphics

targetX
=======

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

You can use this attribute with the following SVG elements:

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

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

`<integer>`

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

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

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

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

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

See also
--------

* `targetY`


Example - SVG: Scalable Vector Graphics

Example
=======

In this example, we use XHTML, SVG, JavaScript, and the DOM to animate a swarm of "motes". These motes are governed by two simple principles. First, each mote tries to move towards the mouse cursor, and second each mote tries to move away from the average mote position. Combined, we get this very natural-looking behavior.

View the example. The linked example was written with 2006 best practices. The example below has been updated to modern JavaScript best practices. Both work.

```xml
<?xml version='1.0'?>
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
  <head>
  <title>A swarm of motes</title>
  <style>
  <![CDATA[
 label, input
 {
 width: 150px;
 display: block;
 float: left;
 margin-bottom: 10px;
 }
 label
 {
 text-align: right;
 width: 75px;
 padding-right: 20px;
 }
 br
 {
 clear: left;
 }
 ]]>
  </style>
  </head>
  <body onload='update()'>
    <svg:svg id='display' width='400' height='300'>
      <svg:circle id='cursor' cx='200'
cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/>
    </svg:svg>

    <p>A swarm of motes, governed by two simple principles.
    First, each mote tries to move towards the cursor, and
    second each mote tries to move away from the average
    mote position. Combined, we get this very natural
    looking behavior.
    </p>

    <div>
    (C) 2006 <a id='emailme' href='#'>Nick Johnson</a>

    <script type='text/javascript'>
    <![CDATA[
 // foil spam bots
 let email = '@riovia.net';
 email ='nick' + email;
 document.getElementById('emailme').href = 'mailto:'+email;
 ]]>
    </script>
    This software is free for you to use in any way whatsoever,
    and comes with no warranty at all.
    </div>

    <form action="" onsubmit="return false;">
      <p>
      <label>Number of motes:</label>
        <input id='num\_motes' value='5'/>
        <br/>

      <label>Max. Velocity:</label>
        <input id='max\_velocity' value='15'/>
        <br/>

      <label>Attraction to cursor:</label>
        <input id='attract\_cursor' value='6'/>
        <br/>

      <label>Repulsion from peers:</label>
        <input id='repel\_peer' value='5'/>
        <br/>
      </p>
    </form>

  <script type='text/javascript'>
  <![CDATA[

 // Array of motes
 let motes;

 // Get the display element.
 function Display() {
 return document.getElementById('display');
 }

 // Determine dimensions of the display element.
 // Return this as a 2-tuple (x,y) in an array
 function Dimensions() {
 // Our Rendering Element
 const display = Display();
 const width = parseInt(display.getAttributeNS(null, 'width'));
 const height = parseInt(display.getAttributeNS(null, 'height'));

 return [width, height];
 }

 // This is called by mouse move events
 const mouse\_x = 200;
 const mouse\_y = 150;
 function OnMouseMove(evt) {
 mouse\_x = evt.clientX;
 mouse\_y = evt.clientY;

 const widget = document.getElementById('cursor');
 widget.setAttributeNS(null,'cx',mouse\_x);
 widget.setAttributeNS(null,'cy',mouse\_y);
 }
 document.onmousemove = OnMouseMove;

 // Determine (x,y) of the cursor
 function Cursor() {
 return [mouse\_x, mouse\_y];
 }

 // Determine average (x,y) of the swarm
 function AverageMotePosition() {
 if (!motes || motes.length === 0) {
 return [0, 0];
 }

 const sum\_x = 0;
 const sum\_y = 0;
 for (const mote of motes) {
 sum\_x += mote.x;
 sum\_y += mote.y;
 }

 return [sum\_x / motes.length, sum\_y / motes.length];
 }

 // A nicer, integer random
 function Rand(modulo)
 {
 return Math.round(Math.random() \* (modulo - 1));
 }

 // Class Mote
 function Mote() {
 // Dimensions of drawing area.
 const dims = Dimensions();
 const width = dims[0];
 const height = dims[1];

 // Choose a random coordinate to start at.
 this.x = Rand(width);
 this.y = Rand(height);

 // Nil initial velocity.
 this.vx = this.vy = 0;

 // A visual element, initially none
 this.elt = null;
 }

 // Turn this into a class.
 new Mote();

 // Mote::applyForce() — Adjust velocity
 // towards the given position.
 // Warning: Pseudo-physics — not really
 // governed by any /real/ physical principles.
 Mote.prototype.applyForce = function (pos, mag) {
 if (pos[0] > this.x) {
 this.vx += mag;
 } else if (pos[0] < this.x) {
 this.vx -= mag;
 }

 if (pos[1] > this.y) {
 this.vy += mag;
 } else if (pos[1] < this.y) {
 this.vy -= mag;
 }
 }

 // Mote::capVelocity() — Apply an upper limit
 // on mote velocity.
 Mote.prototype.capVelocity = function () {
 const max = parseInt(document.getElementById('max\_velocity').value);

 if (max < this.vx) {
 this.vx = max;
 } else if (-max > this.vx) {
 this.vx = -max;
 }

 if (max < this.vy) {
 this.vy = max;
 } else if (-max > this.vy) {
 this.vy = -max;
 }
 }

 // Mote::capPosition() — Apply an upper/lower limit
 // on mote position.
 Mote.prototype.capPosition = function () {
 const dims = Dimensions();
 if (this.x < 0) {
 this.x = 0;
 } else if (this.x >= dims[0]) {
 this.x = dims[0] - 1;
 }

 if (this.y < 0) {
 this.y = 0;
 } else if (this.y >= dims[1]) {
 this.y = dims[1] - 1;
 }
 }

 // Mote::move() — move a mote, update the screen.
 Mote.prototype.move = function () {
 // Apply attraction to cursor.
 const attract = parseInt(document.getElementById('attract\_cursor').value);
 const cursor = Cursor();
 this.applyForce(cursor, attract);

 // Apply repulsion from average mote position.
 const repel = parseInt(document.getElementById('repel\_peer').value);
 const average = AverageMotePosition();
 this.applyForce(average, -repel);

 // Add some randomness to the velocity.
 this.vx += Rand(3) - 1;
 this.vy += Rand(3) - 1;

 // Put an upper limit on velocity.
 this.capVelocity();

 // Apply velocity.
 const old\_x = this.x;
 const old\_y = this.y;
 this.x += this.vx;
 this.y += this.vy;
 this.capPosition();

 // Draw it.
 if (this.elt === null) {
 const svg = 'http://www.w3.org/2000/svg';
 this.elt = document.createElementNS(svg, 'line');
 this.elt.setAttributeNS(null, 'stroke', 'green');
 this.elt.setAttributeNS(null, 'stroke-width', '3');
 this.elt.setAttributeNS(null, 'stroke-opacity', '0.5');
 Display().appendChild(this.elt);
 }

 this.elt.setAttributeNS(null, 'x1', old\_x);
 this.elt.setAttributeNS(null, 'y1', old\_y);

 this.elt.setAttributeNS(null, 'x2', this.x);
 this.elt.setAttributeNS(null, 'y2', this.y);
 }

 function update() {
 // First call?
 if (!motes) {
 motes = [];
 }

 // How many motes should there be?
 let num = parseInt( document.getElementById('num\_motes').value );
 if ( num < 0 ) {
 num = 0;
 }

 // Make sure we have exactly that many...
 // Too few?
 while (motes.length < num) {
 motes.push(new Mote());
 }

 // Or too many?
 if (num === 0) {
 motes = [];
 } else if (motes.length > num) {
 motes = motes.slice(0, num - 1);
 }

 // Move a random mote
 if (motes.length > 0) {
 motes[Rand(motes.length)].move();
 }

 // And do this again in 1/100 sec
 setTimeout('update()', 10);
 }
 ]]>
  </script>
  </body>
</html>
```