如何在 IE10+ 中将 AngularJS 与内联交互式 SVG 一起使用？答案

【问题标题】：How can I use AngularJS with an inline interactive SVG in IE10+?如何在 IE10+ 中将 AngularJS 与内联交互式 SVG 一起使用？
【发布时间】：2015-04-29 13:46:13
【问题描述】：

内联 SVG 在 Firefox 和 Chrome 中运行良好。有些实例在 IE10+ 中工作，如果你运行 plunker，你会看到： http://plnkr.co/edit/CQ6HOtHxAlJd2hxoz1fa?p=preview

这是我的问题插件： http://plnkr.co/edit/09FBW7EFk99vvXlpliLL?p=preview

tl;dp（太长，没写）详细信息：此代码适用于 IE：

      <form novalidate class="simple-form">
        Size: <input type="text" ng-model="size" /><br />
        Pos: <input type="text" ng-model="pos" /><br />
      </form>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height='400' width='400'>
        <square x='0' y='5' size='50' fill='blue'/>
        <rect x='{{pos}}' y='100' width='{{pos}}' height='{{size}}' fill='red'/>
      </svg>

此代码在 IE 中不起作用：

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 360 240" preserveAspectRatio="xMidYMid meet"> 
        <g ng-repeat="zone in sst.zones">
            <g ng-if="zone.camera == 1" transform="scale(0.5)">
                <path d="M {{zone.geometry[0].x}}{{zone.geometry[0].y}} 
                           L {{zone.geometry[1].x}} {{zone.geometry[1].y}} 
                           {{zone.geometry[2].x}} {{zone.geometry[2].y}} 
                           {{zone.geometry[3].x}} {{zone.geometry[3].y}} Z" 
                    fill="none" stroke="red" stroke-width="2" />
            </g>
        </g>           
    </svg>

我注意到，当我查看渲染结果的来源时，d 属性为空，即 d=""。有什么建议吗？

编辑：两个示例之间的主要区别之一是失败的示例嵌入在正在被 ngIncluded 的模板中。

【问题讨论】：

标签： angularjs internet-explorer svg

【解决方案1】：

我在这里找到了解决这个问题的方法：

Replacing (most of) d3.js with pure SVG + AngularJS

这是一篇写得很好、易于理解的文章，展示了将 SVG 与 AngularJS 集成的正确方法。修复是一个简单的更改。不使用 d 属性，而是在它前面加上 ng-attr- 使其变为 ng-attr-d="..." 这可以防止浏览器检测到 SVG 错误，直到 AngularJS 能够发挥它的魔力。

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 360 240" preserveAspectRatio="xMidYMid meet"> 
      <g ng-repeat="zone in sst.zones">
          <g ng-if="zone.camera == 1" transform="scale(0.5)">
              <path ng-attr-d="M {{zone.geometry[0].x}}{{zone.geometry[0].y}} 
                         L {{zone.geometry[1].x}} {{zone.geometry[1].y}} 
                         {{zone.geometry[2].x}} {{zone.geometry[2].y}} 
                         {{zone.geometry[3].x}} {{zone.geometry[3].y}} Z" 
                  fill="none" stroke="red" stroke-width="2" />
          </g>
      </g>           
  </svg>

编辑：针对 IE 修改 plunker 解决问题（已测试 IE11）

http://plnkr.co/edit/j5lM0mTbawUBfZv26dlw?p=preview

另外需要注意的是，我发现使用 style="width: 999px; height:999px" 在 svg 周围放置一个 div 包装器可以解决 IE 中出现的 SVG 缩放问题。在上面的 plunker 中看到这一点。

【讨论】：