Question

我正在尝试调整SVG的大小以适合最大浏览器尺寸。 SVG存储为DIV的innerHTML。不管我做什么，svg都不会调整大小。

<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%;
}

这里是您代码的working jsFiddle to demonstrate this working。

或者，如果您想通过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%';

更新

有必要在SVG上定义一个viewbox，以使上面显示的调整大小行为起作用。 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);

此can be found here

的有效示例

使用内嵌SVG调整div的大小

1 个答案:

更新