rx

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

<length>

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

<percentage>

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

auto

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

rx = 
  <length-percentage>  |
  auto                 

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

Этот пример демонстрирует создание прямоугольников с закругленными углами, применяя свойство rx к 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 мы устанавливаем значение rx для четырёх прямоугольников:

svg {
  border: 1px solid;
}

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

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

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

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

Результаты

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

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

HTML

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

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

CSS

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

svg {
  border: 1px solid;
}

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

Результаты

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

Этот пример демонстрирует использование процентных значений для rx.

HTML

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

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

CSS

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

svg {
  border: 1px solid;
}

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

Результаты

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

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