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>数据类型