如何將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線錨定到變高度容器的底部？

回答

相關問題