2014-09-29 87 views
1

我在HTML標記中使用了兩個圓形。是否可以在另一個上面放置一個,設置具有z-index類型屬性的順序?目前我旁邊的形狀呈現給對方:SVG:將形狀浮動在另一個形狀上?

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

感謝

+0

這兩者最有可能會更好形狀在同一個片段中,是否它們是單獨片段的要求? – 2014-10-01 11:17:13

回答

3

只需使用標準的CSS定位,例如

svg { 
    position: absolute; 
} 

根據需要進行調整。

CodePen

+0

感謝 - 標準的CSS位置做到了訣竅。沒有意識到SVG元素就像這方面的普通元素一樣。大。 – mdelvecchio 2014-09-29 21:47:59

1

使用此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; 
} 
0

使用上述建議使用正常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> 
相關問題