1

введите сюда описание изображения

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

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

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

5
  • 1
    Зачем все эти линии? Нельзя просто центр окружности сместить в (0, 0) документа? 1 мая 2022 в 20:19
  • Разобрался, спасибо 1 мая 2022 в 20:33
  • @Laukhin Andrey Цитата - ` Нельзя просто центр окружности сместить в (0, 0) документа` В этом случае будет показана только нижняя, правая четверть окружности. Так делают обычно, чтобы спрятать окружность, которая перемещается по кривой до начала анимации animateMotion 2 мая 2022 в 8:42
  • @Alexandr_TT Я настаиваю, что можно. Вот пример трех окружностей из Вашего ответа. Обратите внимание на координаты центров (cx, cy). 2 мая 2022 в 13:20
  • @LaukhinAndrey ну конечно можно и так, спасибо за пример 2 мая 2022 в 20:20

1 ответ 1

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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.