Для чего используются последние 2 числа svg viewBox? если это для эффекта увеличения, почему бы не использовать 1 номер? - PullRequest
Новая
       49

Для чего используются последние 2 числа svg viewBox? если это для эффекта увеличения, почему бы не использовать 1 номер?

1 голос
/ 10 ноября 2019

Мне трудно понять, как третье и четвертое числа svg's viewbox="0 0 100 100" управляют «увеличением». Во всех уроках, которые я видел в интернете, все примеры демонстрируют ситуацию, когда (svg-viewport-width/svg-viewbox-3rd-number) == (svg-viewport-height/svg-viewbox-4th-number). Тогда примеры говорят, что это аналогично увеличению.

Моя проблема в том, что я не понимаю, как предсказать поведение, когда (svg-viewport-width/svg-viewbox-3rd-number) != (svg-viewport-height/svg-viewbox-4th-number). И я пока не нашел в Интернете хорошего объяснения этому.

Если 3-е и 4-е числа viewBox действительно используются для увеличения, то мой вопрос: зачем нужны два числа? В большинстве приложений зум предоставляется в виде единого числа. Люди будут спрашивать: «Я хотел бы увеличить 15%» или «Увеличить увеличение в 100 раз». Это заставляет меня поверить, что 3-е и 4-е числа на самом деле не используются только для увеличения.

Может ли кто-нибудь помочь мне лучше понять, как использовать эти 3-е и 4-е числа в ViewBox?

1 Ответ

3 голосов
/ 10 ноября 2019

Четыре числа в окне просмотра SVG: x, y, ширина и высота. Он устанавливает систему единиц для вашего SVG. Вот что происходит с прямоугольником 100 x 50, нарисованным при 50,50 в SVG размером 400 x 400 пикселей, когда вы вдвое уменьшаете размер ширины и высоты области просмотра отдельно и вместе. 

<svg width="400px" height="400px" viewBox="0 0 400 400">
<animate attributeName="viewBox" values="0 0 400 400; 0 0 200 400; 0 0 400 400;0 0 400 200;0 0 400 400;0 0 200 200;" dur="15s" fill="freeze" />

<rect x="50" y="50" width="100" height="50" fill="blue" stroke-width="2" stroke="red"/>
</svg>

«Подожди минутку», вы можете подумать, «почему при уменьшении размера моего viewBox в два раза не растягивается ширина или высота моей формы, когда я меняю только один»ширины или высоты? Это не имеет смысла. "И на самом деле ты прав. В вашем SVG-элементе есть молчаливое значение по умолчанию, которое сохраняет соотношение сторон ваших фигур при изменении viewBox.

Если вы переопределите это значение по умолчанию, добавив preserveAspectRatio="none" к SVG - анимация будет работать так, как вы могли ожидать -растягивая размеры x и y вашей фигуры отдельно, когда вы изменяете ширину и высоту отдельно. 

<svg width="400px" height="400px" viewBox="0 0 400 400" preserveAspectRatio="none">
<animate attributeName="viewBox" values="0 0 400 400; 0 0 200 400; 0 0 400 400;0 0 400 200;0 0 400 400;0 0 200 200;" dur="15s" fill="freeze" />

<rect x="50" y="50" width="100" height="50" fill="blue" stroke-width="2" stroke="red"/>
</svg>
...