开始玩SVG并且无法按照我想要的方式定位它。我想要实现的是让我的SVG进入前面并锁定到border-div的底部并在页面上居中，并在调整窗口大小时调整大小（响应）。到目前为止，我已经使用了SVG的视图框和高度/宽度属性来获取响应行为，但我无法弄清楚在页面的其余部分没有SVG单据（见图片有什么是hapenning的更好的想法。我尝试使用z-index和position：绝对但无济于事。这是我到目前为止我的代码:(我使用SASS的bootstrap框架）
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
答案 0 :(得分：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会很好。
那么100px的{{1}}应该是border-div的一部分吗？在“屏幕截图”中，它看起来不像，但您发布的代码表明了这一点。
此外，您在解决问题时也存在一些不一致之处：
SVG的500px定义为width，但您的图片显示它显然不是100％。毕竟，如果它是100％，你也不必担心它的居中。
SVG的100%定义为height。如果是这种情况，它将比父DIV高，后者只有600px。这些图片显示了不同的东西。
最后但并非最不重要的是，500px会使您的SVG从页面的水平中心开始，而不是居中。如果您想将其居中，则应该是left: 50vh而不是(100% - width)/2。
在任何情况下，这里都是HTML代码和随附的CSS样式，以获得您（可能错误地）解释您要求的内容：
100%/2这里是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>
设置#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;
}
的{{1}}可让您将position: relative置于底部。此提示将再次用于#height-500和#border-div，以将SVG置于#relative的底部（将#bottom和#border-div设置为width允许height的尺寸与100%相同。
将SVG的#relative和#border-div设置为width表示我们希望SVG为正方形，每边都是视口宽度的20％。如果更改浏览器的宽度，SVG也会调整大小。
height用于将块元素放置在水平中心。请注意，我们需要通过设置20vw将SVG转换为块元素，以使其工作。 （请注意，margin: auto不适用于真正旧的浏览器，但有一些其他DIV的解决方法。）
如果您希望SVG的display: block保持不变，您可能想要使用margin: auto属性来指示您想要处理不断变化的宽高比。< / p>
请注意，视口宽度为height also includes the scrollbar和isn't supported by some older browsers。但是，如果您需要，则有other methods of keeping the aspect ratio。