Nesvet
@Nesvet
Разработчик

Как реализованы масштабирование и панорамирование в SVG на этой странице?

Ссылка на демо-приложение, рисующее граф на странице с помощью Canvas-WebGL и SVG (в зависимости от масштаба): https://live.yworks.com/demos/view/largegraphs/

Граф можно масштабировать (колесом мыши) и панорамировать (перемещаться по нему; драгом).

На масштабе 0–9% («Overview Level») граф отрисован с помощью Canvas-WebGL:
5d5ae2ec07542607777881.png

На масштабе 10–100% («Intermediate Level» и «Detail Level») граф отрисован с помощью SVG:
5d5ae34d572dd047579342.png

К вопросу: при изменении масштаба и панорамировании, в режиме SVG, можно видеть изменения в DOM-дереве (в <svg>...</svg>): появляются и пропадают SVG-элементы (в DOM-дереве присутствуют только те <path>, <rect>, и т. д., которые должны быть видны при текущем масштабе и положении), но ни один их атрибут (а так же атрибуты всех их родителей, могущие повлиять на их положение и масштаб, как то, например, transform, d или style) не меняется. Сбит с толку :-/

За счёт чего меняется положение и масштаб SVG-элементов?
  • Вопрос задан
  • 2381 просмотр
Решения вопроса 1
Xuxicheta
@Xuxicheta
инженер
В хроме (и в вашем сафари видимо тоже) баг девтулза, не отображается изменение тэга
<g style="pointer-events:visiblePainted" transform="matrix(0.334154, 0, 0, 0.334154, -3855.38, -1507.44)" image-rendering="auto" shape-rendering="auto">
...
</g>


Там меняется аттрибут transform, можно выбрать его и в консоли смотреть через $0.getAttribute('transform') после изменения масштаба или положения

Ну и в мозилле например хорошо видно что transform меняется.

Вот к примеру, я взял два разных куска разметки при разном зуме и поставил их рядышком, наглядно видно разницу
https://jsfiddle.net/melchiorio/8c6grskv/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы