Vue.js 渲染 SVG 片段在 IE11 中失败

Question

我需要从 AWS 获取大量 SVG 文档，并使用 vue.js 来呈现 SVG 的内容。这在 Chrome、Firefox、Edge 和 Safari 中运行良好，但在 IE11 中失败且没有错误。

我创建了 jsFiddle 来说明我的问题：https://jsfiddle.net/dotnetCarpenter/pp7bcLkk/

原始 SVG 文件可以在这里查看并在 IE11 中呈现：https://napp-siesta-test.s3-eu-west-1.amazonaws.com/siesta-demo-mwqxbrqx/uploads/1506688653629/viewer/472.svg

由于我需要在 SVG 上设置 v-show 和 class，因此我的模板中有一个 <svg> 容器，我通过 v-html 添加了 SVG 字符串。 我从收到的 SVG 文档中剥离了​​ <svg> 元素，并解析了字体的相对路径，因为我内嵌了 SVG。

Answer 1

正如讨论的in this issue v-html 使用innerHTML 对IE 中的SVG 元素没有影响。

幸运的是，在 VueJS 2.6 中有一个 workaround added。

所以对你来说有两个可能的解决方法：升级 VueJS 版本或使用自定义渲染函数并手动为 SVG 内容构建 VNode。