Html 在块元素内定位重叠的SVG

我有两个圆形SVG，我把它们叠在一起。为了做到这一点，我给他们分配了一个绝对位置样式。我的问题是，当我这样做时，似乎无法让堆叠的SVG显示在块元素（例如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;
}

我想让三个饼图像现在一样堆叠在它们上面，但我希望它们在卡片（DIV）中。

到目前为止，我的一个例子可以在这里找到：

任何帮助都将不胜感激

---

谢谢

发生这种情况的原因是您有3个svg节点，使用

position:absolute

（绝对定位将svg元素从包装div的流中取出）

您可以使用一个svg标记（不带

position:absolute

）并使用

g

标记对元素进行分组_

---

我不知道你到底有什么问题。我假设您希望将

svg

放置在div中？试着给你的

.card

a

填充底部：170px嗨！谢谢你的回复。我想在DIV中定位SVG。我设置填充底部的问题是，这将是从PowerShell以编程方式生成的报告的一部分（我更像是一名系统管理员，而不是一名web开发人员），我希望能够灵活地输出更多图表，而不必一直手动更改该值。Maioman，你刚刚让我大吃一惊！这正是我需要的！谢谢
  <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>