时间戳

首页 > 解决方案 > 使用内联 svg 调整 div 的大小

javascript - 使用内联 svg 调整 div 的大小

问题描述

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

这是小提琴：https ://jsfiddle.net/31a9myjg/

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

什么都不做

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

也不做任何事情。这是为什么？是否可以通过这种方式调整 svg 的大小，还是必须将其转换为 png？

标签： javascripthtmlcsssvg

解决方案

尝试添加以下 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 上定义了 awidth和height，则以下定义​​ a 的方法适用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);

可以在这里找到一个工作示例

推荐阅读