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

时间:2018-01-16 19:41:21

标签: svg vuejs2 internet-explorer-11

我需要从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-showclass,我的模板中有一个<svg>容器,我将SVG字符串添加到v-html。 我从收到的SVG文档中删除了<svg>元素,并解析了字体的相对路径,因为我正在使用SVG。

1 个答案:

答案 0 :(得分:0)

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

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

因此,有两种可能的修复方法:升级VueJS版本或使用自定义渲染功能并手动为SVG内容构建VNode。