如何在IE10+；中将AngularJS与内联交互式SVG结合使用；？

内联SVG在Firefox和Chrome中运行良好。某些实例在IE10+中工作，如果运行plunker，您将看到：

这是我的问题，普朗克：

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=“”。有什么建议吗

---

编辑：这两个示例之间的一个关键区别是，失败的一个示例嵌入到正在包含的模板中。

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

这是一篇写得很好、易于理解的文章，展示了将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）

另一件需要注意的事情是，我发现在svg周围放置一个带有style=“width:999px；height:999px”的div包装器可以解决IE中出现的svg缩放问题