SVG：将形状浮动在另一个形状上？

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

感谢

来源

2014-09-29 mdelvecchio

这两者最有可能会更好形状在同一个 2014-10-01 11:17:13

只需使用标准的CSS定位，例如

svg { 
    position: absolute; 
}

根据需要进行调整。

CodePen

来源

2014-09-29 18:07:10

感谢 - 标准的CSS位置做到了诀窍。没有意识到SVG元素就像这方面的普通元素一样。大。 – mdelvecchio 2014-09-29 21:47:59

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

来源

2014-09-29 18:11:31

使用上述建议使用正常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>

来源

2014-09-29 21:52:49 mdelvecchio

SVG：将形状浮动在另一个形状上？

回答

相关问题