Внутренний коэффициент для встроенного SVG

Question

Я строю встроенный SVG с JS. Пропорции (он же соотношение) SVG динамичны: в любой момент его можно изменить с JS.

Я хотел бы сделать SVG отзывчивым. Вот как я бы сделал это с <img>:

img {
  width: 100%;
  height: auto;
}

Но это не будет работать для <svg>, Скрипка: http://jsbin.com/vobaq/1/edit?html,css,output

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

Answer 1

Решение состоит в том, чтобы использовать viewbox атрибут вместо width а также height, Тогда вам даже не нужен CSS width: 100%; height: auto;!

Демонстрация: http://jsbin.com/vobaq/4/edit?html,css,output