Изменить размер div с помощью встроенного SVG

Question

Я пытаюсь изменить размер SVG, чтобы он соответствовал максимальным размерам браузера.SVG хранится как innerHTML в DIV.Независимо от того, что я делаю, svg не изменит размер.

Вот скрипка: https://jsfiddle.net/31a9myjg/

<div id="root" style="width:10%; height:10%"></div>

ничего не делает

<object id="root" width=100 height=100></object>

не делаеттоже ничего не делай.Это почему?Можно ли изменить размер SVG таким образом или я должен превратить его в PNG?

Answer 1

Попробуйте добавить следующий CSS-код, который приведет к адаптивному изменению ширины фактического элемента SVG при необходимости:

#root svg {
  width:100%;
}

Вот работающий jsFiddle, чтобы продемонстрировать эту работу с вашим кодом.

В качестве альтернативы, если вы хотите добиться того же поведения с помощью javascript, вы можете обновить ваш скрипт следующим образом (что сделает CSS выше избыточным):

const obj = document.createElement('div');

// svg contains vector data from jsFiddle link in OP
obj.innerHTML = svg;
app.appendChild(obj);

// Adding this achieves the same result as the CSS above    
obj.querySelector('svg').style.width = '100%';

Обновление

Необходимо иметь viewbox, определенный в вашем SVG, чтобы поведение изменения размера, показанное выше, работало.viewbox в основном представляет домен / измерения, к которым относятся координаты в SVG.

Если в SVG определены width и height, то для определения viewbox используется следующий методбудет хорошо работать в большинстве ситуаций:

const svgElement = obj.querySelector('svg');

const width = svgElement.getAttribute('width');
const height = svgElement.getAttribute('height');

// Set the viewbox "domain" from top left (0,0), to bottom right (width, height)
svgElement.setAttribute('viewBox', "0 0 " + width + " " + height);

Рабочий пример этого можно найти здесь