title: SVG images not showing when their size is set through ng-attr-width or ng-style?
body: <p>(N.B. This is a follow-on from <a href="https://stackoverflow.com/q/28093277/575530">another question</a>.)</p>
  
  <p>Here is some simple HTML, CSS, and AngularJS to display three pictures of bullfinches from flickr:</p>
  
  <pre><code>&lt;html ng-app="AngularSVGTestApp"&gt;
  &lt;head&gt;
      &lt;title&gt;Angular SVG Image Size Test&lt;/title&gt;
      &lt;style&gt;
          svg {
              background-color: aqua;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MainCtrl as mainCtrl"&gt;
      &lt;div ng-cloak&gt;
          &lt;svg ng-show="mainCtrl.svg.show" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" width="200" height="400"&gt;
              &lt;!-- https://www.flickr.com/photos/yeliseev/10116904936 --&gt;
              &lt;image xlink:href="https://farm6.staticflickr.com/5535/10116904936_870f94488d_m.jpg"
                     x="20" y="20"
                     width="100" height="100"/&gt;
              &lt;!-- https://www.flickr.com/photos/yeliseev/112992806 --&gt;
              &lt;image xlink:href="https://farm1.staticflickr.com/38/112992806_780ebcd0ce_m.jpg"
                     x="20" y="140"
                     ng-attr-width="mainCtrl.svg.style.width"
                     ng-attr-height="mainCtrl.svg.style.height" /&gt; 
              &lt;!-- https://www.flickr.com/photos/yeliseev/4433515854 --&gt;
              &lt;image xlink:href="https://farm5.staticflickr.com/4058/4433515854_41152445a9_m.jpg"
                     x="20" y="260"
                     ng-style="mainCtrl.svg.style" /&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
      &lt;script src="/Scripts/angular.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          angular.module('AngularSVGTestApp', [])
                  .controller('MainCtrl', [function () {
                      var self = this;
                      self.svg = {
                          show: true,
                          style: {
                              width: 100,
                              height: 100
                          }
                      };
                  }]);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dumbledad/k9vbya2f/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>The three bullfinch images within the SVG differ in how their size is set.</p>
  
  <ol>
  <li>Has its width and height set to 100 explicitly in the HTML</li>
  <li>Has its width and height set to 100 using <code>ng-attr-width</code> and <code>ng-attr-height</code> to bind to model values held in the controller</li>
  <li>Has its width and height set to 100 using <code>ng-style</code> to bind to model values held in the controller</li>
  </ol>
  
  <p>Why don't either of these latter two methods work? What should I use to bind the dimensions of an image in an SVG from AngularJS?</p>