将SVG定位在div前面

Question

开始使用 SVG，但无法让它按照我想要的方式定位。我想要实现的是让我的 SVG 出现在前面并锁定到边框 div 的底部并在页面上居中以及在调整窗口大小（响应式）时调整大小。到目前为止，我已经使用了 SVG 的 viewbox 和 height/width 属性来获得响应行为，但我不知道在我的页面的其余部分下没有 SVG 滑动（参见图片以更好地了解发生了什么）。我尝试使用 z-index 和 position:absolute 但无济于事。到目前为止，这是我的代码：（我使用带有 SASS 的引导框架）

HTML

<section>
  a first section
</section>

<section class="parallax1">
<div class="container-fluid"> 
  <div class="row">
    <div style="height:500px;">
      <div class="col-sm-12 border-div">
        <div class="col-sm-12">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg-test" viewBox="0 0 500 375">my SVG</svg>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

<section>
  Another section
</section>

CSS

.border-div{
  height:100px;
  background-color: $orange-background;
}

.svg-test{      
  left: 50vw;
  width: 100%;
  height: 600px; 
}

.parallax1{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/bkgnd.jpg");
}

我现在得到的是这样的：current result

而我正在寻找的是这个：desired result

Answer 1

前言

关于你的问题的一些评论，这也可以解释为什么你这么长时间没有收到任何答案：

• 您的问题是关于 SVG 图像在 HTML 文档中的定位。使用 ViewBox 并不能解决您的问题，因为这仅决定 SVG 图像应显示的内容，而不是 SVG 图像应如何定位在父文档中，在本例中为 HTML 文档。事实上，您可以用 DIV 计数器替换 SVG 图像，解决方案不会有任何改变。

• 不清楚你想要什么：

  • come in front and locked to the bottom 是否暗示您希望 SVG 图像在用户滚动时出现，或者带有一些动画？或者这是否意味着您希望将 SVG 静态放置在那里，独立于任何事件？

  • centered on the page 仅表示水平方向吗？如果你的意思也是垂直的，我不明白它应该如何与 DIV 的高度要求相关，或者它应该lock to the bottom of the border-div 的要求。

  • resize when the window is resized 只是意味着改变它的宽度还是改变它的高度？因为您已将高度定义为 600px，这显然不会响应任何窗口大小的调整。

  • slip under the rest of my page - 我认为 SVG 应该在其他一切之上？

  • 尚不清楚第一个和最后一个部分是否应该具有稳定的宽度，或者是响应式的。以及它们应该如何与500px 相关联。给他们一点 CSS 就好了。

  • 所以border-div 的100px 应该是500px 的一部分？在“截图”中看起来不像，但您发布的代码表明如此。

• 此外，您对问题的表述也存在一些不一致之处：

  • SVG 的width 定义为100%，但您的图片显示它显然不是100%。毕竟，如果它是 100%，您也不必担心居中。

  • SVG 的height 定义为600px。如果是这样的话，它会比父 DIV 高，它只有 500px。图片显示了一些不同的东西。

• 最后但同样重要的是，left: 50vh 将使您的 SVG 从页面的水平中心开始，而不是居中。如果要居中，则应为(100% - width)/2 而不是100%/2。

可能的解决方案

无论如何，这里是 HTML 代码和随附的 CSS 样式，以获得我（可能不正确地）解释您所要求的内容：

<section id="first">
    A first section
</section>

<section id="height-500">
    <div id="border-div">
        <div id="relative">
            <div id="bottom">
                <svg>
                </svg>
            </div>
        </div>
    </div>
</section>

<section id="another">
    Another section
</section>

这里是 CSS：

#first,
#another {
    background: #808000;
    height: 150px;
    width: 100%;
    height: 150px;
}

#height-500 {
    background: green;
    height: 500px;
    position: relative;
}

#border-div {
    background: #008080;
    height: 100px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#relative {
    position: relative;
    width: 100%;
    height: 100%;
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

svg {
    display: block;
    background: #f00;
    width: 20vw;
    height: 20vw;
    margin: auto;
}

重点说明

• 设置#height-500 的position: relative 允许您将#border-div 定位在其底部。这个技巧将再次用于#relative 和#bottom 以将SVG 放置在#border-div 的底部（将width 和height 设置为100% 允许#relative 的尺寸与@ 相同987654354@)。

• 将 SVG 的 width 和 height 设置为 20vw 表示我们希望 SVG 为正方形，每边为视口宽度的 20%。如果您更改浏览器的宽度，SVG 也会调整大小。

• margin: auto 用于将块元素放置在水平中心。请注意，我们需要通过设置display: block 将SVG 转换为块元素才能工作。 （请注意，margin: auto 不适用于真正旧的浏览器，但有一些额外的 DIV 的解决方法。）

• 如果您希望 SVG 的 height 保持不变，您可能需要使用 preserveAspectRatio 属性来指示您要处理不断变化的纵横比。

• 注意视口宽度vwalso includes the scrollbar和isn't supported by some older browsers。但是，有other methods of keeping the aspect ratio，以防您需要。