AngularJS/Dynamic <svg> 未在 Microsoft IE 11 中编译成 DOM答案

【问题标题】：AngularJS/Dynamic <svg> not compiling into DOM in Microsoft IE 11AngularJS/Dynamic <svg> 未在 Microsoft IE 11 中编译成 DOM
【发布时间】：2017-09-05 07:06:54
【问题描述】：

我的问题是我的 AngularJS（最新 v1.X）无法添加到我在 IE 中生成的 DOM svg 元素。

我在开发控制台中没有显示任何错误。我的应用程序已加载（因此也加载了控制器），因为 svg 容器的宽度和高度由 Angular 设置。

该应用程序在 Firefox、Chrome、平板电脑 Chrome 和 Android 浏览器上运行良好...

我的指令：

'use strict';
My_App.directive('ngHtmlCompile', ["$compile", function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.ngHtmlCompile);
            }, function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    }
}]);

我的 HTML：

<!DOCTYPE html>
<html lang="fr" ng-app="My_App" ng-controller="App">
    <head>
        <meta charset="UTF-8">
        <title>My App</title>
        <style>
            * { margin:0; padding:0; @import url('https://fonts.googleapis.com/css?family=Open+Sans'); font-family: 'Open Sans', sans-serif; font-weight: bold; } /* Retire les espaces autour du canvas */

            html, body { width:100%; height:100%; } /* Override le comportement des navigateurs */

            svg { display:block;background-color: dimgrey;} /* Retire la scrollbar */

            svg text {
                cursor: default;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            ::selection, ::-moz-selection{background: none;}

        </style>
        <script type="text/javascript" src="angular/angular.min.js"></script>
        <script type="text/javascript" src="js/MyApp.js"></script>
    </head>
    <body>
        <svg id="MyApp" ng-cloak ng-attr-width="{{svg.width}}" ng-attr-height="{{svg.height}}" ng-html-compile="html"></svg>
    </body>
</html>

控制器方面，我的 $scope.html 在启动时使用 XHR 请求更新一次，然后每 5 秒更新一次。然后调用 ngHtmlCompile 来读取它，并将存储的 html 作为 svg 的子项添加。

如果有什么遗漏，你可以问我。第一次发帖，如果我的请求做错了什么，请随时告诉我。最后，对不起，如果我的英语不好，我是法国人。

感谢您的帮助。

【问题讨论】：

在 IE 上你不能使用 .html() 方法来创建 SVG 元素。 IE11 发布后，规范更改为支持此功能。因此，较新的浏览器确实支持这一点。
感谢您的回复。我很高兴知道现在问题出在哪里。那么有什么解决方案可以在 IE11 上运行吗？我可以使用画布，但这意味着重写每个绘图函数以支持画布。
我不能只使用 ng-view，并使用应用程序在 html 文件中构建 svg 元素吗？我应该试试。

标签： angularjs internet-explorer svg microsoft-edge

【解决方案1】：

就像上面的评论所说的（感谢Robert Longson），html() 函数在 IE 11 上不起作用。它甚至没有出现在开发控制台中出现问题。

作为一种解决方案（主要是，我只是用另一种方式），我使用 ngRoute 模块 进行 angular。

index.html 现在只是一个<div ng-view> 标签的容器，而我的<svg> 放在了一个include.html 中。在此，您可以在任何属性中使用任何$scope var，就完成了。

只要没有人知道我们无法在 IE11 上生成 html，我就不会接受这个答案，因为这是我最初的目的。

【讨论】：

【解决方案2】：

如果您似乎可以使用Element.insertAdjacentHTML() 而不是Element.html()。它似乎适用于 IE11。

var svgStr='<svg><rect width="100%" height="100%" fill="red"/></svg>';

var div = document.getElementById("test");
div.insertAdjacentHTML('afterbegin', svgStr);

&lt;div id="test"&gt;&lt;/div&gt;

【讨论】：

它适用于...对于没有 {{scopeVar}} 的元素。知道如何编译它吗？并且 DOM 被破坏了，每个 html 标签都是在前一个标签中创建的......似乎'afterbegin'是递归的。