Как сделать адаптивный svg?
1,00
р.
Необходимо сделать адаптивный SVG.
Как сделать так, чтобы при изменении размеров изображения (или viewport-а), дочерние элементы SVG перемещались и перестраивались (как в адаптивной вёрстке HTML).
Как сделать такой SVG?
Ответ
Можно создать "адаптивное" svg-изображение. Для этого нужно прописать внутри него css-медиазапросы и двигать элементы через transform. Пример изображения:
circle, rect{ stroke-width:2px fill:none stroke:orange } @media (max-width: 120px){ circle{ transform:translateX(50px) } rect{ transform:translate(-60px,80px) } }
Далее вставляем его на страницу(использовал data:url т.к. SO не хочет принимать svg картинки и ссылки без https, но это тот же самый svg):
$('input').on('input',function(){ $('img').width(this.value) }) *{ box-sizing:border-box vertical-align:top } img{ max-width:100% border:1px solid } Тут задавать ширину для картинки
Как сделать так, чтобы при изменении размеров изображения (или viewport-а), дочерние элементы SVG перемещались и перестраивались (как в адаптивной вёрстке HTML).
Как сделать такой SVG?
Ответ
Можно создать "адаптивное" svg-изображение. Для этого нужно прописать внутри него css-медиазапросы и двигать элементы через transform. Пример изображения:
circle, rect{ stroke-width:2px fill:none stroke:orange } @media (max-width: 120px){ circle{ transform:translateX(50px) } rect{ transform:translate(-60px,80px) } }
Далее вставляем его на страницу(использовал data:url т.к. SO не хочет принимать svg картинки и ссылки без https, но это тот же самый svg):
$('input').on('input',function(){ $('img').width(this.value) }) *{ box-sizing:border-box vertical-align:top } img{ max-width:100% border:1px solid } Тут задавать ширину для картинки
