1

I have two circle shapes I'm working with in HTML markup. Is it possible to position one atop another, setting order w/ a z-index type property? Currently my shapes render next to each other:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="25" cy="25" r="25" fill="yellow" />
</svg>

thanks

Improve this question
1
  • It'd most likely be better to just have both shapes in the same <svg> fragment, is it a requirement that they be separate fragments?
    – Erik Dahlström
    Commented Oct 1, 2014 at 11:17

3 Answers 3

Reset to default
4

Just use standard CSS positioning, e.g.

svg {
  position: absolute;
}

Adjust as you see fit.

Improve this answer
1
  • thanks -- standard CSS position did the trick. didn't realize SVG elements were just like normal elements in this regard. great.
    – mdelvecchio
    Commented Sep 29, 2014 at 21:47
1

using the above suggestions to use normal CSS positioning, this is what i did to obtain relative layer positioning:

#svgHolder {
    position:relative
}
.svgCircle2 {
    position:absolute;
    top:15px;
    left:15px;
}


<div id="svgHolder">
    <svg xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="50" fill="red" />
    </svg>

    <svg class="svgCircle2" xmlns="http://www.w3.org/2000/svg">
        <circle cx="35" cy="35" r="35" fill="yellow" />
    </svg>
</div>
Improve this answer
0

USE this FIDDLE

http://jsfiddle.net/4wpw6add/8/

<svg class="bottom"  xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="50" fill="red" />
    </svg>

    <svg class="top" xmlns="http://www.w3.org/2000/svg">
        <circle cx="25" cy="25" r="25" fill="yellow" />
    </svg>


.bottom{
    margin:0;
}

.top{
margin: 0 auto;
position: absolute;
top: 34px;
left: 30px;
text-align:center;
}
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.