Как правильно задать размеры SVG для фона

275
22 февраля 2018, 12:13

Хочу сверстать на 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" можно реализовать в процентах, и как это все грамотно и правильно реализовать?

Answer 1
  • Попутно получился пример с множеством использования вложенных svg/
  • Многократное использование объектов svg c использованием команды use, как для вызова группы объектов, так и для вызова отдельных частей блока.
  • Пример позиционирования объектов внутри вложенных svg

<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>

Answer 2

* { 
  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>

Answer 3

Может быть Вам подойдёт способ масштабирования с помощью атрибута 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>

Вот здесь разбираются на пальцах вопросы масштабирования. И вот здесь.

READ ALSO
Чередование динамически блоков

Чередование динамически блоков

Привет всемВопрос такой может кто уже сталкивался есть такая верстка к примеру

155
Как развернуть вложенный блок на вессь экран по ширине?

Как развернуть вложенный блок на вессь экран по ширине?

Как сделать, чтобы зеленый блок развернулся на весь экран по ширине, при условии, что его нельзя менять его вложенность относительно того...

187
Секрет адаптивной верстки

Секрет адаптивной верстки

Специально нашел видимый пример: У нас есть 2 сайта:

188
В чем заключается ошибка текста? dbForge mysql

В чем заключается ошибка текста? dbForge mysql

Говорит об ошибке в тексте и не может сохранить

230