HTML/CSS_IMG 和 SVG 分层

Question

我需要解决分层问题。在背景上我需要有 rect，然后在它上面 img 和顶部的所有其他元素，就像示例图片中一样。为此，我尝试使用 z-index。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>z-index</title>

    <style>
      svg {
        width: 500px;
        height: 300px;
      }

      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
        z-index: 0;
      }

      .img-overlay-wrap svg {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
      }

      .front {
        position: absolute;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      <h1>Header</h1>
      <svg>
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
        <g class="front">
          <text style="color: #538b01;" x="150" y="150">SVG Text</text>
          <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
        </g>
      </svg>
      <img
        src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        height="200"
      />
    </div>
  </body>
</html>

将 img 放在 2 个 SVG 元素之间的方法给出了相同的结果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>z-index</title>

    <style>
      svg {
        width: 500px;
        height: 300px;
      }

      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
        z-index: 0;
      }

      .img-overlay-wrap svg {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
      }

      .front {
        position: absolute;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      <h1>Header</h1>
      <svg>
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
      </svg>
      <img  src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        height="200"
      />
      <svg>
        <text style="color: #538b01;" x="150" y="150">SVG Text</text>
        <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
      </svg>
    </div>
  </body>
</html>

已尝试使用属性 xlink:href 标记 use，但也没有成功：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>z-index</title>

    <style>
      svg {
        width: 500px;
        height: 300px;
      }

      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
        z-index: 0;
      }

      .img-overlay-wrap svg {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
      }

      .front {
        position: absolute;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      <h1>Header</h1>
      <svg>
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
        <g class="front">
          <text style="color: #538b01;" x="150" y="150">SVG Text</text>
          <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
        </g>
        <use xlink:href=".front"/>
      </svg>
      <img
        src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        height="200"
      />
    </div>
  </body>
</html>

Answer 1

解决方法是：

以rect为背景放置svg
放img
放h1
把svg和其他元素放在一起

对于所有这些 z-index 应该是相同的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>z-index</title>

    <style>
      svg {
        width: 500px;
        height: 300px;
      }

      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
      }

      .img-overlay-wrap svg {
        position: absolute;

      }

      .front {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      
      <svg>
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
      </svg>
      
      <img  src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        height="200"
      />
      <h1 class="front">Header</h1>
      <svg>
        <text style="color: #538b01;" x="150" y="150">SVG Text</text>
        <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
      </svg>
    </div>
  </body>
</html>

HTML/CSS_IMG 和 SVG 分层

HTML/CSS_IMG and SVG layering

html

css

svg

position

layer