Как сделать респонсив-svg по одной из осей?

345

10 декабря 2016, 10:40

Собственно, если svg задать viewBox, то он масштабируется, подгоняя свой размер под контейнер. Но я хочу, чтобы он только по горизонтальной оси масштабировался, а по вертикальной изменял высоту без внутреннего масштабирования.

В сниппете одинаковая svg-разметка помещена в div'ы разного размера. В первой секции отображение сделано только с помощью стилей, а во второй атрибут viewBox изменяется скриптом, чтобы показать, какой результат я хочу получить.

Обращаю внимание, что высота зелёного прямоугольника совпадает с шириной синих, т. е. растягивание без сохранения пропорций не подходит.

var divs = document.querySelectorAll(".expected div"); 
 
for (var q=0; q<divs.length; ++q) { debugger 
  var d = divs[q]; 
  var svg = d.querySelector("svg"); 
  svg.setAttribute("viewBox", "0 0 10 " + 10 * d.clientHeight / d.clientWidth); 
}

svg { display: block; width: 100%; height: 100%; } 
div { display: inline-block; vertical-align: middle; border: 1px dotted red; } 
section + section { margin-top: 1em; } 
 
.a { width: 12em; height: 12em; } 
.b { width: 4em; height: 8em; } 
.c { width: 8em; height: 4em; }

<section> 
  <div class="a"> 
    <svg viewBox="0 0 10 10"> 
      <rect x="0" y="50%" width="100%" height="50%" fill="silver" /> 
      <rect x="0" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="9" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="0" y="0" width="10" height="1" fill="green" /> 
    </svg> 
  </div> 
  <div class="b"> 
    <svg viewBox="0 0 10 10"> 
      <rect x="0" y="50%" width="100%" height="50%" fill="silver" /> 
      <rect x="0" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="9" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="0" y="0" width="10" height="1" fill="green" /> 
    </svg> 
  </div> 
  <div class="c"> 
    <svg viewBox="0 0 10 10"> 
      <rect x="0" y="50%" width="100%" height="50%" fill="silver" /> 
      <rect x="0" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="9" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="0" y="0" width="10" height="1" fill="green" /> 
    </svg> 
  </div> 
</section> 
 
<section class="expected"> 
  <div class="a"> 
    <svg viewBox="0 0 10 10"> 
      <rect x="0" y="50%" width="100%" height="50%" fill="silver" /> 
      <rect x="0" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="9" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="0" y="0" width="10" height="1" fill="green" /> 
    </svg> 
  </div> 
  <div class="b"> 
    <svg viewBox="0 0 10 10"> 
      <rect x="0" y="50%" width="100%" height="50%" fill="silver" /> 
      <rect x="0" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="9" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="0" y="0" width="10" height="1" fill="green" /> 
    </svg> 
  </div> 
  <div class="c"> 
    <svg viewBox="0 0 10 10"> 
      <rect x="0" y="50%" width="100%" height="50%" fill="silver" /> 
      <rect x="0" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="9" y="0" width="1" height="100%" fill="blue" /> 
      <rect x="0" y="0" width="10" height="1" fill="green" /> 
    </svg> 
  </div> 
</section>

Answer 1

Попробуйте CSS:

img{
   display:block;
   max-width:100%;
   height:auto;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Передача имени ссылки в php файл

Имеется множество ссылок вида

281

HTML

Стоит ли комбинировать ключевые слова в мета-описаниях?

Давайте сразу перейдём к примеру, чтобы понять, о чём я говорюКак будет лучше написать из приведённых ниже двух вариантов?

310

HTML

div и padding, отступ для вложенного блока

Извините за тривиальный вопрос

240

HTML

Как в циклической карусели изменить у центрального элемента прозрачность?

Есть зацикленная карусель owl carousel 2 у которой элементы изначально полупрозрачные, а при наведении становятся непрозрачнымиХочу сделать так,...

1004