5

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

2
  • viewBox в процентах не допускается, только цифровые значения картинку бы ещё хорошо добавить или можно взять свою? Я правильно понял, что вы хотите один svg использовать в качестве фона, как вы планируете его добавлять? Поверх фона svg будут другие объекты svg? 21 фев 2018 в 7:07
  • @Alexandr_TT, ты правильно, вся эта конструкция будет состоять из разных деталей svg
    – Air
    21 фев 2018 в 7:18

3 ответа 3

5
  • Попутно получился пример с множеством использования вложенных 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>

4

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

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

6
  • 1
    Очень информативно:)
    – Arthur
    21 фев 2018 в 17:00
  • 1
    Пожалуйста, публикуйте ссылки в качестве дополнения к вашему ответу, а не вместо него. После изменения или удаления материалов по ссылке ваш ответ в нынешней редакции не будет иметь смысла. 21 фев 2018 в 17:21
  • @tutankhamun Вас понял. 21 фев 2018 в 17:24
  • 1
    @MindCleaner, уж лучше виртуальную область просмотра менять(viewBox), чем делать увеличение с помощью transform. Но, как вариант вполне подходит
    – Arthur
    21 фев 2018 в 18:47
  • @MindCleaner, заходи в чат chat.stackexchange.com/rooms/70612/svg-chat
    – Air
    21 фев 2018 в 19:13
3

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.