title: Animating width/height of SVG image with jQuery displays improperly in Firefox
body: <p>I am encountering a potential bug while using jQuery 1.7.1 to animate the height of an SVG image. I want the image height to shrink to 0 while maintaining the same width. The following is a minimum working example of what I'm doing, and it works perfectly in Chrome and Safari. EDIT: as of Chrome 17, Chrome exhibits the same behavior as Firefox, described below; it's necessary to set <code>preserveAspectRatio="none"</code> to get the desired behavior. Apparently the former behavior in Chrome was a bug (described in <a href="https://bugs.webkit.org/show_bug.cgi?id=34521" rel="nofollow">this bug report</a>).</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      var flip_timer = setInterval('flip()', 1000),
          flip = function() {
            var height = 64,
                width = 96,
                image = $('img');
  
            image.animate({'height': 64, 'width': 0}, 200, 'linear', function() {
                              image.animate({'height': 64, 'width': 96}, 200);
                         });
            };
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;img src="image.svg" style="height:64px;width:96px;" /&gt; 
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>However, in Firefox, the width changes as well as the height: it seems to be keeping the the same proportions (aspect ratio), so when I shrink the height, it shrinks the width as well. (Similar behavior occurs when I try changing just the width, but leaving the height the same.)</p>
  
  <p>If I use a PNG rather than an SVG, Firefox works exactly as I expect.</p>
  
  <p>I've also tried various versions of jQuery, back to 1.2.6, and saw no change in any of this behavior. I tried not setting the unchanging parameter, and I also experimented with passing in strings vs integers, or reversing the order that the width/height were passed in, and saw no changes.</p>
  
  <p>Is this a bug in Firefox, a bug in jQuery, or something else? (I was hoping to gather some more feedback here before filing a bug report, in case this is already well-known or in case I made a mistake somewhere.) Thanks!</p>
  
  <p>EDIT: here are the contents of the SVG I've been testing with, in case it helps:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="80px" height="60px" viewBox="0 0 80 60" enable-background="new 0 0 80 60" xml:space="preserve"&gt;
  &lt;linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="40.0005" y1="60" x2="40.0005" y2="4.882812e-04"&gt;
      &lt;stop  offset="0" style="stop-color:#0D0D0D"/&gt;
      &lt;stop  offset="1" style="stop-color:#000000"/&gt;
  &lt;/linearGradient&gt;
  &lt;rect fill="url(#SVGID_1_)" width="80" height="60"/&gt;
  &lt;path fill="#FFFFFF" d="M53.568,60c-0.006-2.305-0.082-5.051-0.234-8.261c-0.158-3.344-0.648-6.569-1.475-9.676
      c-0.826-3.108-2.164-5.764-4.012-7.965c-1.85-2.203-4.504-3.304-7.965-3.304c-3.383,0-5.979,1.101-7.787,3.304
      c-1.811,2.201-3.127,4.856-3.953,7.965c-0.826,3.106-1.318,6.332-1.476,9.676c-0.151,3.205-0.229,5.959-0.235,8.261H9.675
      c0.019-8.13,0.825-14.935,2.419-20.414c1.611-5.546,3.794-9.972,6.549-13.275c2.752-3.304,5.959-5.664,9.617-7.08
      c3.657-1.416,7.531-2.124,11.622-2.124c4.168,0,8.083,0.708,11.741,2.124s6.883,3.776,9.676,7.08s4.996,7.729,6.609,13.275
      C69.5,45.064,70.303,51.872,70.322,60H53.568z"/&gt;
  &lt;/svg&gt;
  </code></pre>