SVG 不呈现 IE 11答案

【问题标题】：SVG not rendering IE 11SVG 不呈现 IE 11
【发布时间】：2017-06-09 10:31:58
【问题描述】：

我有 html 代码 here。 svg 无法使用 IE 11 呈现。无法找出原因。

我在另一个地方看到的添加了：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

我怀疑图像在这里但不可见。或者它可能是未正确解释的大 data=。如何检查？

【问题讨论】：

检查来自 php 的响应的内容类型 - 当前可能不正确 Content-Type:text/html ...您可能需要将 data:image/svg+xml; 放在 svg 之前，您可能需要转义所有 > @lt; # 等等..虽然不确定...从未尝试过。祝你好运
好的，我刚刚完成了：内容类型：image/svg+xml。 W3C 说，php 现在返回有效的 svg。但是现在 html 页面在 Chrome 和 IE 上都不显示图片了。
嗯...尝试丢失 svg 之前的文本？
对不起。在 Chrome 中，执行 data="data:image/svg+xml;http://samuel.levitt.fr/tactik/visu... 时会显示“无效 URL”
它会做......我的坏事。您是否尝试过链接到已渲染的服务器上的静态 svg 文件？看看这是否有效。

【解决方案1】：

我做了什么让它工作：

在svg 文件中：

添加<?xml version="1.0" encoding="utf-8" standalone="no"?>
添加<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
删除height & width 属性
在svg 标记中添加xmlns="http://www.w3.org/2000/svg"

在html 文件中：

【讨论】：

【解决方案2】：

我遇到了类似的问题，就我而言，这是因为 IE 需要在 SVG 中指定 viewBox 属性才能正常进行缩放，而我的 SVG 中缺少该属性。

我变了：

<svg xmlns="http://www.w3.org/2000/svg" width="767" height="1024">

到：

<svg xmlns="http://www.w3.org/2000/svg" width="767" height="1024" viewBox="0 0 767 1024">

viewBox 属性指定<x-origin> <y-origin> <width> <height>。

这篇文章帮助我理解了这个问题的原因：How to scale SVG [css-tricks.com]。

【讨论】：