Question

我有两个圆圈形状，我正在使用HTML标记。是否可以将一个定位在另一个上面，设置具有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

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

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

3 个答案: