r

Значения <length> и <percentage> определяют радиус окружности.

<length>

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

<percentage>

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

r = 
  <length-percentage>  

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

В этом примере у нас есть два одинаковых элемента <circle> в SVG, каждый с радиусом 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;
}

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

<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, пиксели координат SVG масштабируются для отображения в 30 пикселях CSS.

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

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 единицы view box, 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