title: Parsing SVG with AngularJS
body: <p>I am new both to AngularJS and SVG so if i am doing something terribly wrong i apologize.</p>
  
  <p>I am trying to create an SVG pattern with AngularJS:</p>
  
  <p>Code fiddle:
  <a href="http://jsfiddle.net/WFxF3/" rel="nofollow noreferrer">http://jsfiddle.net/WFxF3/</a></p>
  
  <p>Template: </p>
  
  <pre><code>&lt;svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;defs&gt;
          &lt;pattern id="grid" width="{{cubeWidth}}" height="{{cubeHeight}}" patternUnits="userSpaceOnUse"&gt;
              &lt;path d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/&gt;
              &lt;path d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/&gt;
              &lt;!--&lt;rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/&gt;--&gt;
          &lt;/pattern&gt;
  
      &lt;/defs&gt;
  
      &lt;rect width="100%" height="100%" fill="url(#grid)"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>'use strict';
  
  angular.module('gridifyApp')
    .controller('MainCtrl', function ($scope) {
  
          var docWidth = document.width;
          var columns = 12;
          var cubeWidth = docWidth / columns;
          var cubeHeight = 44;
  
          $scope.cubeWidth = cubeWidth;
          $scope.cubeHeight = cubeHeight;
    });
  </code></pre>
  
  <p>It seems to work and yet I get a console error:
  <img src="https://i.stack.imgur.com/Gj1nU.png" alt="console error for angularJS view"></p>
  
  <p>Any ideas why?</p>