y
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
The y
attribute defines a y-axis coordinate in the user coordinate system.
You can use this attribute with the following SVG elements:
<altGlyph>
<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
<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.