Свойство CSS `cy`

Свойство cy CSS задаёт центральную точку SVG-элементов <circle> или <ellipse> по оси Y. Если оно задано, то переопределяет атрибут cy элемента.

Синтаксис

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

Примеры

Задание координаты круга и эллипса по оси 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;
}

Центр стилизованного круга находится на расстоянии 30px от верхнего края области просмотра SVG, а стилизованный эллипс — на расстоянии 100px от этого края, как задано значениями свойства CSS cy. Центры нестилизованных фигур находятся на расстоянии 50px от верхнего края области просмотра SVG, как задано значениями их SVG-атрибута cy.

Координаты по оси Y в процентах

В этом примере мы используем ту же разметку, что и в предыдущем. Отличается только значение свойства CSS cy; в этом случае мы используем процентные значения 30% и 50%.

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

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 составляют соответственно 30% и 50% высоты текущей области просмотра SVG. Поскольку высота изображения по умолчанию равна 150px, значение cy эквивалентно 45px и 120px.

Спецификации

Совместимость с браузерами

См. также

• SVG-атрибут cy
• Геометрические свойства: cy, cx, r, rx, ry, x, y, width, height
• fill
• stroke
• paint-order
• Сокращённое свойство border-radius
• radial-gradient
• Тип данных <basic-shape>