title: Why don't CSS filters work on SVG elements in Chrome?
body: <p>As far as I understand, CSS filters <a href="http://caniuse.com/#search=filter" rel="noreferrer">should work</a> anywhere in Chrome, but I fail to make them apply to SVG elements.</p>
  
  <p>This works fine in <s>all</s> most browsers:</p>
  
  <pre><code>div{ filter:sepia(50%) }
  </code></pre>
  
  <p>However, this will not work in Chrome:</p>
  
  <pre><code>rect{ filter:sepia(50%) }
  </code></pre>
  
  <p>Here is an example: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div{
      width:100px;
      height:50px;
      background-color:red;
  }
  rect{
      fill:red;
  }
  rect:hover, div:hover{
      -webkit-filter:sepia(50%);
      -moz-filter:sepia(50%);
      filter:sepia(50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;SVG&lt;/h2&gt;
  &lt;svg width="100" height="50"&gt;
      &lt;rect x="0" y="0" width="100" height="50"/&gt;
  &lt;/svg&gt;
  
  
  &lt;h2&gt;DIV&lt;/h2&gt;
  &lt;div&gt;&lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>...and here is a fiddle: <a href="https://jsfiddle.net/LtffLagn/2/" rel="noreferrer">https://jsfiddle.net/LtffLagn/2/</a></p>