На моей странице есть потенциально большой, но довольно простой <svg> документ. Он содержит графические элементы моего веб-приложения.
Его width и height в настоящее время такие же большие, как видимая часть приложения. Я использую свойство viewBox для обработки прокрутки через значения min-x и min-y. Самое главное, я использую viewBox width и height значения, чтобы элегантно масштабировать его графические c элементы в один go. Существует демо , а также полное руководство о топи c.
Проблема в том, что это вызывает математические проблемы с плавающей запятой что я не очень способен справиться.
SVG - это не просто изображение. SVG - это документ - Амелия Беллами-Ройдс
Кажется, что <svg> похоже на <iframe> или сам html документ: они могут быть огромными, но браузер позаботится об автоматическом рендеринге только их видимых частей.
Кроме того, если вы проверяете его элементы, он показывает ограничивающий прямоугольник клиента, «переполняющий» документ <svg>.
element overflowing its parent
Я не уверен, что это означает. Тем не менее, кажется, что браузер не делает различий с точки зрения производительности между одинаково сложным <svg>, один из которых является огромным, а другой - небольшим со свойством viewBox, которое взрывает его содержимое. Я прав в своем предположении?
В этом случае, несмотря на то, что мне нравится элегантность масштабирования всего с одним атрибутом, я был бы готов отказаться от этого, чтобы избежать решения математических задач с плавающей запятой.