CODEWITHSUNDEEP
htmlcsssvg
Abdul Jabbar
Abdul Jabbar

Reputation: 2573

SVG element not coming inside a DIV

I am trying to display an svg line inside div. The position is given to the DIV so i am expecting the line to be placed inside div as child element but it is coming under it, as if it is outside div. Following is my code:

<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

I am trying to find the reason for a long time now but unable to understand this behavior. Any help would be appreciated. Thanks

Upvotes: 5

Views: 9952

Answers (3)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60597

The issue is that the SVG is overflowing the DIV, mainly due to SVG elements being display: inline; by default. This can easily be fixed by adding a display property to the SVG's styles, such as 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>

Another alternative in this particular instance would be to float or position the SVG element, however this is a much-less versatile solution, and only indirectly solves the problem.

Upvotes: 3

Arun Chandran Chackachattil
Arun Chandran Chackachattil

Reputation: 3362

Update your Div position to block and float your svg element to left.

working Demo

Upvotes: 0

The Pragmatick
The Pragmatick

Reputation: 5477

Put float:left; or display: block; to the svg element.

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

Upvotes: 8

Related Questions