y

**y** 属性定义了 SVG <rect> 形状、<image> 图像、<foreignObject> 视窗和嵌套 <svg> 视窗的左上角相对于最近的 <svg> 祖先的用户 坐标系 的 y 轴坐标。如果存在，它会覆盖元素的 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;

Values

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

Results

矩形的顶部边缘分别位于10（来自属性）、-20px、4em 和 60%。矩形高 40px，因此 -20px 使红色矩形的一半位于视窗之外。SVG 高 150px，因此橙色矩形的顶部距离 SVG 视窗顶部 90px。

规范

规范
可缩放矢量图形 (SVG) 2
# Y

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅