CODEWITHSUNDEEP
csssvgcss-position
greay
greay

Reputation: 1755

Make an SVG element vertical align from a bottom of a 100% height image

I overlay SVG responsive text over an image with 100% height. The image stretches the full screen height of a user's browser.

However I need to vertically align the SVG text to the bottom left corner instead of the top left of the 100% height image.

I have tried relative and absolute positioning that you can do with CSS, but when I do it with SVG my text disappears.

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

Here is my html:

<html>

<body>

  <div class="img-overlay-wrap">
    <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%">
    <svg viewBox="0 0 1200 800">
    <style>
      .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 { /* <= optional, for responsiveness */
        display: block;
        max-width: 100%;
        height: auto;
      }

      .img-overlay-wrap svg {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>

    <defs>
      <filter x="-0.03" y="-0.3" width="1.06" height="1.6" id="solid-black">
        <feFlood flood-color="black"/>
        <feComposite in="SourceGraphic" operator="over" />
      </filter>
      <filter x="-0.03" y="-0.04" width="1.06" height="1.08" id="solid-white">
        <feFlood flood-color="white"/>
        <feComposite in="SourceGraphic" operator="over" />
      </filter>
    </defs>
    
    <text filter="url(#solid-black)" x="25" y="100" class="w-on-b">I NEED TO GET AN ANSWER</text>
    <text filter="url(#solid-black)" x="25" y="140" class="w-on-b">FROM STACKOVERFLOW</text>
    <text filter="url(#solid-black)" x="25" y="180" class="w-on-b">FOR AN SVG</text>
    <text filter="url(#solid-black)" x="25" y="220" class="w-on-b">ISSUE</text>
    <text filter="url(#solid-black)" x="65" y="260" class="w-on-b" style="font-weight:bold;">   &#45; ANOTHER DEV</text>
    <text filter="url(#solid-white)" x="30" y="400" class="b-on-w">QUESTION</text>
    <text filter="url(#solid-white)" x="30" y="500" class="b-on-w">POSTED</text>
    <text filter="url(#solid-white)" x="30" y="600" class="b-on-w">ON 23 JUNE</text>
    <text filter="url(#solid-white)" x="30" y="700" class="b-on-w">2020 </text>
  </svg>
  </div>
</body>

</html>

Upvotes: 1

Views: 717

Answers (1)

Leo
Leo

Reputation: 947

It seems to disappear because it needs to have an explicit 'width' and 'height', otherwise its size will be '0, 0'. I've made some modifications here:

.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 {
  position: relative;
}

.img-overlay-wrap img {
  max-width: 100%;
  height: auto;
}

.img-overlay-wrap svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: content;
}
<html>

<body>
  <div class="img-overlay-wrap">
    <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%">
    <svg viewBox="0 0 1200 800">
        <defs>
          <filter x="-0.03" y="-0.3" width="1.06" height="1.6" id="solid-black">
            <feFlood flood-color="black" />
            <feComposite in="SourceGraphic" operator="over" />
          </filter>
          <filter x="-0.03" y="-0.04" width="1.06" height="1.08" id="solid-white">
            <feFlood flood-color="white" />
            <feComposite in="SourceGraphic" operator="over" />
          </filter>
        </defs>
        <text filter="url(#solid-black)" x="25" y="100" class="w-on-b">I NEED TO GET AN ANSWER</text>
        <text filter="url(#solid-black)" x="25" y="140" class="w-on-b">FROM STACKOVERFLOW</text>
        <text filter="url(#solid-black)" x="25" y="180" class="w-on-b">FOR AN SVG</text>
        <text filter="url(#solid-black)" x="25" y="220" class="w-on-b">ISSUE</text>
        <text filter="url(#solid-black)" x="65" y="260" class="w-on-b" style="font-weight:bold;"> &#45; ANOTHER DEV</text>
        <text filter="url(#solid-white)" x="30" y="400" class="b-on-w">QUESTION</text>
        <text filter="url(#solid-white)" x="30" y="500" class="b-on-w">POSTED</text>
        <text filter="url(#solid-white)" x="30" y="600" class="b-on-w">ON 23 JUNE</text>
        <text filter="url(#solid-white)" x="30" y="700" class="b-on-w">2020 </text>
      </svg>
  </div>
</body>

</html>

Upvotes: 1

Related Questions