How can I use AngularJS with an inline interactive

Question

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

Here's my problem plunker: http://plnkr.co/edit/09FBW7EFk99vvXlpliLL?p=preview

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>

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>          

I notice that when I look at the source of the rendered result that the d attribute is empty, i.e. d="". Any suggestions?

Edit: One of the key differences between the two examples is the failing one is embedded in a template that is being ngIncluded.

Answer 1

I have found the solution to this problem here:

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

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>

Edit: Revised plunker solving issue for IE (tested IE11)

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

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.