将SVG定位在div前面

Question

开始摆弄SVG，但很难将其定位到我想要的位置。我想要实现的是，我的SVG位于前面，锁定在边界div的底部，并在页面上居中，并在调整窗口大小时调整大小(响应(。到目前为止，我已经使用了SVG的viewbox和height/width属性来获得响应行为，但我不知道是否在页面的其他部分下面没有SVG(请参阅图片以更好地了解正在发生的事情(。我试着使用z索引和位置：绝对的，但没有用。到目前为止，我的代码如下：(我使用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");
}

我现在得到的是这样的东西：当前结果

我正在寻找的是：所需结果

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的尺寸与#border-div相同(。

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

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

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

• 请注意，视口宽度vw还包括滚动条，一些较旧的浏览器不支持它。然而，还有其他方法可以保持纵横比，以防这是您的要求。