java中如何设置浏览器宽度,如果给定100％宽度且没有高度，我应该如何在所有浏览器中正确地确保SVG的比例？...

我发现了一个SVG扩展情况，IE 10和IE 11的处理方式与大多数其他浏览器不同，我想知道这是否是IE行为“错误”的区域，我需要专门编写代码来处理这个bug，或者如果我误解了SVG，我应该做一些完全不同的事情 .

情况是当你有一个宽度=“100％”的svg时，viewBox =“0 0 100 100”并且父容器内部的高度未定义，具有明确的宽度，没有明确的高度 . 在chrome和其他浏览器中，浏览器缩放SVG以占用父级的填充宽度，然后根据视图框定义的宽高比缩放svg的高度 . 以下代码段中定义了一个示例 .

var document = window.document

var svgns = "http://www.w3.org/2000/svg";

var div = document.createElement("div")

div.setAttribute("style", "width:200px;")

var svg = document.createElementNS(svgns, "svg");

svg.setAttributeNS(null, "viewBox", "0 0 100 100")

svg.setAttributeNS(null, "width", "100%")

var rect = document.createElementNS(svgns, 'rect');

rect.setAttributeNS(null, 'x', 0);

rect.setAttributeNS(null, 'y', 0);

rect.setAttributeNS(null, 'height', '100');

rect.setAttributeNS(null, 'width', '100');

svg.appendChild(rect);

div.appendChild(svg)

document.body.appendChild(div)

在此特定示例中，父容器显式设置为200px，svg扩展为200x200，SVG内的rect填充整个空间 .

在IE中，由于某种原因，浏览器无法正确缩放SVG元素的高度 . 开发人员工具说SVG是200x150 . SVG内部的矩形仅扩展为150x150，因此保留了纵横比，但不清楚为什么整体尺寸更小 .

在我不想设置明确高度的情况下，是否有一种良好的跨浏览器方式来确保SVG适当扩展？或者我应该将上面的代码片段用于上面，并使用它来检测我何时处理错误的SVG实现并为这些方案编写特定代码？