Необходимо сделать адаптивный SVG
.
Как сделать так, чтобы при изменении размеров изображения (или viewport
-а), дочерние элементы SVG
перемещались и перестраивались (как в адаптивной вёрстке HTML).
Как сделать такой SVG
?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНеобходимо сделать адаптивный SVG
.
Как сделать так, чтобы при изменении размеров изображения (или viewport
-а), дочерние элементы SVG
перемещались и перестраивались (как в адаптивной вёрстке HTML).
Как сделать такой SVG
?
Можно создать "адаптивное" svg-изображение. Для этого нужно прописать внутри него css-медиазапросы и двигать элементы через transform
.
Пример изображения:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200px" height="200px" preserveAspectRatio="none">
<style>
circle,
rect{
stroke-width:2px;
fill:none;
stroke:orange;
}
@media (max-width: 120px){
circle{
transform:translateX(50px);
}
rect{
transform:translate(-60px,80px);
}
}
</style>
<circle cx="40" cy="40" r="34" />
<rect x="100" y="10" width="80" height="60" />
</svg>
Далее вставляем его на страницу(использовал 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMHB4IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCiAgPHN0eWxlPg0KICAgIGNpcmNsZSwNCiAgICByZWN0ew0KICAgICAgc3Ryb2tlLXdpZHRoOjJweDsNCiAgICAgIGZpbGw6bm9uZTsNCiAgICAgIHN0cm9rZTpvcmFuZ2U7DQogICAgfQ0KICAgIEBtZWRpYSAobWF4LXdpZHRoOiAxMjBweCl7DQogICAgICBjaXJjbGV7DQoJCXRyYW5zZm9ybTp0cmFuc2xhdGVYKDUwcHgpOw0KCSAgfQ0KCSAgcmVjdHsNCgkJdHJhbnNmb3JtOnRyYW5zbGF0ZSgtNjBweCw4MHB4KTsNCgkgIH0NCiAgICB9DQogIDwvc3R5bGU+DQogIDxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjM0IiAvPg0KICA8cmVjdCB4PSIxMDAiIHk9IjEwIiB3aWR0aD0iODAiIGhlaWdodD0iNjAiIC8+DQo8L3N2Zz4=" />
<label for="controller">Тут задавать ширину для картинки</label>
<input id="controller" type="number" min="70" max="500" step="5" />
Набросал пример кода на чистом svg и разумеется здесь мы не увидим как меняется расположение svg объектов то привожу пример в: https://codepen.io/topicstarter/pen/oPBzvw?editors=1000 в котором изменение положения объектов произойдёт при разрешении меньше 600px.
что бы увидеть здесь адаптивность svg надо открыть пример кода на всю страницу а сжать сам браузер до менее 600px
img preview :
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<svg viewbox="0 250 200" id="svg">
<defs>
<style>
#svg{
width:210px;
height:100px;
}
#rect{
width:50px;
height:40px;
fill:red;
x:20px;
y:30px;
}
#circle{
cx:150px;
cy:50px;
fill:blue;
r:40px;
}
@media (max-width:600px){
#svg{
width:200px;
height:140px;
}
#rect{
width:50px;
height:40px;
fill:red;
x:70px;
y:5px;
fill:blue;
}
#circle{
cx:95px;
cy:90px;
fill:blue;
r:40px;
fill:red;
}
}
</style>
</defs>
<rect id="rect"></rect>
<circle id="circle"></circle>
</svg>
Вариант на JS
(подобно flex-wrap
в CSS
):
const $d = document;
let rects = $d.getElementsByTagName('rect');
const arrangement = e => {
let windowWidth = $d.documentElement.clientWidth;
let offset_x = 20;
let offset_y = 20;
let next_offset_y = offset_y;
let offset = 20;
let maxH = 0;
let maxW = 0;
for (let i = 0, len = e.length; i < len; i++) {
let w = parseInt(getComputedStyle(e[i]).width);
let h = parseInt(getComputedStyle(e[i]).height);
if (h > maxH) {
maxH = h;
}
if (w > maxW) {
maxW = w;
}
if (maxW + w + offset_x + offset + offset + offset > windowWidth) {
set(e, i, offset_x, offset_y);
offset_y += offset + next_offset_y;
offset_x = 20;
maxH = h;
} else {
set(e, i, offset_x, offset_y);
offset_x += w + offset;
next_offset_y = maxH;
}
}
};
const set = (e, i, offset_x, offset_y) => {
e[i].setAttribute('x', offset_x);
e[i].setAttribute('y', offset_y);
}
arrangement(rects);
window.onresize = function(e) {
arrangement(rects);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
html {
font-size: 62.5%;
}
html,
body {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.wrapper svg {
width: inherit;
height: inherit;
background-color: hsl(10, 0%, 70%);
}
.wrapper svg .main-area rect {
width: 25px;
height: 25px;
stroke: #000;
stroke-width: 0.125rem;
}
.wrapper svg .main-area rect.rect1 {
width: 70px;
height: 25px;
}
.wrapper svg .main-area rect.rect2 {
width: 25px;
height: 70px;
}
.wrapper svg .main-area rect.rect3 {
width: 70px;
height: 50px;
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1">
<g class="main-area" fill="hsl(50,100%,70%)">
<rect/>
<rect/>
<rect/>
<rect/>
<rect class='rect3'/>
<rect class='rect3'/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect class='rect1'/>
<rect/>
<rect class='rect2'/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect class='rect2'/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
<rect/>
</g>
</svg>
</div>
width
& height
Это можно сделать, используя любую js библиотеку для работы с SVG.
К примеру я взял SVG.js:
Сразу предоставлю рабочий пример, а ниже код примера:
var draw = SVG('banner');
var bg = draw
.rect('100%', '100%')
.attr({ fill: '#ffeb3b' });
var elem1 = draw
.ellipse(100, 100)
.attr({ fill: '#f06' });
var elem2 = draw
.rect(150, 100)
.attr({ fill: '#f06' });
bunnerUpdate();
window.onresize = bunnerUpdate;
function bunnerUpdate() {
if (window.innerWidth > 400) {
draw.size(400, 200);
elem1.move(50, 50);
elem2.move(200, 50);
}
else {
draw.size('100%', 350);
elem1.move(window.innerWidth / 2 - 50, 50);
elem2.move(window.innerWidth / 2 - 75, 200);
}
}
body {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<div id="banner"></div>
Удивительно, что все ответы, написанные до меня, не соответствуют условию поставленной задачи. Обратите внимание на то, что нужно отслеживать именно размеры изображения:
Как сделать так, чтобы при изменении размеров изображения (или viewport-а)
А все 4 ответа, написанные до меня, это вообще не принимают во внимание и отслеживают как один изменение размеров окна. Непонятно также почему спустя 4 месяца на это никто не обратил внимания?! Напомнило мне смешную старую шутку про разработчиков.
Но если кому-то всё же нужно откликаться на изменение окна, то изучайте первые 4 ответа и статью по ссылке (она про CSS медиа-запросы такие как @media (max-width:600px)
).
Если переводить слово «адаптивный» на русский язык, то мы получим два слова «приспосабливающийся» и «приспосабливаемый». Окончание «-ийся» всегда подразумевает, что предмет действия сам себя(сокращение -ся в конце) приспособит. А вот «приспосабливаемый» означает что предмет действия будет кем-то(чем-то) приспособлен. К примеру, его приспособит вышестоящее окно - то есть кто-то(что-то), но не он сам.
Случай, когда это «приспосабливающийся»
В данном случае этот приспосабливающийся будет наш SVG объект, который будет отслеживать изменения в себе и приспосабливать себя. Для этого мы в самом SVG объекте (хотя можно и снаружи) через JavaScript при помощи функции window.setTimeout
каждые 50 милисекунд
отслеживаем изменения размеров изображения посредством сравнения значения свойства ширины svg.getAttribute('width')
. И если это значение меняется, то мы меняем расположение прямоугольника, изменяя значения его свойств (или т.н. атрибутов) x
и y
при помощи функции rect.setAttribute();
. Мы также вместо этого можем изменить CSS свойство transform:translate(...px, ...px);
, обращение к которому в JavaScript выглядит так:
rect.style.transform = 'translate(...px, ...px)';
Но приводить пример с transform
нет смысла, т.к. это уже сделали в двух первых примерах.
Также важно заметить, что изменяя размер изображения посредством svg.setAttribute('width', ...);
мы также должны изменить и размер его viewBox
-а, ибо иначе будет несоответствие и изображение исказится.
Итак, первый пример / случай:
var svg = document.querySelector('#svg');
function changeWidth(obj)
{
var width = +obj.options[obj.selectedIndex].text;
svg.setAttribute('width', width);
svg.setAttribute('viewBox', '0,0,' + width + ',320');
}
body{background:#000}
<font color="white">Ширина <s>окна</s> SVG изображения:
<select onchange="changeWidth(this)">
<option>320</option>
<option>210</option>
</select> px.</font><br><br>
<svg id="svg" viewBox="0 0 320 320" width="320" height="320" style="background:#fff">
<g fill="none" stroke="#f93" stroke-width="3">
<polygon points="60,10,110,60,60,110,10,60"/>
<rect id="rect" x="130" y="10" width="180" height="100"/>
</g>
<script type="text/javascript">
var svg = document.querySelector('#svg'),
rect = svg.getElementsByTagName('rect')[0];
(function checkWidth()
{
var w = +svg.getAttribute('width'); //+ значит перевод из string в integer
if(w < 211)
{
rect.setAttribute('x', 10);
rect.setAttribute('y', 120)
}
else
{
rect.setAttribute('x', 130);
rect.setAttribute('y', 10)
}
window.setTimeout(checkWidth, 50)
})()
</script>
</svg>
Случай, когда это «приспосабливаемый»
Этот случай более сложный для данной задачи, т.к. SVG – это векторное изображение и в нём для каждой точки уже должны быть определённые координаты. И хотя решение, когда свойства прямоугольника изменяются извне, можно было бы с натяжкой назвать «приспосабливаемый», но это всё же неправильно, т.к. мы изменяем его свойства местоположения.
Итак, смотрите что я имею ввиду под «приспосабливаемый» SVG (пример, который также решает поставленную задачу):
var svg = document.querySelector('#svg');
function changeWidth(obj)
{
var size = obj.options[obj.selectedIndex].text.split(' x ');
svg.setAttribute('width', size[0]);
svg.setAttribute('height', size[1]);
svg.setAttribute('viewBox', '0,0,' + size[0] + ','+size[1]);
}
body{background:#000}
<font color="white">Размер SVG изображения:
<select onchange="changeWidth(this)">
<option value="">320 x 120</option>
<option value="">200 x 240</option>
</select> px.</font><br><br>
<svg id="svg" viewBox="0 0 320 120" width="320" height="120" style="background:#fff">
<svg preserveAspectRatio="xMinYMin meet" width="120" height="120" viewBox="0 0 120 120">
<polygon points="60,10,110,60,60,110,10,60" fill="none" stroke="#f93" stroke-width="3"/>
</svg>
<svg preserveAspectRatio="xMaxYMax meet" width="100%" height="100%" viewBox="0 0 200 120">
<rect x="10" y="10" width="180" height="100" fill="none" stroke="#f93" stroke-width="3"/>
</svg>
</svg>
Обратите внимание на то, как во внутренних SVG изображениях выставлены свойства preserveAspectRatio
, которые и способствуют тому, чтобы расположить наши изображения таким образом. Также здесь важны свойства ширины и высоты, которые во втором внутреннем SVG установлены в 100%
. И используемые вместе они действуют таким образом, что наш второй внутренний SVG выстраивается либо крайне справа, либо крайне снизу.
Вот что я называю здесь «приспосабливаемый» SVG, т.к. нигде в коде ничего не меняется (не указывается) в зависимости от размера изображения как в случае с «приспосабливающийся» SVG. Всё, что мы делаем – это изменяем только размеры изображения и ничего более.