y

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

You can use this attribute with the following SVG elements:

Example

<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>

altGlyph

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

For <altGlyph>, y defines the y-axis coordinate of the alternate glyph.

Value List of <length>
Default value none
Animatable Yes

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 contain a single value, y defines the y coordinate on 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 some properties like text-anchor, or direction.

If there are multiple values, y defines the y coordinate of each individual glyph from the text. If there are less values than glyphs, the remaining glyphs are placed in the continuity of the last positioned glyph. If there are more values than glyphs, extra values are ignored.

Value List of (<length> | <percentage>)
Default value 0
Animatable Yes
<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>
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: .5px;
  stroke-dasharray: 2px;
}

tref

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

For <tref>, if it contain a single value, y defines the y coordinate on 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 some properties like text-anchor, or direction.

If there are multiple values, y defines the y coordinate of each individual glyph from the text. If there are less values than glyphs, the remaining glyphs are placed in the continuity of the last positioned glyph. If there are more values than glyphs, extra values are ignored.

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

tspan

For <tspan>, if it contain a single value, y defines the y coordinate on 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 some properties like text-anchor, or direction.

If there are multiple values, y defines the y coordinate of each individual glyph from the text. If there are less values than glyphs, the remaining glyphs are placed in the continuity of the last positioned glyph. If there are more values than glyphs, extra values are ignored.

Value List of (<length> | <percentage>)
Default value none
Animatable Yes
<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>
text {
  font: 40px sans-serif;
}

line {
  fill: none;
  stroke: red;
  stroke-width: .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 Status Comment
Filter Effects Module Level 1
The definition of 'y' in that specification.
Working Draft Definition for <filter>
Filter Effects Module Level 1
The definition of 'y' in that specification.
Working Draft Definition for <feSpotLight>
Filter Effects Module Level 1
The definition of 'y' in that specification.
Working Draft Definition for <fePointLight>
Filter Effects Module Level 1
The definition of 'y' in that specification.
Working Draft Definition for filter primitives
CSS Masking Module Level 1
The definition of 'y' in that specification.
Candidate Recommendation Definition for <mask>
Scalable Vector Graphics (SVG) 2
The definition of 'y' in that specification.
Candidate Recommendation Definition as a geometry property
Scalable Vector Graphics (SVG) 2
The definition of 'y' in that specification.
Candidate Recommendation Definition for <pattern>
Scalable Vector Graphics (SVG) 2
The definition of 'y' in that specification.
Candidate Recommendation Definition for <text> and <tspan>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <cursor>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <foreignObject>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <pattern>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <image>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <svg>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <use>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <fePointLight>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <feSpotLight>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <filter>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for filter primitives
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <mask>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <altGlyph>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <glyphRef>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <text>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'Y' in that specification.
Recommendation Initial definition for <tref> and <tspan>
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'y' in that specification.
Recommendation Initial definition for <rect>

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y