Reputation: 342
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
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
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
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