cy

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

Примечание: Хотя SVG-элемент <radialGradient> поддерживает атрибут cy, свойство cy применяется только к элементам <circle> и <ellipse>, вложенным в элемент <svg>. Этот атрибут не применяется к <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-вьюпорта.

Формальное определение

Начальное значение	`0`
Применимо к	`<ellipse>` и `<circle>` элементам в `<svg>`
Наследуется	нет
Проценты	относятся к высоте текущего SVG-вьюпорта
Вычисленное значение	указанный процент или абсолютная длина
Тип анимации	по типу вычисленного значения

Формальный синтаксис

cy = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Определение координаты по оси y для окружности и эллипса

В этом примере у нас есть две одинаковые <circle> и две одинаковые <ellipse> элементы в SVG; значения их атрибута 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 {
  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.

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

Спецификация
Scalable Vector Graphics (SVG) 2 # CY

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`cy`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/cy