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 |
瀏覽器相容性
載入中…