SVG: плавать форму над другой формой?

Question

У меня две формы круга, с которыми я работаю в разметке HTML. Можно ли расположить один поверх другого, установив порядок w/свойство типа z-index? В настоящее время мои формы визуализации рядом друг с другом:

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

благодаря

Answer 1

Просто используйте стандартное позиционирование CSS, например,

svg { 
    position: absolute; 
} 

Отрегулируйте, как вы сочтете нужным.

CodePen

Answer 2

USE это 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; 
} 

Answer 3

используя вышеуказанные предложения использовать нормальное позиционирование CSS, это то, что я сделал, чтобы получить относительное позиционирование слоя:

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