如何使用AngularJS在IE10 +内嵌互动SVG？

问题描述

在Firefox和Chrome在线SVGs做工精细。有些情况下IE10 +工作当中，如果你运行plunker您将看到：

这是一个写得很好，很容易理解的文章，显示为SVG与AngularJS整合的正确途径。解决方法是一个简单的变化。相反，使用d属性，你NG-attr- preFIX它，所以它成为NG-ATTR-D =的......这$ P $从直至AngularJS是能够做到的检测SVG错误pvents浏览器它的魔力。

This is a well written, easy to understand article that shows the right way to integrate SVG with AngularJS. The fix is a simple change. Instead of using the d attribute, you prefix it with ng-attr- so it becomes ng-attr-d="..." This prevents the browser from detecting an SVG error until AngularJS is able to do its magic.

 <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）

Revised plunker solving issue for IE (tested IE11)

另外一点需要注意的，我发现，把一个div包装围绕SVG风格=WIDTH：999px;高度：999px解决了与IE浏览器出现SVG的扩展问题。看到这个上面plunker。

Another thing to note, I found that putting a div wrapper around the svg with style="width: 999px; height:999px" solves the SVG scaling issues that occur with IE. See this in the above plunker.

这篇关于如何使用AngularJS在IE10 +内嵌互动SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！