Question

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

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

＆＃13;

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)

＆＃13;

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

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

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

当给定100％宽度且没有高度时，我应该如何确保SVG在所有浏览器中正确缩放？

0 个答案: