CODEWITHSUNDEEP
htmlcsssvg
TroggleDorf
TroggleDorf

Reputation: 420

Positioning overlapping SVGs inside a block element

I have a couple of circle SVGs that I am stacking on top of one another. In order to do that I have assigned them an absolute position style. My problem is I can't seem how to get the stacked SVGS to display within a block element, such as a DIV tag, when I do so.

This is what I have so far:

.card {
    background-color:white;
    border: 1px solid gray;
    border-top: 10px solid gray;
    padding:20px;
    box-shadow: 1px 1px 1px #888888;
    margin-bottom: 30px;
}

circle {
    fill: transparent;
    stroke-width: 30;
}

svg {
    width: 150px; 
    height: 150px;
    position: absolute;
}


  <P>I would like to have the three pie charts stack on top of them like they are doing, but I would like for them to be inside the card (DIV).</P>

        <DIV class="PieChart" style="stroke-dasharray: 377 377; stroke: #80F162;">
            <svg>
                <circle r="60" cx="50%" cy="50%"/>
            </svg>
        </DIV>
        <DIV class="PieChart" style="stroke-dasharray: 255 377; stroke: #F06161;">
            <svg>
                <circle r="60" cx="50%" cy="50%"/>
            </svg>
        </DIV>
        <DIV class="PieChart" style="stroke-dasharray: 189 377; stroke: #F4F464;">
            <svg>
                <circle r="60" cx="50%" cy="50%"/>
            </svg>
        </DIV>

An example of what I have so far can be found here:

https://jsfiddle.net/e82agLn2/

Any help would be greatly appreciated.

Thanks!

Upvotes: 2

Views: 3062

Answers (1)

maioman
maioman

Reputation: 18754

The reason this is happening is that you have 3 svg nodes that you're overlapping using position:absolute (and absolute positioning takes svg elements out of the wrapping div's flow);

You could use one svg tag( without position:absolute ) and use g tags to group the elements_

fiddle

Upvotes: 3

Related Questions