如何将SVG线锚定到变高度容器的底部？

我正试图在div容器的边框上运行一条线，我感到有些困惑。如何将SVG线锚定到变高度容器的底部？

如果我将沿着边缘一个div，我会用：

<div style="position: absolute; bottom: 0px;">hello world</div>

但唯一的SVG代码，我可以得到工作似乎不正确：

#BorderContainer805 { 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t width: 99%; 
 
\t height: 150px; 
 
\t display: inline-block; 
 
\t border-radius: 0; 
 
\t border-width: 1px; 
 
\t border-color: #696969; 
 
\t border-style: solid; 
 
} 
 

 
#HorizontalLine1118 { 
 
\t position: absolute; 
 
\t stroke: rgba(154,154,154,1); 
 
\t shape-rendering: crispEdges; 
 
} 
 

 
#HGroup811 { 
 
\t position: absolute; 
 
\t top: 43px; 
 
\t right: 20px; 
 
\t min-width: 20px; 
 
\t min-height: 20px; 
 
\t overflow: visible; 
 
\t text-align: left; 
 
\t font-family: Arial; 
 
\t font-size: 12px; 
 
} 
 

 
#Hyperlink812 { 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t margin-top: -0.2em; 
 
} 
 

 
#Image817 { 
 
\t position: absolute; 
 
\t display: table; 
 
\t top: 50%; 
 
\t transform: translateY(-50%); 
 
\t -webkit-transform: translateY(-50%); 
 
\t -ms-transform: translateY(-50%); 
 
\t left: 15px; 
 
}

<div id="BorderContainer805"> 
 
\t <svg style="position: absolute; width: 100%; height: 100%;"><line id="HorizontalLine1118" x1="0" x2="100%" y1="100" y2="100"></line></svg> 
 
\t <img id="Image817" height="60" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4"> 
 
\t <div id="HGroup811"> 
 
\t \t <a id="Hyperlink812">Home</a> 
 
\t \t <a id="Hyperlink813">Services</a> 
 
\t \t <a id="Hyperlink814">Products</a> 
 
\t \t <a id="Hyperlink815">About Us</a> 
 
\t \t <a id="Hyperlink816">Contact Us</a> 
 
\t \t <span style='display: inline-block; height: 100%; width: 0; vertical-align: middle;'></span> 
 
\t </div> 
 
</div >

提前致谢！

来源

2017-02-25 1.21 gigawatts

我很困惑，为什么你正在尝试使用SVG这一点。 div上的'border-bottom' CSS不会更高效吗？ –

在一个简单的情况下，人们会使用边框底部，但我正在开发一个工具，您可以将线条添加到div。有些情况不能通过边界解决。例如，假设您需要5条沿着底部的宽度为100和各种高度的线（即柱形图）。 –

为什么你的代码看起来不正确？据我所知，它似乎工作。 –

我认为这只是一个变化：不是"height: 100%"的<svg>元素，使用"top: 100%"

<svg style="display: block; position: absolute; width: 100%; bottom: 0; top: 100%"> 
 
    <line id="HorizontalLine1118" x1="0" x2="100%" y1="0" y2="0"></line> 
 
</svg>

来源

2017-02-25 22:54:13 bomberjackets

如何将SVG线锚定到变高度容器的底部？

回答

相关问题