Координаты SVG viewBox

Я только изучаю подробности о окне просмотра SVG и viewBox. Что меня смущает, так это то, что это кажется нелогичным, несмотря на то, что все положительные координаты x и y идут слева направо и сверху вниз соответственно в веб-дизайне, система координат viewBox, кажется, идет справа налево и снизу вверх соответственно?

Правильно ли я это понимаю, и знает ли кто-нибудь, почему это так?

Спасибо


svg viewbox
person The Chewy    schedule 05.07.2018    source источник
comment
viewBox - это просто область, она действительно не идет снизу вверх.   -  person Robert Longson    schedule 05.07.2018
comment
Привет, Роберт, да, я знаю, что говорю о том, где он расположен в области просмотра SVG (или корневом элементе SVG).   -  person The Chewy    schedule 06.07.2018

Ответы (2)


arrow_upward
0
arrow_downward

Это не так. Объявление viewBox - это x, y, ширина, высота. И начало координат 0,0 находится вверху слева - как и в большинстве систем координат. Если у вас есть другой пример, возможно, на каком-то уровне вашего документа или CSS применяется преобразование, которое меняет поведение.

person Michael Mullany    schedule 05.07.2018
comment
Привет, Майкл, вот ссылка, нет преобразования ни в SVG, ни в CSS. Если вы измените значения x и y viewBox с 0 0 100 300 на 15 0 100 300, графика переместится влево, а не вправо. codepen.io/emilychews/pen/qKGwwK - person The Chewy; 06.07.2018
comment
Это долгое объяснение. Это хорошее резюме: sarasoueidan.com/blog/svg-coordinate-systems - person Michael Mullany; 06.07.2018
comment
Также - поиграйте с этим, чтобы почувствовать, как различные настройки viewBox и preserveAspectRatio влияют на позиционирование codepen.io/mullany / pen / WyqGrm - person Michael Mullany; 06.07.2018
comment
@TheChewy Концептуализируйте viewBox как определение прозрачного окна в непрозрачном слое над холстом SVG. При изменении атрибута viewBox вы перемещаете «окно» вправо, не затрагивая холст, поэтому ваша графика перемещается влево относительно «окна». Браузер закрепляет окно viewBox, поэтому кажется, что изменение координат повлияет на графику. - person collapsar; 06.07.2018
comment
Пенни упал сейчас. Поскольку вы перемещаете viewBox вправо и вниз, создается иллюзия, что изображение перемещается влево и вверх. Спасибо. - person The Chewy; 06.07.2018

arrow_upward
0
arrow_downward

Пенни упал сейчас. Поскольку вы перемещаете viewBox вправо и вниз, создается иллюзия, что изображение перемещается влево и вверх.

person The Chewy    schedule 06.07.2018