如何使用AngularJS在IE10 +内嵌互动SVG? [英] How can I use AngularJS with an inline interactive SVG in IE10+?
问题描述
在Firefox和Chrome在线SVGs做工精细。有些情况下IE10 +工作当中,如果你运行plunker您将看到:
http://plnkr.co/edit/CQ6HOtHxAlJd2hxoz1fa?p=$p$pview一>
Inline SVGs work fine in Firefox and Chrome. Some instances work in IE10+ which you will see if you run the plunker: http://plnkr.co/edit/CQ6HOtHxAlJd2hxoz1fa?p=preview
下面是我的问题plunker:
http://plnkr.co/edit/09FBW7EFk99vvXlpliLL?p=$p$pview一>
Here's my problem plunker: http://plnkr.co/edit/09FBW7EFk99vvXlpliLL?p=preview
在TL; DP(太长了,没花掉)的详细信息:
这code工作在IE浏览器:
The tl;dp (too long, didn't plunk) details: This code works in 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>
这code没有在IE浏览器:
This code does not work in 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 =。有什么建议?
I notice that when I look at the source of the rendered result that the d attribute is empty, i.e. d="". Any suggestions?
编辑:其中一个两个例子之间的主要区别就是没有一个是嵌入在被ngIncluded模板
One of the key differences between the two examples is the failing one is embedded in a template that is being ngIncluded.
推荐答案
我已经找到了解决这个问题就在这里:
I have found the solution to this problem here:
更换(大部分)与纯SVG d3.js + AngularJS
这是一个写得很好,很容易理解的文章,显示为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)
http://plnkr.co/edit/j5lM0mTbawUBfZv26dlw?p=$p$ PVIEW
另外一点需要注意的,我发现,把一个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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!