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

Свойство r CSS задаёт радиус круга. Его можно использовать только с элементом SVG <circle>. Если оно указано, то переопределяет атрибут r круга.

Синтаксис

/* Length and percentage values */
r: 3px;
r: 20%;

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

Значения

Значения <length> и <percentage> задают радиус круга.

<length>

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

<percentage>

Проценты отсчитываются от нормализованной диагонали текущей области просмотра SVG, вычисляемой по формуле $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$.

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

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

r = 
  <length> |
  <percentage>

Примеры

Задание радиуса круга

В этом примере в SVG есть два одинаковых элемента <circle>, каждый с радиусом 10 и одинаковыми координатами по осям x и y для центральных точек.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

С помощью CSS мы задаём стили только для первого круга, а второй использует стили по умолчанию (при этом fill по умолчанию равен чёрному цвету). Мы используем свойство r, чтобы переопределить значение атрибута SVG r, задав ему значение fill и stroke. Размер SVG по умолчанию составляет 300px в ширину и 150px в высоту.

svg {
  border: 1px solid black;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

ViewBox и пиксели области просмотра

В этом примере представлены два SVG, каждый из которых содержит два элемента <circle>. Во втором SVG указан атрибут viewBox, демонстрирующий разницу между viewBox SVG и областями просмотра SVG.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

CSS похож на код из предыдущего примера: свойство r: 30px задано, но мы задаём width, чтобы оба изображения были одинаковой ширины — 300px:

svg {
  border: 1px solid black;
  width: 300px;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

Поскольку атрибут viewBox задаёт ширину SVG в 200 пикселей системы координат SVG, а изображение увеличено до 300px, 30 пикселей координат SVG масштабируются и отображаются как 45 пикселей CSS.

Задание радиуса круга в процентах

В этом примере используется та же разметка, что и в предыдущем. Разница только в значении r: в данном случае мы используем процентное значение.

<svg xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="10" />
  <circle cx="50" cy="50" r="10" />
</svg>

svg {
  border: 1px solid black;
  width: 300px;
}

circle:first-of-type {
  r: 30%;
  fill: lightgreen;
  stroke: black;
}

В обоих случаях радиус круга составляет 30% нормализованной диагонали области просмотра SVG. Радиус r равен $0.3\times \frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$. В первом изображении используются 300 и 150 пикселей CSS, а во втором — 200 и 100 единиц viewBox SVG, но 30% — это пропорциональное значение. Поэтому значение r одинаково: 47.43 единиц viewBox, что соответствует 71.15 пикселям CSS.

Хотя r одинаково, центральные точки различаются, поскольку второй SVG увеличен на 50%, из-за чего его центр смещается вниз и вправо на 50%.

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

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

См. также

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