cy
cy CSS 屬性定義了 SVG <circle> 或 <ellipse> 元素的 Y 軸中心點。如果存在，它將覆蓋元素的 cy 屬性。
注意：雖然 SVG <radialGradient> 元素支援 cy 屬性，但 cy 屬性僅適用於巢狀在 <svg> 中的 <circle> 和 <ellipse> 元素。此屬性不適用於 <radialGradient> 或其他 SVG 元素，也不適用於 HTML 元素或偽元素。
語法
/* length and percentage values */
cy: 3px;
cy: 20%;
/* Global values */
cy: inherit;
cy: initial;
cy: revert;
cy: revert-layer;
cy: unset;
值
<length> 和 <percentage> 值表示圓形或橢圓的垂直中心。
<length>-
作為絕對或相對長度，它可以表示為 CSS
<length>資料型別允許的任何單位。負值無效。 <percentage>-
百分比指的是當前 SVG 視口的高度。
正式定義
正式語法
cy =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
定義圓形和橢圓的 Y 軸座標
在此示例中，我們有 SVG 中的兩個相同的 <circle> 元素和兩個相同的 <ellipse> 元素；它們的 cy 屬性值分別為 50 和 150。
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" />
<circle cx="50" cy="50" r="30" />
<ellipse cx="150" cy="50" rx="20" ry="40" />
<ellipse cx="150" cy="50" rx="20" ry="40" />
</svg>
使用 CSS，我們只為第一個圓形和第一個橢圓設定樣式，允許它們的孿生形狀使用預設樣式（fill 預設為黑色）。我們使用 cy 屬性覆蓋 SVG cy 屬性的值，併為其提供 fill 和 stroke，以區分每對中的第一個形狀和它們的孿生形狀。瀏覽器預設將 SVG 影像渲染為 300px 寬和 150px 高。
svg {
border: 1px solid;
}
circle:first-of-type {
cy: 30px;
fill: lightgreen;
stroke: black;
}
ellipse:first-of-type {
cy: 100px;
fill: pink;
stroke: black;
}
根據 CSS cy 屬性值定義，帶樣式的圓的中心距 SVG 視口頂部邊緣 30px，帶樣式的橢圓距該邊緣 100px。未帶樣式的形狀中心根據其 SVG cy 屬性值定義，均距 SVG 視口頂部邊緣 50px。
Y 軸座標的百分比值
在此示例中，我們使用與上一個示例相同的標記。唯一的區別是 CSS cy 屬性值；在這種情況下，我們使用 30% 和 50% 的百分比值。
svg {
border: 1px solid;
}
circle:first-of-type {
cy: 30%;
fill: lightgreen;
stroke: black;
}
ellipse:first-of-type {
cy: 50%;
fill: pink;
stroke: black;
}
在這種情況下，圓形和橢圓中心的 Y 軸座標分別為當前 SVG 視口高度的 30% 和 50%。由於影像的預設高度為 150px，這意味著 cy 值相當於 45px 和 120px。
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # CY |
瀏覽器相容性
載入中…
另見
- SVG
cy屬性 - 幾何屬性：
cy、cx、r、rx、ry、x、y、width、height fillstrokepaint-orderborder-radius簡寫屬性radial-gradient<basic-shape>資料型別