Я пытаюсь показать несколько полигонов в виде изображения SVG на div с использованием Рафаэля. Хотя я установил размер для div, который Рафаэль получает в качестве аргумента для создания бумажного объекта, размер элемента div не учитывается, и изображение рисуется вне границ div (что я так или иначе понимаю, как координаты многоугольника выходят за границы div).
Есть ли способ заставить SVG вести себя как обычное изображение, которое автоматически масштабируется при изменении размера окна браузера и предотвращает отрисовку SVG за пределами границ div (подобно поведению)?
Ура, Max
Чтобы заставить элемент Рафаэля заполнить содержащий элемент (звучит так, как вы хотите), используйте:
var paper = Raphael("someElement", "100%", "100%");
Я тестировал его только с Firefox и Chrome, но, похоже, работает нормально.
Похоже, что в одном есть 2 вопроса.
Для "автоматического масштабирования с окном браузера, как изображение" , вы можете взглянуть на код этого примера, который делает работу:
http://www.irunmywebsite.com/raphael/scaleraphael.php
Установить стиль overflow для div, который будет переполнен: авто или переполнение: скрыто. По умолчанию для div используется overflow: visible, из-за которого SVG выходит за пределы div. Однако, если вы хотите, чтобы весь SVG «уменьшался», чтобы вы могли видеть все это, вам нужно будет масштабировать и переводить каждый элемент Raphael на холсте (т.е. увеличить). Я выполнил прокрутку и масштабирование, но, очевидно, прокрутка намного проще.