y
y CSS 属性定义了 SVG <rect> 形状、<image> 图像、<foreignObject> 视口和嵌套的 <svg> 视口左上角的 Y 轴坐标，其坐标是相对于最近的 <svg> 祖先的用户坐标系统。如果存在，它会覆盖元素的 y 属性。
注意： y 属性仅适用于嵌套在 <svg> 中的 <rect>、<image>、<foreignObject> 和 <svg> 元素。它对最外层的 <svg> 元素没有影响，也不适用于其他 SVG 元素、HTML 元素或伪元素。
语法
css
/* length and percentage values */
y: 10px;
y: 10%;
/* Global values */
y: inherit;
y: initial;
y: revert;
y: revert-layer;
y: unset;
值
<length> 和 <percentage> 值表示 SVG 元素左上角的 Y 轴坐标位置。
<length>-
作为绝对或相对长度，它可以用 CSS
<length>数据类型允许的任何单位表示。 <percentage>-
百分比指的是 SVG
viewBox的高度（如果已声明），否则，百分比指的是当前 SVG 视口的高度。
正式定义
正式语法
y =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
定义 SVG 形状的 Y 轴坐标
此示例演示了 y 的基本用法，以及 CSS y 属性如何优先于 y 属性。
HTML
我们包含四个相同的 SVG <rect> 元素；它们的 x 和 y 属性值都为 10，这意味着这四个矩形都位于相同的位置，距离 SVG 视口的顶部和左侧角 10px。
html
<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
我们为所有矩形设置了黑色边框和略微透明的样式，这样重叠的矩形也能可见。我们为矩形提供了不同的 fill 和 y 值。
css
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;
}
结果
矩形的上边缘分别位于 10（来自属性）、-20px、4em 和 60%。矩形高 40px，因此 -20px 使红色矩形的一半位于视口之外。SVG 高 150px，因此橙色矩形的顶部距离 SVG 视口顶部 90px。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # Y |
浏览器兼容性
加载中…