Question

我有几个圈子SVG，我正在堆叠在一起。为了做到这一点，我给他们分配了绝对的位置风格。我的问题是，当我这样做时，我似乎无法将堆叠的SVGS显示在块元素（例如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个svg节点，你使用position:absolute重叠（并且绝对定位从包装div的流中取出svg元素）;

您可以使用一个svg标记（不含position:absolute）并使用g标记对元素进行分组_

fiddle

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

1 个答案: