Inkscape - Разметка по x и y
Каким образом возможно сделать так, чтобы что по x что по y. Отсчет начинался от нуля?
Пытаюсь ровную окружность выполнить по центру, с этим линями и тд. Это жеть...
И возможно ли не задавать Viewbox? Лучше ли с ним или без него, не совсем понимаю его роль...
Ответы (1 шт):
И возможно ли не задавать Viewbox? Лучше ли с ним или без него, не совсем понимаю его роль...
viewBox задаёт физические размеры SVG холста и выполняет важную роль при масштабировании и без него невозможно добиться адаптивности SVG изображений.
Допустим вы решили создать иконку 48x48px. Для этого указываете viewBox="0 0 48 48"
Вторая задача: сделать минимальные отступы от краев SVG холста
так как координаты центра окружности находятся в центре svg холста, то она будет привязана к левому верхнему углу (0,0) SVG холста
Изменение ширины и высоты width, height изменяют только отображаемый размер, но привязка к верхнему, левому углу остается.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="48" height="48" viewBox="0 0 48 48" style="border:1px solid;">
<circle cx="24" cy="24" r="24" fill="red" />
</svg>
<svg width="96" height="96" viewBox="0 0 48 48" style="border:1px solid;">
<circle cx="24" cy="24" r="24" fill="red" />
</svg>
<svg width="144" height="144" viewBox="0 0 48 48" style="border:1px solid;">
<circle cx="24" cy="24" r="24" fill="red"/>
</svg>UPDATE
по уточнениям в комментариях:
Тёмная рамка показывает границы отображаемого SVG холста style="border:1px solid;"
У трех иконок размеры пользовательского окна просмотра (viewport) разные: width:"48" ; width:"96" ; width:"144" но физические размеры, заданные viewBox="0 0 48 48" остаются одинаковыми - 48px
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="48" height="48" viewBox="0 0 48 48" style="border:1px solid;">
<circle id="circ1" cx="24" cy="24" r="24" fill="red" />
</svg>
<svg width="96" height="96" viewBox="0 0 48 48" style="border:1px solid;">
<circle id="circ2" cx="24" cy="24" r="24" fill="red" />
</svg>
<svg width="144" height="144" viewBox="0 0 48 48" style="border:1px solid;">
<circle id="circ3" cx="24" cy="24" r="24" fill="red"/>
</svg>
<script>
console.log(circ1.getBBox())
console.log(circ2.getBBox())
console.log(circ3.getBBox())
</script>