Question

我的情况是我使用<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无效的情况下，我如何“移动” div内容在svg的前面？

Answer 1

我找到了解决方案，我需要像这样在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上

如何强制svg位于div元素的后方，如z-index

1 个答案: