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

Свойство ry CSS определяет радиус по оси y, то есть вертикальный радиус элемента <ellipse> SVG, а также вертикальную кривизну углов прямоугольника <rect> SVG. Если это свойство задано, оно переопределяет атрибут ry фигуры.

Синтаксис

/* Initial value */
ry: auto;

/* Length and percentage values */
ry: 30px;
ry: 30%;

/* Global values */
ry: inherit;
ry: initial;
ry: revert;
ry: revert-layer;
ry: unset;

Значения

Значение <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 к элементам <rect> SVG.

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 по умолчанию составляет 300 пикселей на 150 пикселей, значение 5% оранжевого прямоугольника задаёт радиус 7.5px. Для зелёного прямоугольника задано ry: 80%. Однако, поскольку значение ry никогда не превышает 50% высоты прямоугольника, результат такой же, как если бы было задано ry: 50%; rx: 50%.

Определение вертикального радиуса эллипса

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

HTML

В SVG добавлены два одинаковых элемента <ellipse>; для каждого задан атрибут 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>
• Атрибут ry SVG