Поместите элемент SVG поверх другого

Question

Мне просто интересно, можно ли разместить элемент SVG поверх другого. Вот мой HTML:

<svg id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
  <rect x="582" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style="
"></rect>
  <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
</svg>

Я хочу, чтобы эти два прямоугольника показывались поверх многоугольника; Я попытался настроить z-index, но, похоже, он не работал.

Answer 1

Если вы можете позволить себе отделить свой элемент SVG, вы можете достичь этого с помощью позиционирования CSS:

 .top{
position: absolute;
top: 34px;
left: 30px;
}

<svg class="top" id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
  <rect x="500" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style=""></rect>
</svg>

<svg class="bottom" id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
    <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
</svg>

Надеюсь, это поможет!

Answer 2

Вы также можете управлять этим с помощью JavaScript. По сути, вы добавляете две линии в SVG, перемещая их поверх многоугольника.

appendChild() перемещает элемент из его текущей позиции в новую позицию, и нет необходимости удалять узел из его родительского узла перед добавлением его снова.

Кроме того, у вас есть граница для SVG без border-style. Вам нужно это исправить.

let rects = svg.querySelectorAll(".handle");

rects.forEach(r=>{
  svg.appendChild(r)
})

<svg id="svg" width="950" height="910" style="border: 2px solid rgb(204, 204, 204); margin-top: 10px;">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
  <rect x="582" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style="
"></rect>
  <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
</svg>

Answer 3

Изменить последовательность. Элемент нижнего уровня должен быть написан на первом.

<svg id="svg" width="950" height="910" style="border: 2px rgb(204, 204, 204); margin-top: 10px;">
          <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5"></polygon>
          <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="0"></rect>
          <rect x="582" y="95" width="16" height="16" class="handle" polygonNo="0" pointNo="1" style=""></rect>
</svg>

Альтернативный раствор

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  <rect x="348" y="95" width="16" height="16" class="handle" polygonNo="0" id="two" pointNo="0"></rect>
  <rect x="582" y="95" width="16" height="16" class="handle" polygonNo="0"  id="one" pointNo="1" style=""></rect>
  <polygon points="348,206 598,206 598,106 348,106" id="polygon" polygonNo="1" fill="#8DB0F5" ></polygon>
  <use xlink:href="#one"/>
  <use xlink:href="#two"/>
</svg>