title: Can I use an in-document SVG to mask a div?
body: <p>I have an <code>&lt;svg&gt;</code> in my HTML document that I need to manipulate to make animations. Additionally, I need to use it as a <code>mask-image</code> for another <code>&lt;div&gt;</code>. I've always been able to use <code>mask-image: url(&quot;path/to/file.svg&quot;);</code> but the problem is that I need to manipulate the SVG for animations, so I can't just link to a static SVG file. I need to link to an SVG that's in the same DOM.</p>
  <p>I looked into the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image#formal_syntax" rel="nofollow noreferrer">MDN documentation, and it appears that I can pass an element with ID selector</a>. But I cannot figure out the syntax:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#outerBorder {
    border: 1px dashed #f90;
  }
  #logoVisual {
    width: 100px;
    height: 100px;
    mask-image: url(#logoSource);
    background: linear-gradient(#ff9900, #0099ff);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="logoSource" viewbox="0, 0, 10, 10" width="50" height="50"&gt;
    &lt;path d="M5,0L0,5L5,10L10,5Z" fill="#000000"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  
  &lt;div id="outerBorder"&gt;
    &lt;div id="logoVisual"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The mask-image isn't being applied to the iner <code>&lt;div&gt;</code>. Is what I'm attempting here possible at all? Or am I misreading the MDN documentation?</p>