cy

**cy** CSS 属性定义 SVG <circle> 或 <ellipse> 元素的 y 轴中心点。如果存在，则覆盖元素的 cy 属性。

注意：虽然 SVG <radialGradient> 元素支持 cy 属性，但 cy 属性仅适用于嵌套在 <svg> 中的 <circle> 和 <ellipse> 元素。此属性不适用于 <radialGradient> 或其他 SVG 元素，也不适用于 HTML 元素或伪元素。

语法

css
/* 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。

html
<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 高。

css
svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 100px;
  fill: pink;
  stroke: black;
}

设置样式的圆形的中心距离 SVG 视窗的顶部边缘 30px，设置样式的椭圆形距离该边缘 100px，如 CSS cy 属性值中定义的那样。未设置样式的形状中心都距离 SVG 视窗的顶部边缘 50px，如它们的 SVG cy 属性值中定义的那样。

y 轴坐标作为百分比值

在此示例中，我们使用与上一个示例相同的标记。唯一的区别是 CSS cy 属性值；在本例中，我们使用 30% 和 50% 的百分比值。

css
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。

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅