Блог

мой случай заключается в том, что я использую <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?

я нашел решение, мне нужно нарисовать другой, 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 ‘s браузер рисует их один на другом, поэтому, как только у меня появляется другой svg внутри внутренних элементов, он рисует их на большом svg