title: SVG clip-path for masking element: issue in Chrome
body: <p>I have this simple html page:  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;style&gt;
              body {text-align: center;}
              #dv {
                  background-color: red;
                  width: 300px;
                  height: 300px;
                  clip-path: url(#mask);
                  -webkit-clip-path: url('#mask'); 
                  margin: 0 auto;
              }
              .hidden {width: 0; height: 0;}
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="dv"&gt;&lt;/div&gt;
          &lt;div class="hidden"&gt;
                  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
                  &lt;defs&gt;
                      &lt;clipPath id="mask"&gt;
                           &lt;circle cx="20" cy="20" r="100"/&gt;
                      &lt;/clipPath&gt;
                  &lt;/defs&gt;
                  &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;    
  </code></pre>
  
  <p>If I remove the "margin: 0 auto" I can see the masked div.<br>
  How can I achieve both margin and mask to work properly in chrome?<br>
  (In firefox ot works fine)</p>