Хочу сверстать на svg
фоновую картинку, внутри самого svg
будут разные детали. Идея в том, чтобы всю эту конструкцию без проблем можно было бы подогнать под все разрешения и размеры экранов. С мобильными устройствами все понятно, придется несколько по-другому реализовать. Меня интересует именно как правильно реализовать width="" height=""
самого svg
и как правильно подогнать viewBox="0 0 N N"
ко всей этой конструкции. То что можно svg
вкладывать svg
я в курсе...
В первом примере у нас viewBox="0 0 600 300"
такой. см второй пример
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 300">
<polygon
points="60,25 140,25 160,60 80,60 "
style="fill: yellow; fill-opacity:0.5; stroke: black;" />
<polygon points="50,147.5 87.5,120 122.5,147.5 110,190 65,190"
style="fill: blue; fill-opacity:0.7; stroke: black; " />
<polyline stroke="red" stroke-width="3px" fill="black"
points=" 50,80 140,80 80,100 180,100 160,85 160,115 180,100" />
</svg>
А вот во втором примере viewBox="0 0 1200 700"
и естественно, дает такую разницу...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1200 700">
<polygon
points="60,25 140,25 160,60 80,60 "
style="fill: yellow; fill-opacity:0.5; stroke: black;" />
<polygon points="50,147.5 87.5,120 122.5,147.5 110,190 65,190"
style="fill: blue; fill-opacity:0.7; stroke: black; " />
<polyline stroke="red" stroke-width="3px" fill="black"
points=" 50,80 140,80 80,100 180,100 160,85 160,115 180,100" />
</svg>
Если открыть эти два примера одновременно, мы видим, что у нас при одном и том же размере экрана картинки выглядят по-разному, как сделать, чтобы они выглядели одинаково и viewBox="0 0 N N" подгонялся на всю ширину экрана?
Знаю, что width="" height=""
для svg
можно задать в процентах. А вот viewBox="0 0 N N"
можно реализовать в процентах, и как это все грамотно и правильно реализовать?
use
, как для вызова группы объектов, так и для вызова отдельных
частей блока. <meta charset="utf-8">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1200 700">
<rect width="100%" height="100%" fill="greenyellow" />
<defs>
<desc> Прячем фигуры для дальнейшего многократного использования </desc>
<g id="block">
<polygon id="poly"
points="60,25 140,25 160,60 80,60 "
style="fill: yellow; fill-opacity:0.5; stroke: black;" />
<polygon id="pentagon" points="50,147.5 87.5,120 122.5,147.5 110,190 65,190"
style="fill: blue; fill-opacity:0.7; stroke: black; " />
<polyline id="zigzag" stroke="red" stroke-width="3px" fill="black"
points=" 50,80 140,80 80,100 180,100 160,85 160,115 180,100" />
</g>
</defs>
<svg viewBox="0 0 600 300">
<desc> Выводим блок фигур с новым viewBox </desc>
<use xlink:href="#block" />
</svg >
<svg viewBox="-100 0 600 300" >
<desc> Выводим блок фигур с тем же viewBox но сдвигаем вправо на 100px </desc>
<use xlink:href="#block" />
</svg>
<svg viewBox="-200 -150 600 300" >
<desc> Выводим блок фигур сдвигаем вправо на 200px и опускаем вниз на 150px </desc>
<use xlink:href="#block" />
</svg>
<svg viewBox="-400 -150 600 300" >
<desc> Выводим только зигзаг сдвигаем вправо на 400px и опускаем вниз на 150px </desc>
<use xlink:href="#zigzag" />
</svg>
<svg viewBox="-400 140 600 300" >
<desc> Выводим только пятиугольник сдвигаем вправо на 400px и поднимаем на 150px </desc>
<use xlink:href="#pentagon" />
</svg>
<svg viewBox="0 -250 600 300" >
<desc> Выводим только Параллелограмм опускаем на 250px </desc>
<use xlink:href="#poly" />
</svg>
</svg>
* {
margin: 0;
padding: 0;
}
<svg width="100%" height="100%" viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%"/>
<rect width="97%" height="97%" x="15" y="10" fill="gray"/>
<svg width="100%" height="100%" viewBox="0 0 600 300">
<polygon points="60,25 140,25 160,60 80,60 " style="fill: yellow; fill-opacity:0.5; stroke: black;" />
<polygon points="50,147.5 87.5,120 122.5,147.5 110,190 65,190" style="fill: blue; fill-opacity:0.7; stroke: black; " />
<polyline stroke="red" stroke-width="3px" fill="black" points=" 50,80 140,80 80,100 180,100 160,85 160,115 180,100" />
</svg>
</svg>
Может быть Вам подойдёт способ масштабирования с помощью атрибута transform?
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<button type="button"
onclick="document.getElementById('group1').setAttribute('transform', 'scale(1)')">
1x</button>
<button type="button"
onclick="document.getElementById('group1').setAttribute('transform', 'scale(2)')">
2x</button>
<button type="button"
onclick="document.getElementById('group1').setAttribute('transform', 'scale(3)')">
3x</button>
<button type="button"
onclick="document.getElementById('group1').setAttribute('transform', 'scale(4)')">
4x</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1200 700">
<rect width="100%" height="100%" fill="gray"/>
<g id="group1">
<polygon
points="60,25 140,25 160,60 80,60 "
style="fill: yellow; fill-opacity:0.5; stroke: black;" />
<polygon points="50,147.5 87.5,120 122.5,147.5 110,190 65,190"
style="fill: blue; fill-opacity:0.7; stroke: black; " />
<polyline stroke="red" stroke-width="3px" fill="black"
points=" 50,80 140,80 80,100 180,100 160,85 160,115 180,100" />
</g>
</svg>
</html>
Вот здесь разбираются на пальцах вопросы масштабирования. И вот здесь.
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Привет всемВопрос такой может кто уже сталкивался есть такая верстка к примеру
Как сделать, чтобы зеленый блок развернулся на весь экран по ширине, при условии, что его нельзя менять его вложенность относительно того...