赣西狠人
赣西狠人

Reputation: 342

Place an SVG element over another

I just wonder whether it is possible to place an SVG element over another. Here is my 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>

I want those two rectangles to show over the polygon; I've tried adjusting the z-index, but it did not seem to work.

Upvotes: 1

Views: 3767

Answers (3)

enxaneta
enxaneta

Reputation: 33044

You can also manipulate this using JavaScript. Essentially you are appending the 2 rects to the SVG moving them on top of the polygon.

appendChild() moves an element it from its current position to the new position and there is no requirement to remove the node from its parent node before appending it again.

Also, you have a border for the SVG without border-style. You need to fix that.

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>

Upvotes: 1

Biswajit Nath
Biswajit Nath

Reputation: 433

Change the sequence. Lower level element should be written at the first.

<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>

Alternate solution

<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>

Upvotes: 1

Roma
Roma

Reputation: 199

If you can afford to separate your SVG element, you can achieve this using CSS positioning as well:

 .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>

Hope it helps !

Upvotes: 0

Related Questions