如何强制svg在z-index中的div元素后面

Posted 2021-03-28

我的情况是我使用<svg><rect>作为边框，这是代码

<div class="dotted w-440">
    <svg class="Rectangle_1184 w-440 h-340">
        <rect id="Rectangle_1184" class=" w-440 h-340"></rect>
    </svg>

    <div class="flex-col-center upload h-340">

        buttons and spans....

    </div>
</div>

CSS：

.dotted{position: relative;margin: auto;padding: 8px 0;}
.h-340{height: 335px;}
.w-440{width: 440px;}
.Rectangle_1184{position: absolute;top: 23px;left: 0;}
#Rectangle_1184 {fill: transparent;stroke: rgba(68,73,89,0.502);stroke-dasharray: 6 6;stroke-width: 3px;}

当我试图点击一个button我不能，因为可选择的元素是在svg，z-index不工作，我怎么能“移动”svg前面的div内容？

答案

我发现了一个解决方案，我需要在svg中画出另一个div

<div class="flex-col-center upload h-340">
        stuff....
    <div class="flex-col-center group-2">
        inner stuff....
        <svg class="svg-btn"><rect class="svg-btn"></rect></svg>
    </div>
</div>

css .svg-btn{position: absolute; width: 1px; height: 1px;}

交代

与svg一起，浏览器将它们一个接一个地绘制，所以一旦我在内部元素中有另一个svg它将它们吸引到大svg