Angular ng-bind-html svg 到 svg Internet Explorer 不工作

Question

我们正在使用 angular.js 构建一个应用程序，其中我们有一个巨大的 svg 图像，其中包含许多其他 svg 图像和形状。

现在我们面临的问题是，Internet Explorer（甚至 11）不想将 svg-string-variable 绑定到另一个 svg-element。

为了弄清楚问题，我更新了一个有类似问题的 jsfiddle：

在 html 部分的第 4 行，我们有 svg 元素，我们想在其中插入另一个 svg 元素：

<svg xmlns="http://www.w3.org/2000/svg" id="svg" ng-bind-html="ctrl.svg"></svg>

在 ctrl.svg 变量中，我们有一个完整的 svg 字符串，使用 trustAsHtml() 函数将其解析为变量。

在 Firefox 和 Chrome 中这非常有效 - 但在 IE 中却不行。 svg 元素不会被渲染。

如果你现在转到第 4 行并将 svg-element（我们要将 svg-string 绑定到的位置）更改为 div-tag（并删除 "xmlns" 属性), 那么它也适用于 Internet Explorer！

我发现了类似的问题 (SVG and ng-bind-html is not working on IOS using Ionic Framework, )，但建议的解决方案（使用 div-tag 或对子注释使用 ng-repeat）对我们的情况没有解决方案，因为我们需要嵌套的 svgs 并且需要将不同类型的 svgs 加载到我们的 "svg-frame".

有没有人知道我们如何解决这个问题？也许 IE 只需要更多选项来识别 svg-tag 本身。或者第二个链接问题的第一个是大问题吗？

感谢任何想法！

Answer 1

我有一个类似的问题，并通过创建一个显示 svg 的指令解决了它：

angular.module('DeviceView')

    /**
     * @doc directive
     * @name extSvg
     * @description directive for embedding SVG content into a HTML page
     */
    .directive('extSvg', [ '$compile',  function ($compile) {
      return {
        restrict: 'E',
        scope: {

          /**
           * @doc property
           * @propertyOf extSvg
           * @name content
           * @description
           * Contains a SVG string.
           */
          content: '='
        },
        link: function($scope, $element) {
          $element.replaceWith($compile('<svg>' + $scope.content + '</svg>')($scope.$parent));
        }
      };
    }]);

像这里一样使用它：

<ext-svg data-content="vm.model.svg"></ext-svg>

Answer 2

解决这个问题的另一种方法是使用带有 src='path_to_svg' 的 ng-include 属性。与原始问题的唯一区别是您需要将 svg 作为文件（而不是字符串变量中的 svg 代码）。

如果您没有单独文件中的 svg，dec's 应该有帮助！

Angular ng-bind-html svg 到 svg Internet Explorer 不工作

Angular ng-bind-html svg into svg Internet Explorer doesn't work

angularjs

internet-explorer

svg

ng-bind-html