使用<object>和<img/>

Question

我有一个SVG图像，该图像旨在适当地响应各种宽度，但应具有固定的高度。

在我测试过的每个浏览器（包括IE11）中，SVG都嵌入了width元素中的height和<svg>属性。

SVG指定一个高度（以像素为单位），除Edge以外的所有浏览器都使用该高度。 Edge只是将SVG的高度设置为150像素。

请参阅以下Plunk进行复制（我的实际SVG更复杂，但依赖于嵌入式可读文本）：

http://embed.plnkr.co/maFExXewuzonQJ6y4uRr/

---

Repro

Chrome

这是它的外观（Chrome 67）：

---

Edge

这是Edge的作用（38.14393.2068.0）：

---

viewBox

似乎普遍认为，要解决Edge中奇怪的缩放问题，您应该在顶级SVG上指定一个viewBox。不幸的是，这要么保留了错误内容（裁剪或缩小重要内容）的长宽比，要么拉伸了SVG的内容，包括文本-取决于{{的meetOrSlice组件1}}。

---

选项

我无法将原始SVG直接嵌入到页面中，因为它是由服务器端脚本动态生成并嵌入到CMS（我无法为其编写脚本）中。

生成的高度也有所不同，并且不能包含在HTML对象的嵌入代码中。这是因为SVG可能包含可变数量的文本行。

它也必须是preserveAspectRatio才能实现交互。

我可以调整的是：

• 生成的SVG；
• <object>元素的属性；
• <object>周围的HTML（尽管最好将其最小化）；

我也可以包括一些CSS，可能还包括一些JS，尽管我尽可能地避免使用脚本解决方案。

Answer 1

这是一个基本的JavaScript解决方案，似乎可以在Edge中使用。

<object>元素具有一个contentDocument property，通过它可以以DOM表示直接访问SVG。

访问SVG DOM意味着我们可以直接从XML中提取属性，然后将其戳到<object>元素上。

例如，（带有单个<object>元素）：

{
    let o = document.getElementsByTagName('object')[0];
    o.onload = function() {
        o.height = o.contentDocument.rootElement.getAttribute('height');
    }
}

找到一个不依赖JS的解决方案很可爱

此外，如果跨域加载SVG，则此方法似乎不起作用。