y

Example

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

<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

<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