title: Replicate filter (hue-rotate) in Firefox? (dynamically)
body: <p>I have an image which has this 'hue' class:</p>
  
  <pre><code>.hue {
          -webkit-transition:all 1s ease-in-out; 
       transition:all 1s ease-in-out;
  
      -webkit-filter: hue-rotate(0deg); 
      filter:hue-rotate(0deg); 
  }  
  </code></pre>
  
  <p>Then I change this hue with jquery:</p>
  
  <pre><code>$('.hue').css({
          '-webkit-filter'    : 'hue-rotate('+d+'deg)', 
          'filter'            : 'hue-rotate('+d+'deg)'  
  
  });
  </code></pre>
  
  <p>which happens slowly as it should in Chrome and Safari (webkit). What do I need to do to get this working in Firefox?</p>
  
  <p>As far as I know there is no -moz-filter or -moz-transition (<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" rel="nofollow noreferrer">source</a>) and hue-rotate should work in FF (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#hue-rotate%28%29" rel="nofollow noreferrer">source</a>).</p>
  
  <p>There is almost the same question asked <a href="https://stackoverflow.com/questions/20951009/replicate-css-filter-using-jquery">here</a> but the answer doesn't suit me since libraries like <a href="http://mezzoblue.github.io/PaintbrushJS/demo/index.html" rel="nofollow noreferrer">PaintbrushJS</a> have predefined filters whereas I need to set hue value myself.</p>
  
  <p>Any help or workaround to accomplish this in FF highly appreciated!</p>
  
  <p><strong>EDIT:</strong> <a href="http://www.pixastic.com/lib/docs/actions/hsl/" rel="nofollow noreferrer">Pixastic</a> seems to allow setting custom values, but I can't apply the transition or slow effect ... This is the last issue now :)</p>
  
  <p><strong>EDIT2</strong> I managed to set hue on FF with the help of SVG (rather ugly). If you add next line to your css (next to -webkit-filter which works for Chrome and Safari): </p>
  
  <pre><code>filter:url(file.svg#myFilter)
  </code></pre>
  
  <p>and create file.svg :</p>
  
  <pre><code>&lt;?xml version="1.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 xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;defs&gt;
     &lt;filter id="myFilter"&gt;
       &lt;feColorMatrix type="hueRotate" values="140"/&gt;
     &lt;/filter&gt;
     &lt;filter id="myFilter2"&gt;
       &lt;feColorMatrix type="hueRotate" values="50"/&gt;
     &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>this works. Anyhow it fails when trying to change it dynamically like this:</p>
  
  <pre><code>$('.hue').css({
      '-webkit-filter'    : 'hue-rotate('+d+'deg)', /* this works */
      'filter'            : 'url(filters.svg#'+myFilterName+')' /* this doesnt */
  });
  </code></pre>
  
  <p>(I can see that the change on the element occurred but page just goes white)</p>