html - 在 block 元素内定位重叠的 SVG

Question

我有几个圆形 SVG，我正在彼此堆叠。为此，我为它们分配了绝对位置样式。我的问题是，当我这样做时，我似乎无法让堆叠的 SVGS 显示在 block 元素(例如 DIV 标签)中。

这是我目前所拥有的:

.card {
    background-color:white;
    border: 1px solid gray;
    border-top: 10px solid gray;
    padding:20px;
    box-shadow: 1px 1px 1px #888888;
    margin-bottom: 30px;
}

circle {
    fill: transparent;
    stroke-width: 30;
}

svg {
    width: 150px; 
    height: 150px;
    position: absolute;
}

  <P>I would like to have the three pie charts stack on top of them like they are doing, but I would like for them to be inside the card (DIV).</P>

        <DIV class="PieChart" style="stroke-dasharray: 377 377; stroke: #80F162;">
            <svg>
                <circle r="60" cx="50%" cy="50%"/>
            </svg>
        </DIV>
        <DIV class="PieChart" style="stroke-dasharray: 255 377; stroke: #F06161;">
            <svg>
                <circle r="60" cx="50%" cy="50%"/>
            </svg>
        </DIV>
        <DIV class="PieChart" style="stroke-dasharray: 189 377; stroke: #F4F464;">
            <svg>
                <circle r="60" cx="50%" cy="50%"/>
            </svg>
        </DIV>

可以在这里找到我目前所拥有的示例:

https://jsfiddle.net/e82agLn2/

如有任何帮助，我们将不胜感激。

谢谢!

Answer 1

发生这种情况的原因是您有 3 个使用 position:absolute 重叠的 svg 节点(并且绝对定位将 svg 元素从包装 div 的流中取出)；

您可以使用一个 svg 标签(没有 position:absolute )并使用 g 标签对元素进行分组_

fiddle