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

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

Синтаксис

/* Initial value */
rx: auto;

/* Length and percentage values */
rx: 20px;
rx: 20%;

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

Значения

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

Задание горизонтального радиуса эллипса

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

HTML

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