This example demonstrates the basic use case of y, and how the CSS y property takes precedence over the y attribute.
HTML
We include four identical SVG <rect> elements; their x and y attributes values are all 10, meaning the four rectangles are all in the same location, 10px from the top and left corner of the SVG viewport.
<svg>
<rect width="40" height="40" x="10" y="10" />
<rect width="40" height="40" x="10" y="10" />
<rect width="40" height="40" x="10" y="10" />
<rect width="40" height="40" x="10" y="10" />
</svg>
CSS
We style all the rectangles to have a black border and be slightly transparent, so overlapping rectangles are visible. We provide the rectangle with different fill and y values.
svg {
border: 1px solid;
}
rect {
fill: none;
stroke: black;
opacity: 0.8;
}
rect:nth-of-type(2) {
y: -20px;
fill: red;
}
rect:nth-of-type(3) {
y: 4em;
fill: yellow;
}
rect:nth-of-type(4) {
y: 60%;
fill: orange;
}
Results
The top edges of the rectangles are at 10 (from the attribute), -20px, 4em, and 60%, respectively. The rectangle is 40px tall, so the -20px places half the red rectangle outside the viewport. The SVG is 150px tall, so the orange rectangle's top side is 90px from the top of the SVG viewport.