SVG元素不会进入DIV内部

Question

我试图在div中显示一个svg行.该位置被赋予DIV,所以我期望将该行放在div中作为子元素,但它正在它下面,好像它在div之外.以下是我的代码:

<div style="position:absolute; top:246pt; left:6pt; width:581.976pt; height:3pt; border:1px solid blue"> 
    <svg xmlns="http://www.w3.org/2000/svg"  version="1.1" width="581.976pt" height="3pt" style="border:1px solid black">
        <line id = "default" x1="0pt" y1="1.5pt" x2="581.976pt" y2="0pt" style="stroke:rgb(229,52,52); stroke-width:3pt;stroke-dasharray:10, 5"/> 
    </svg> 
</div> 

小提琴

我试图找到很长一段时间的原因,但无法理解这种行为.任何帮助,将不胜感激.谢谢

Answer 1

放入float:left;或display: block;转到svg元素.

<div style="position:absolute; top:246pt; left:6pt; width:581.976pt; height:3pt; border:1px solid blue"> 
    <svg xmlns="http://www.w3.org/2000/svg"  version="1.1" width="581.976pt" height="3pt" style="border:1px solid black; float:left;">
    <line id = "default" x1="0pt" y1="1.5pt" x2="581.976pt" y2="1.5pt" style="stroke:rgb(229,52,52); stroke-width:3pt;stroke-dasharray:10, 5"/> 
    </svg> 
</div>