ry

Значение <length>, <percentage> или auto обозначает вертикальный радиус эллипсов и вертикальный радиус скругления углов прямоугольников.

<length>

Абсолютные или относительные длины могут быть выражены в любой единице, разрешенной типом данных CSS <length>. Отрицательные значения недопустимы.

<percentage>

Проценты относятся к высоте текущего SVG-вьюпорта. Использованное значение для <rect> никогда не превышает 50% высоты прямоугольника.

auto

При установке или по умолчанию в auto, значение ry равно абсолютному значению длины, используемому для rx. Если у обоих ry и rx вычисленное значение равно auto, использованное значение равно 0.

ry = 
  <length-percentage>  |
  auto                 

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

Этот пример демонстрирует создание прямоугольников с закруглёнными углами путём применения свойства ry к элементам SVG <rect>.

HTML

Мы включаем изображение SVG с четырьмя элементами <rect>; все прямоугольники одинаковы, за исключением значения атрибута x, которое позиционирует их вдоль оси X.

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="50" height="120" y="5" x="5" />
  <rect width="50" height="120" y="5" x="60" />
  <rect width="50" height="120" y="5" x="115" />
  <rect width="50" height="120" y="5" x="170" />
  <rect width="50" height="120" y="5" x="225" />
</svg>

CSS

С помощью CSS мы задаём значение ry для четырёх прямоугольников:

svg {
  border: 1px solid;
}

rect:nth-of-type(2) {
  ry: 10px;
  fill: red;
}

rect:nth-of-type(3) {
  ry: 2em;
  fill: blue;
}

rect:nth-of-type(4) {
  ry: 5%;
  fill: orange;
}

rect:nth-of-type(5) {
  ry: 80%;
  fill: green;
}

Результаты

Первый прямоугольник имеет значение по умолчанию auto; так как все значения rx в этом примере также имеют значение по умолчанию auto, использованное значение ry равно 0. Красный и синий прямоугольники имеют закруглённые углы соответственно 10px и 2em. Поскольку SVG-вьюпорт по умолчанию имеет размер 300px на 150px, значение 5% оранжевого прямоугольника создаёт радиус 7.5px. Зелёный прямоугольник имеет значение ry: 80% заданное. Однако, так как значение ry никогда не превышает 50% высоты прямоугольника, эффект такой, как если бы было установлено ry: 50%; rx: 50%.

Этот базовый <ellipse> пример демонстрирует, как свойство CSS ry имеет приоритет над атрибутом SVG ry для определения вертикального радиуса формы.

HTML

Мы включаем два идентичных элемента <ellipse> в SVG; каждый с атрибутом ry установленным на 20.

<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="40" ry="20" />
  <ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>

CSS

Мы стилизуем только первый эллипс, позволяя его двойнику использовать стили по умолчанию браузера (с fill по умолчанию чёрным). Геометрическое свойство ry переопределяет значение атрибута SVG ry. Мы также задаём свойства fill и stroke, чтобы отличить стилизованную форму от её двойника.

svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 80px;
  fill: magenta;
  stroke: rebeccapurple;
}

Результаты

Вертикальный радиус стилизованного эллипса составляет 80px, как определено в значении свойства CSS ry. Вертикальный радиус нестилизованного эллипса составляет 20px, что было определено атрибутом ry.

Этот пример демонстрирует использование процентов для ry.

HTML

Мы используем ту же разметку, что и в предыдущем примере.

<svg xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="80" cy="50" rx="40" ry="20" />
  <ellipse cx="80" cy="50" rx="40" ry="20" />
</svg>

CSS

CSS аналогичен предыдущему примеру, единственное отличие – значение свойства ry; в этом случае мы используем процентное значение.

svg {
  border: 1px solid;
}

ellipse:first-of-type {
  ry: 30%;
  fill: magenta;
  stroke: rebeccapurple;
}

Результаты

При использовании процентных значений для ry, значения относительны к высоте SVG-вьюпорта. Здесь размер вертикального радиуса стилизованного эллипса составляет 30% высоты текущего SVG-вьюпорта. Поскольку высота по умолчанию равна 150px, значение ry составляет 45px, что делает эллипс 90px высотой.

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