1

Собственно, если 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>

6
  • А обязательно это делать на чистом SVG?
    – Alexey Ten
    2 авг 2016 в 7:28
  • @AlexeyTen, а какие предложения? Прямоугольники - это чисто для примера.
    – Qwertiy
    2 авг 2016 в 7:42
  • 1
    Как-то так dabblet.com/gist/8d08d6767737b29683869bd6436fdc2d
    – Alexey Ten
    2 авг 2016 в 8:59
  • @AlexeyTen, конкретно так не годится, но идея интересная. А ещё я не знал, что можно вкладывать svg в svg.
    – Qwertiy
    2 авг 2016 в 9:11
  • @Qwertiy теперь перфекционист в тебе должен страдать (77776), по теме - я меняю viewbox из js 15 июл 2019 в 8:32

1 ответ 1

1

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

img{
   display:block;
   max-width:100%;
   height:auto;
}
3
  • Как это вообще к вопросу относится? Там ни одного тега img в коде нет.
    – Qwertiy
    3 авг 2016 в 19:02
  • @Qwertiy ну замени на svg, в чем разница? Это такое же изображение. Можешь так же попробовать: width: 100%; height: auto; Есть тема хорошая по этому поводу: css-tricks.com/scale-svg
    – user192664
    3 авг 2016 в 19:21
  • Нет, не такое же. Можешь проверить.
    – Qwertiy
    3 авг 2016 в 19:49

Ваш ответ

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

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