Как задать обтекаемость svg?

Question

[Space]

Есть диаграмма, которая построена на svg. tympanus.net/Tutorials/AnimatedSkillsDiagram

Но проблема в том, что она сверстана не понятно как. Уменьшаю ширину - ее просто обрезает. В итоге не могу этот здоровенный блок с диаграммой вставить на сайт. Float не работает. Как можно это график сделать компактным?

Answer 1

[Алексей Зуев]

Есть интересная статья Making SVGs Responsive with CSS.
Исходя из идей этой статьи и заглянув в документацию можно получить примерно такой результат

Comments

[Space]

Ох, спасибо, Алексей!

[Space]

Алексей Зуев

r.setViewBox(0, 0, 500, 500 );  // for responsive 
        r.canvas.removeAttribute('style'); // for responsive 
        r.canvas.removeAttribute('width'); // for responsive 
        r.canvas.removeAttribute('height'); // for responsive

вставляю этот код к себе, и у меня пропадает диаграмма из виду. В консоли она есть. Если полность копирую ваш код и даже качаю скрипт с библиотекой, то в блоке diagram вообще не появляется svg. В чем могут быть проблемы? Вот без этой строчки r.setViewBox(0, 0, 500, 500 ); // for responsive все работает, но остается также как и раньше.

[Алексей Зуев]

Rusnire: ссылка на страницу есть? стили не забыли скопировать?

[Space]

Алексей Зуев: ссылки нет. Стили подключил. Но явно не в них дело, если не создается даже svg, если полностью ваш код копировать.

[Space]

Алексей Зуев: если вам не сложно, можете в отдельный мини сайт обернуть. Будет ли у вас работать? Я имею ввиду создать страничку index.html и подключить стили с кодом.

Даже не пойму почему так происходит.

[Алексей Зуев]

ссылка на пример