Inkscape - Разметка по x и y

Question

Каким образом возможно сделать так, чтобы что по x что по y. Отсчет начинался от нуля?

Пытаюсь ровную окружность выполнить по центру, с этим линями и тд. Это жеть...

И возможно ли не задавать Viewbox? Лучше ли с ним или без него, не совсем понимаю его роль...

Зачем все эти линии? Нельзя просто центр окружности сместить в (0, 0) документа? — Laukhin Andrey, May 01 '22 at 20:19
@Laukhin Andrey Цитата - Нельзя просто центр окружности сместить в (0, 0) документа В этом случае будет показана только нижняя, правая четверть окружности. Так делают обычно, чтобы спрятать окружность, которая перемещается по кривой до начала анимации animateMotion — Alexandr_TT, May 02 '22 at 08:42
@Alexandr_TT Я настаиваю, что можно. Вот пример трех окружностей из Вашего ответа. Обратите внимание на координаты центров (cx, cy). — Laukhin Andrey, May 02 '22 at 13:20
@LaukhinAndrey ну конечно можно и так, спасибо за пример — Alexandr_TT, May 02 '22 at 20:20

Alexandr_TT · Accepted Answer · 2022-05-02T08:34:45.863

И возможно ли не задавать 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>

viewBox задает физические размеры? Просто область просмотра условно бесконечного пространствa холста в относительных единицах - читай "в пропорциях". — Leonid, May 02 '22 at 06:18
@Leonid именно физические размеры, это те размеры, как нарисована фигура в векторном редакторе. Это легко проверяется с помощью getBBox(). А вот width ="x" height ="y" могут быть любыми и вот от них зависит размеры отрендеренного изображения на дисплее гаджета. Можно их совсем не указывать и тогда фигура займет всё пространство дисплея гаджета, хотя её физические размеры останутся 48 х 48px, которые заданы viewBox="0 0 48 48" — Alexandr_TT, May 02 '22 at 07:53
@Alexandr_TT Все же некорректно утверждать, что viewBox задает физические размеры, иначе зачем первые два числа? Да и название само за себя говорит. viewBox определяет границы окна отображения документа SVG. Благодаря этому, мы и имеем возможность сместить центр окружности в (0, 0), сместив при этом границы области просмотра. — Laukhin Andrey, May 02 '22 at 13:29
@Alexandr_TT, физические размеры определяются в физических единицах, например, см мм дюйм. Здесь же важно лишь соотношение сторон, собственно в этом и есть масштабируемость и векторность. Размеры определяются уже редакторами и браузерами исходя из настроек по умолчанию или значений атрибутов. И viewBox определяет начало отсчета ширины и высоты области просмотра, опять же в условных единицах, которые важны не сами по себе, а в привязке друг к другу. Это может быть и 1мм и 1000км, а потому называть их физическими нельзя. — Leonid, May 02 '22 at 18:47
@Leonid и Laukhin Andrey где-то вы немного правы, а где-то и немного нет. Тут нужно много писать отвечая на ваши комментарии, но это будет много текста, который не уместится в десятках комментариев. Вот пост, где с картинками, с действующими программами я пытался разобрать Как взаимодействуют между собой viewport и viewBox — Alexandr_TT, May 02 '22 at 20:07

Inkscape - Разметка по x и y

1 Answers1

UPDATE