Масштабирование путей и фигур, когда <svg> меняется размер

Question

Я использую Рафаэль, чтобы нарисовать фигуры на странице. <svg> уже установлен на { width:100%; height:600px }, и это работает нормально. Когда я изменяю размер браузера, я хотел бы настроить фигуры внутри <svg>, чтобы они соответствовали новой ширине. В идеале это должно произойти автоматически; просто кажется неправильным, чтобы вручную масштабировать каждую форму и путь на window.resize.

Я знаю, что проценты являются незаконными в строке пути, но это по существу то, что я ищу, чтобы сделать:

var r = Raphael('container', '100%', 600); 
r.path("M0,0 L0,0 55%,0 100%,61z") 

Answer 1

Вы должны сначала использовать абсолютную ширину и высоту как для бумаги и пути. Вам также необходимо установить viewBox на бумаге, используя setViewBox().

Оттуда вы устанавливаете ширину div#container на 100% используя CSS. Вам также может понадобиться установить body и html как таковой:

body, 
html { 
margin: 0; 
width: 100%; 
}