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>

Fiddle

我试图找到原因很久但现在无法理解这种行为。任何帮助，将不胜感激。感谢

Answer 1

将float:left;或display: block;放入svg元素。

＆＃13;

<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>

＆＃13;

Answer 2

问题是SVG溢出了DIV，主要是因为SVG元素默认为display: inline;。这可以通过向SVG的样式添加显示属性来轻松修复，例如display: block;。

<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; display: block;">
        <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>

在这个特定实例中的另一个替代方案是浮动或定位SVG元素，但这是一个非常通用的解决方案，并且只能间接地解决问题。

Answer 3

将您的Div位置更新为block并将您的svg元素浮动到left。

working Demo

SVG元素不会进入DIV内部

3 个答案: