title: masking with svg mask defined in html
body: <p>I am trying some very simple test of masking with an SVG shape I create in the html content.
  I have tried different option:</p>
  
  <ul>
  <li>mask, -webkit-mask</li>
  <li>mask-image, -webkit-mask-image</li>
  <li>different MaskUnits and MaskContentUnits</li>
  <li>mask-type: luminance or not</li>
  </ul>
  
  <p>I cannot make it work, I must do something wrong and stupid.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Mask with SVG&lt;/title&gt;
          &lt;link rel="stylesheet" href="/style.css" /&gt;
      &lt;style&gt;
          .testMask {
              -webkit-mask-image: url(#torch);
              mask-image:url(#torch);
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;svg width="0" height="0"&gt;
          &lt;defs&gt;
              &lt;mask id="torch"&gt;
                  &lt;circle cx="0.5" cy="0.5" r="0.1" fill="white" /&gt;
              &lt;/mask&gt;
          &lt;/defs&gt;
      &lt;/svg&gt;
      &lt;div id="mainPage"&gt;
          &lt;img src="/img/Japan.jpg" class="testMask"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Is there something wrong in there?
  Second question would be, is there a way to change the mask coordinates by js?  I want it to follow the mouse pointer.</p>
  
  <p>Thanks!</p>