使 SVG 元素从 100% 高度图像的底部垂直对齐答案

【问题标题】：Make an SVG element vertical align from a bottom of a 100% height image使 SVG 元素从 100% 高度图像的底部垂直对齐
【发布时间】：2021-03-17 19:15:12
【问题描述】：

我将 SVG 响应式文本覆盖在 100% 高度的图像上。图片拉伸了用户浏览器的全屏高度。

但是我需要将 SVG 文本垂直对齐到左下角而不是 100% 高度图像的左上角。

我已经尝试过可以使用 CSS 进行的相对和绝对定位，但是当我使用 SVG 进行时，我的文本会消失。

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

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

这是我的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>

【问题讨论】：

标签： css svg css-position

【解决方案1】：

它似乎消失了，因为它需要有一个明确的“宽度”和“高度”，否则它的大小将是“0, 0”。我在这里做了一些修改：

.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>

【讨论】：