如何指定 xml namespace is SVG for ui-router partial templates？

Question

我第一次没有找到任何解决方案来解决我在使用 AngularJS 和 UI-router 开发 Web 应用程序时遇到的问题。

问题：由 SVG 元素组成的部分模板不是在正确的命名空间中创建的，因此不会显示在某些浏览器上 - 即 FF、Safari（我没有在最新的 IE 上尝试过）。请注意，此问题不会出现在 Chrome 或 Opera 中，因为所有元素都已正确呈现。

我已经能够使用简单的 Plunkr 重现该问题： (http://plnkr.co/edit/u3mfJD9I2EuZ6wbfl4B6).

index.html
<body>
  <h1>nested States</h1>
  <div ui-view="home"></div>
</body>

home
<svg height="500px" width="500px">
    <g ui-view="nested"></g>
</svg>

nested 
<g ng-repeat="x in [1,2,4,5]">
  <text x="50" y="{{50*x}}">text in ng repeat is somehow OK</text>
  <g ui-view="circle"></g>
</g>
<g>
  <text x="10" y="15">I am not interpreted as SVG</text>
</g>

circle
<circle r="10" cx="30" ng-attr-cy="{{50*x}}"></circle>

检查元素属性我发现它们有 proto : HTMLUnknownElementPrototype

我在 struggling/investigating 期间收集的一些东西：

ng-repeat 似乎以某种方式找到了解决其直接子标签问题的方法，如我的 plunkr 所示。
之前的 Angular 版本中存在一个已知错误，即无法在 ngInclude 模板中正确创建 SVG 节点，这与我的示例非常相似。这个特定问题似乎与称为 innerHtml 的东西（我需要研究的一个概念）有关并且已修复。这可能就是 ngRepeat direct children 正常工作的原因。我在这里疯狂地推断......事实是我不知道。
这让我想到这个问题可能与 ui-router 有关，而不是 angular 本身。

任何帮助将不胜感激，非常感谢， J.

Answer 1

HTML 5 规范不久前更改了 innerHTML 的工作方式，以尝试更好地适应 SVG。

UA 正在赶上规范的变化，Chrome 是第一个做的，Firefox 将从版本 36 开始（目前处于 Beta 版，发布于2015 年 2 月 24 日）。 Safari 和 IE 也可能会在某个时候迎头赶上。

同时，您需要使用 javascript 在正确的命名空间中重新创建元素。

如何指定 xml namespace is SVG for ui-router partial templates？

How to specify xml namespace is SVG for ui-router partial templates?

svg

xml-namespaces

angularjs

angular-ui-router