使用 Angular 属性指令对 SVG 元素进行 IE/Edge 渲染

Question

你好互联网人！我有许多 IE 特定问题之一，希望有人能帮助我解决...

我正在尝试在属性级指令中使用 ng-transclude 来将内容转入 SVG 中。我将属性放在 SVG 元素上，并尝试通过 ng-repeat 渲染一系列矩形（或者实际上，我想要的任何 SVG 元素）。这一切都适用于 Firefox、Chrome 甚至 Opera。然而，使用 IE 和新的 Edge 浏览器，浏览器只会清空应该被嵌入的内容（我得到一个空的父元素）。

angular.module("test", []).directive("transcludeTest", [function(){
  return{
    restrict: 'A',
    templateNamespace:"svg",
    transclude: true,
    template: '<g ng-transclude></g>'
  }
}]);

<svg>
  <g transclude-test>
    <!-- whatever SVG content I want -->
    <rect x="50" y="50" width="100" height="100"></rect>
  </g>
</svg>

结果：

<svg>
  <g transclude-test=""></g>
</svg>

更奇怪的是，在 HTML 元素（Div 等）上使用属性级指令可以正常工作。

这有点难以解释，所以我在一个例子中包含了一个 Plunker。它应该用“Testing”和 3 个黑色方块渲染 3 个 h1 标签。在普通浏览器中，一切都按预期加载。在 Microsoft 浏览器中，仅呈现“测试”文本。

http://plnkr.co/edit/tx2nKq0NA3GGV6PUwnWq

Answer 1

事实证明，IE 和 Edge 不能正确支持 AngularJS 和 SVG。为了让它工作，你必须实施一些技巧。第 1 步：从 Angular SVG 指令中删除所有嵌入。他们就是行不通。第 2 步：在所有 SVG 指令上设置 replace:true。

在此处查看示例： http://plnkr.co/edit/tx2nKq0NA3GGV6PUwnWq

angular.module("test", []).directive("angularTest", [function(){
    return{
     restrict: 'A',
        templateNamespace:"svg",
        replace: true,
        template: '<g><rect ng-repeat="step in [1,2,3]" width="50" height="50" x="0" y="10" ng-attr-x="{{step * 50}}" stroke="#dbdbdb" fill="#000000" stroke-width="1"></rect> </g>'
    }
}]);

令人讨厌的是，这意味着您必须将所有可能被嵌入到模板中的内容都包含在内。或者，如果您可以摆脱它，请不要支持 IE/Edge ;-)

Answer 2

您必须用<object> 标记包装被剥离的 svg 内容，然后只删除对象标记，留下奶油牛轧糖中心。

angular.module("test", []).directive("transcludeTest", [function(){
  return {
    restrict: "E",
    transclude: true,
    template: "<object type='image/svg+xml' ng-transclude><g></g></object>"
  }
}]);

我从这篇文章中获得了一些灵感，尽管他的解决方案似乎超出了我们的需要。 http://blog.akquinet.de/2014/02/26/interactive-svg-with-angularjs-part-2/