title: Make an SVG element vertical align from a bottom of a 100% height image
body: <p>I overlay SVG responsive text over an image with 100% height. The image stretches the full screen height of a user's browser.</p>
  <p>However I need to vertically align the SVG text to the bottom left corner instead of the top left of the 100% height image.</p>
  <p>I have tried relative and absolute positioning that you can do with CSS, but when I do it with SVG my text disappears.</p>
  <pre class="lang-css prettyprint-override"><code>#header {
    position: relative;
    min-height: 150px;
  }
  
  #header-content {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  </code></pre>
  <p>Here is my html:</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-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;body&gt;
  
    &lt;div class="img-overlay-wrap"&gt;
      &lt;img src="https://i2.wp.com/www.joelonsoftware.com/wp-content/uploads/2016/12/Pong.png" alt="null" style="width: 100%;max-width: 100%!important;height:100%"&gt;
      &lt;svg viewBox="0 0 1200 800"&gt;
      &lt;style&gt;
        .b-on-w{
          text-anchor: start;
          fill:#000000;
          font-family:Helvetica, arial, sans-serif;
          /*background-color:#ffffff;*/
          display: inline;
          letter-spacing:7px;
          font-size:78px;
        }
  
        .w-on-b{
          text-anchor: start;
          fill:#ffffff;
          font-size:40px;
          font-weight:1600;
          font-family:Helvetica, arial, sans-serif;
          /*background-color:#000000;*/
          display: inline;
          letter-spacing:7px;
          font-size:18px;
        }
  
        .img-overlay-wrap {
          width:100%;
          heigh:100%;
          position: relative;
          display: inline-block; 
  
        }
  
        .img-overlay-wrap img { /* &lt;= optional, for responsiveness */
          display: block;
          max-width: 100%;
          height: auto;
        }
  
        .img-overlay-wrap svg {
          position: absolute;
          top: 0;
          left: 0;
        }
      &lt;/style&gt;
  
      &lt;defs&gt;
        &lt;filter x="-0.03" y="-0.3" width="1.06" height="1.6" id="solid-black"&gt;
          &lt;feFlood flood-color="black"/&gt;
          &lt;feComposite in="SourceGraphic" operator="over" /&gt;
        &lt;/filter&gt;
        &lt;filter x="-0.03" y="-0.04" width="1.06" height="1.08" id="solid-white"&gt;
          &lt;feFlood flood-color="white"/&gt;
          &lt;feComposite in="SourceGraphic" operator="over" /&gt;
        &lt;/filter&gt;
      &lt;/defs&gt;
      
      &lt;text filter="url(#solid-black)" x="25" y="100" class="w-on-b"&gt;I NEED TO GET AN ANSWER&lt;/text&gt;
      &lt;text filter="url(#solid-black)" x="25" y="140" class="w-on-b"&gt;FROM STACKOVERFLOW&lt;/text&gt;
      &lt;text filter="url(#solid-black)" x="25" y="180" class="w-on-b"&gt;FOR AN SVG&lt;/text&gt;
      &lt;text filter="url(#solid-black)" x="25" y="220" class="w-on-b"&gt;ISSUE&lt;/text&gt;
      &lt;text filter="url(#solid-black)" x="65" y="260" class="w-on-b" style="font-weight:bold;"&gt;   &amp;#45; ANOTHER DEV&lt;/text&gt;
      &lt;text filter="url(#solid-white)" x="30" y="400" class="b-on-w"&gt;QUESTION&lt;/text&gt;
      &lt;text filter="url(#solid-white)" x="30" y="500" class="b-on-w"&gt;POSTED&lt;/text&gt;
      &lt;text filter="url(#solid-white)" x="30" y="600" class="b-on-w"&gt;ON 23 JUNE&lt;/text&gt;
      &lt;text filter="url(#solid-white)" x="30" y="700" class="b-on-w"&gt;2020 &lt;/text&gt;
    &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>