Круг SVG, каков процент радиуса?
У меня есть следующий код:
.container{
width: 100px;
height: 200px;
background-color: red;
resize: both; /* Just to make it... */
overflow: hidden; /* ...resizable for testing. */
}<div class = "container">
<svg width = "100%" height = "100%">
<circle cx = "50%" cy = "50%" r = "25%" fill = "black"></circle>
</svg>
</div>Изменяя размер .container, я легко вижу следующее:
cx— процент шириныcy— процент высоты
Но я не могу понять, что такое r в процентах. Что такое r процент?
Большое спасибо. Я проверил документацию MDN на наличие круга , но не понял, что можно нажать r, чтобы прочитать об этом больше 🤦
Ответы 2
Как прокомментировал Роко К. Бульян, при использовании единиц % относительное значение относится к нормализованной длине диагонали.
См. спецификацию W3C SVG 2 (рабочий проект) "8.9. Единицы измерения"
Для любого другого значения длины, выраженного в процентах от SVG. области просмотра, процент должен рассчитываться как процент от нормализованная диагональ «viewBox», примененная к этому экрану просмотра. Если нет указывается viewBox, то нормализованная диагональ SVG необходимо использовать область просмотра. Нормализованная длина диагонали должна быть рассчитано с помощью
sqrt((width)**2 + (height)**2)/sqrt(2).
вот пример
let w = 100;
let h = 200;
let c = Math.sqrt(w ** 2 + h ** 2) / Math.sqrt(2)
let rAbsolute = c * 0.25
// get absolute radius via baseVal
let r = c1.r.baseVal.value
console.info(rAbsolute, r).container {
width: 100px;
height: 200px;
background-color: red;
}<div class = "container">
<svg width = "100%" height = "200px">
<circle id = "c1" cx = "50%" cy = "50%" r = "25%" fill = "#ccc"></circle>
<circle cx = "50%" cy = "50%" r = "39.52847075210474" fill = "none" stroke = "blue" />
</svg>
</div>Вы также можете проверить свои расчеты, используя свойство baseVal из интерфейса SVGAnimatedLength.
Если вам действительно нужен более предсказуемый масштаб круга, вы также можете добавить квадрат viewBox. В этом случае атрибут saveAspectRatio (в примере ниже значение по умолчанию «xMidYMid meet») будет влиять на выравнивание и масштабирование.
.container {
width: 100px;
height: 200px;
background-color: red;
resize: both;
overflow: hidden;
}<div class = "container">
<svg width = "100%" height = "100%" viewBox = "0 0 100 100" preserveAspectRatio = "xMidYMid meet">
<rect width = "100%" height = "100%" fill = "none" stroke = "#ccc"/>
<circle cx = "50%" cy = "50%" r = "25%" fill = "black" />
</svg>
</div>Как вы можете видеть, радиус круга остается на уровне 25% относительно размера 100x100 viewBox (то есть круг остается шириной 50%).
Большое спасибо! Сначала я проверил спецификацию <круг>, и там ничего не упоминалось о том, как следует рассчитывать процентный радиус. По моему мнению, немного плохо, что нужно прочитать совершенно другую часть спецификации, чтобы получить эту информацию без какой-либо ссылки на нее. Но нет проблем, ведь мне помогут вы, замечательные ребята :D
Я пишу на случай, если другие ищут то же, что и я.
Мне нужно было, чтобы радиус был выражен в процентах от наименьшей ширины и высоты элемента SVG. Я не знаю, насколько хорошо это поддерживают браузеры, но использование новой функциональности контейнера в CSS с модулем cqmin мне помогло (протестировано в Firefox и Chrome).
.container{
width: 100px;
height: 200px;
background-color: red;
resize: both; /* Just to make it... */
overflow: hidden; /* ...resizable for testing. */
container-type: size; /* Add this one. */
}<div class = "container">
<svg width = "100%" height = "100%">
<circle cx = "50%" cy = "50%" r = "25cqmin" fill = "black"></circle>
</svg>
</div>