We Keep Coding

How to reverse the order of svg elements

I am working with a svg element which is following
<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<rect class="bg" id="bg" width="150" height="150" fill="#e6e6e6"></rect>
<circle class="circ0" id="circ0" cx="75" cy="75" r="72" fill="none" stroke="blue" stroke-linecap="round" stroke-linejoin="round"></circle>
<circle class="circ1" id="circ1" cx="75" cy="75" r="69" fill="none" stroke="green" stroke-linecap="round" stroke-linejoin="round"></circle>
<circle class="circ2" id="circ2" cx="75" cy="75" r="66" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round"></circle>
<script href="index.js"></script>
</svg>
I want to reverse the order of these circles with javascript, which I am currently doing by this way
const svg = document.querySelector("svg");
var x = document.querySelectorAll("[class^='circ']");
var bucket = [];
x.forEach((a, i) => {
bucket.push(a)
});
bucket.reverse();
x.forEach(
(a, i) => a.parentNode.removeChild(a)
);
bucket.forEach(
(a, i) => {
a.setAttribute("class", 'circ' + [i]);
a.setAttribute("id", "circ" + [i]);
svg.appendChild(a);
}
)
<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<rect class="bg" id="bg" width="150" height="150" fill="#e6e6e6"></rect>
<circle class="circ0" id="circ0" cx="75" cy="75" r="72" fill="none" stroke="blue" stroke-linecap="round" stroke-linejoin="round"></circle>
<circle class="circ1" id="circ1" cx="75" cy="75" r="69" fill="none" stroke="green" stroke-linecap="round" stroke-linejoin="round"></circle>
<circle class="circ2" id="circ2" cx="75" cy="75" r="66" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round"></circle>
<script href="index.js"></script>
</svg>
It gives me this
Is there a better way of doing this?

append(child) by itself moves DOM Nodes. So your code can be simplified.
But for complexer SVG you probably want to swap DOM positions, because there could be other Elements in between you don't want to affect.
Hold CTRL key to see what happens with append
Click to see the swapping version,
a matter of processing an Array and swapping the first with the last element.
Note: append was not available in Internet Explorer, that is why you see most posts using appendChild.
Modern browsers have loads more DOM goodies: replaceWith after , before etc.
<svg viewBox="0 0 10 10" style="height:200px">
<style>
text { font-size: 2px }
[y="3"]{ fill:yellow }
.first { stroke: black; stroke-width: 0.5 }
</style>
<rect class="bg" id="bg" width="10" height="10" fill="grey"></rect>
<circle class="first" id="c0" cx="2" cy="5" r="2" fill="red" />
<text x="0" y="3">R</text>
<circle class="second" id="c1" cx="4" cy="5" r="3" fill="green" />
<text x="1" y="3">G</text>
<circle class="last" id="c2" cx="6" cy="5" r="4" fill="blue" />
<text x="2" y="3">B</text>
<text x="1" y="6">Click Me!</text>
</svg>
<script>
let svg = document.querySelector("svg");
function append() {
[...svg.querySelectorAll("circle")]
.reverse().forEach((c, i) => {
c.parentNode.append(c);
c.setAttribute("class", c.id = 'c' + i);
});
}
function swap() {
function swapElements(e1, e2) {
let {id,previousSibling,className:{baseVal:c2}} = e2;
e1.after(e2); // put e2 after e1
e2.id = e1.id; e2.setAttribute("class", e1.getAttribute("class"));
previousSibling.after(e1); // put e1 after where e2 WAS
e1.id = id; e1.setAttribute("class", c2);
}
let circles = [...svg.querySelectorAll("circle")];
while (circles.length) {
let c1 = circles.shift();
if (circles.length) swapElements(c1, circles.pop())
}
}
svg.onclick = (e) => (e.ctrlKey && append()) || swap();
</script>

javascript to show/hide SVG elements when you click other SVG elements

I am making an interactive map and want to show hide different SVG elements when others are clicked. [I started with this}(https://stackoverflow.com/questions/30484743/show-and-hide-elements-inside-svgs) but I don't want all the 'g' elements to hide, only specific ones. I tried changing the getelement tag to id but it didn't seem to work.
updated: got it to target classes and updated my code info. The one textbox I want to stay open is not. I hope I made things more clear, thank you.
<script type="text/javascript">
<![CDATA[
var id = 'name';
function place(id) {
var gs = document.getElementsByClassName("textboxes");
// Hide all the elements
for (var i = 0; i < gs.length; i++) {
gs[i].classList.add("hidden");
}
// But make sure the one with "id" is visible
document.getElementById(id).classList.remove("hidden");
}
]]>
</script>
my map item with the onclick:
<g onclick="place('accelerator')" id="accelerator-n">
<a xlink:href="#">
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="539.1322" y1="175.0099" x2="543.4789" y2="175.0099">
<stop offset="0" style="stop-color:#A7A9AC"/>
<stop offset="2.965399e-02" style="stop-color:#ACAEB1"/>
<stop offset="0.1582" style="stop-color:#BCBEC0"/>
<stop offset="0.3016" style="stop-color:#C6C7C9"/>
<stop offset="0.4888" style="stop-color:#C9CACC"/>
<stop offset="0.8212" style="stop-color:#CCCDCF"/>
<stop offset="1" style="stop-color:#D1D3D4"/>
</linearGradient>
<polygon class="st4" points="544.2,340.9 542.9,341.8 542.8,160.8 544.3,159.3 "/>
<polygon class="st6" points="542.4,175.6 539.1,175.3 540.2,174.4 543.5,174.4 "/>
<polygon class="st5" points="539.3,341.9 543,341.9 543,160.6 538.7,160.5 "/>
</a>
</g>
two textboxes, the introinfo box should be seen on loading and others hide/show depending on what map element you click on:
<g id="introinfo" class="textboxes">
<rect x="28.8" y="33.8" class="st32" width="345.7" height="251.7"/>
<foreignobject x="34" y="40" width="338" height="238">
<div xmlns="http://www.w3.org/1999/xhtml" >Here is a long text that runs more than one line and works as a paragraph</div>
<br />
<div>This is <u>UNDER LINE</u> one</div>
<br />
<div>This is <b>BOLD</b> one</div>
<br />
<div>This is <i>Italic</i> one</div>
</foreignobject>
</g>
<g id="accelerator" class="textboxes">
<rect fill="red" x="28.8" y="33.8" class="st32a" width="345.7" height="251.7"/>
<foreignobject x="34" y="40" width="338" height="238">
<div xmlns="http://www.w3.org/1999/xhtml" >accelerator BOX of text.</div>
<br />
<div>This is <u>accelerator BOX of text.</u> one</div>
<br />
<div>This is <b>accelerator BOX of text.</b> one</div>
<br />
<div>This is <i>accelerator BOX of text.</i> one</div>
</foreignobject>
</g>

As per #enxaneta's suggestion, using classes is a little cleaner.
However, you might prefer to use a "hidden" class rather than one named "visible". Depending on whether your elements are normally visible or hidden. Your choice.
.hidden {
display: none;
}
Then your code would become
var id = 'name';
function place(id) {
var gs = document.getElementsByTagName("g");
// Hide all the elements
for (var i = 0; i < gs.length; i++) {
gs[i].classList.add("hidden");
}
// But make sure the one with "id" is visible
document.getElementById(id).classList.remove("hidden");
}
Working demo
function place(id) {
var gs = document.getElementsByTagName("g");
// Hide all the elements
for (var i = 0; i < gs.length; i++) {
gs[i].classList.add("hidden");
}
// But make sure the one with "id" is visible
document.getElementById(id).classList.remove("hidden");
}
function reset() {
document.querySelectorAll("g").forEach(g => g.classList.remove("hidden"));
}
.hidden {
display: none;
}
<svg width="400" height="100">
<g id="one" onclick="place('one')">
<circle cx="50" cy="50" r="40" fill="red"/>
</g>
<g id="two" onclick="place('two')">
<circle cx="150" cy="50" r="40" fill="orange"/>
</g>
<g id="three" onclick="place('three')">
<circle cx="250" cy="50" r="40" fill="gold"/>
</g>
<g id="four" onclick="place('four')">
<circle cx="350" cy="50" r="40" fill="green"/>
</g>
</svg>
<br/>
<button type="button" onclick="reset()">Reset circles</button>

How to trigger click of both elements, when clicking overlapping area

I have two elements overlapping each other, Both has click events. Clicking on each element works fine.
If I click on an overlapping area as shown below, can I trigger the click of both?
Below is my code
$("#circle1").click(function(d) {
alert("circle1");
});
$("#circle2").click(function(d) {
alert("circle2");
});
.path {
fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="525" height="226">
<circle id="circle1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<circle id="circle2" cx="80" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>

I would use clip-path to get the intersection of the 2 circles. Then I would attach the event to intersection.
intersection.addEventListener("click",()=>{
console.log("intersection")
})
circle{stroke-width:3;stroke:black;}
svg{border:1px solid}
<svg id="svg" viewBox="0 0 525 226">
<defs>
<circle id="circle1" cx="50" cy="50" r="40" />
<circle id="circle2" cx="80" cy="50" r="40" />
<clipPath id="clip"><use xlink:href="#circle2" />
</clipPath>
</defs>
<use xlink:href="#circle1" class="circle" fill="red" />
<use xlink:href="#circle2" class="circle" fill="transparent" />
<use xlink:href="#circle1" id="intersection" clip-path="url(#clip)" fill="gold" />
</svg>

You should not rely on any approach that calculates the position of the intersection or that creates another element just to compute the intersection. Such approaches will eventually fail or simply become too complicated and cumbersome.
Instead of that, use the event itself and a method like document.elementFromPoint to get all elements under the click. For instance, you can use document.elementFromPoint “recursively”, as described here. Then, using selection.dispatch, you dispatch the click event to all elements under the click.
Here is a very basic demo (click on the blue circle, the red circle or the intersection):
let clicked;
d3.select(".blue").on("click", function() {
if (!clicked) return;
console.log("blue circle were clicked")
});
d3.select(".red").on("click", function() {
if (!clicked) return;
console.log("red circle were clicked")
});
d3.select("svg").on("click", function() {
clicked = true;
getAllElements(...d3.mouse(this));
clicked = false;
function getAllElements(x, y) {
const elements = [];
let thisElement = document.elementFromPoint(x, y);
while (thisElement && thisElement.nearestViewportElement) {
elements.push(thisElement);
d3.select(thisElement).style("display", "none");
thisElement = document.elementFromPoint(x, y);
}
elements.forEach(function(elm) {
d3.select(elm).style("display", null)
.dispatch("click");
});
};
})
.as-console-wrapper {
max-height: 30% !important;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
<circle cx="100" cy="75" r="60" fill="powderblue" stroke="gray" stroke-width="2" opacity="0.75" class="blue"></circle>
<circle cx="170" cy="75" r="60" fill="tomato" stroke="gray" stroke-width="2" opacity="0.75" class="red"></circle>
</svg>

Here is how you can calculate the overlap area calculate clientX for each click event and make sure it is overlap area as you have already provide X and Y for your circles. Here is example. In example, I have provided a rough idea you can calculate according to your actual dimesions.
$(".circle").click(function(e) {
if((event.clientX>50 && event.clientX<80) && (event.clientY>25 && event.clientY<85)){
alert('overlaper area');
}
});
.path {
fill: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<svg width="525" height="226">
<circle class="circle" id="circle1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<circle class="circle" id="circle2" cx="80" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>

Changing colour using Javascript [duplicate]

I created a SVG file contains 5 polygons, then I need to embed Javascript so 4 of the polygons' color changes to Red when mouseover, and when mouseout, the color changes to Green. I tried to write the code but it didn't work, what could be the problem? Thanks for help and tips!
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink">
<script type="text/javascript">
<![CDATA[
document.getElementById("test").onmouseover = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.color = "red";
}
document.getElementById("test").onmouseout = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.color = "green";
}
]]>
</script>
<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<ellipse id="test" cx="1850" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<rect id="test" x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
<polygon id="test" points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3" onmouseover="javascript:red();" onmouseout="javascript:green();"/>
</svg>

For what you are doing I would recommend using pure CSS.
Here is some working code.
svg:hover .recolor {
fill: red;
}
As you see, you can just use the :hover event in CSS to recolor the necessary elements. And set them to your default color (green), which will take effect when the user is not hovered.

You have various errors
you've two functions called changeColor, functions must have unique names
SVG does not use color to colour elements, instead it uses fill (and stroke).
id values must be unique, you probably want to replace id by class and then use getElementsByClassName instead of getElementById. If you do that you'll need to cope with more than one element though. I've not completed that part, you should try it yourself so you understand what's going on.
I've removed all but one id from my version so you can see it working on the left eye.
document.getElementById("test").onmouseover = function(){changeColor()};
function changeColor() {
document.getElementById("test").style.fill = "red";
}
document.getElementById("test").onmouseout = function(){changeColor2()};
function changeColor2() {
document.getElementById("test").style.fill = "green";
}
<svg width="26cm" height="24cm" viewBox="0 0 2600 2400" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink= "http://www.w3.org/1999/xlink">
<circle cx="1600" cy="700" r="600" fill="yellow" stroke="black" stroke-width="3"/>
<ellipse id="test" cx="1300" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3"/>
<ellipse cx="1850" cy="500" rx="74" ry="120" fill="blue" stroke="black" stroke-width="3" />
<rect x="1510" y="650" width="160" height="160" fill="blue" stroke="black" stroke-width="3" />
<polygon points="1320,800 1370,1080 1820,1080 1870,800 1820,1000 1370,1000" name="mouth" fill="blue" stroke="black" stroke-width="3"/>
</svg>

SVG donut-shape with access of both circles

I want to create an SVG donut shape (circle with another empty circle inside). I want to be able to access & resize both circles, eg via their id attributes. This will allow for animation.
I have considered three approaches but none are that great:
complex path: does not allow for access of the inner circle via #id
outline stroke: possible but complicated for my purpose (would have to reposition as I increase stroke)
clippath/mask: Doesn't work like a compound path, only an outer box
Is there a way of doing this?

Probably the easiest way would be with masks.
If you are working with a set of discrete donut sizes, you could use CSS and a mask for each size:
<svg width="500" height="500">
<defs>
<mask id="bigmask">
<rect width="100%" height="100%" fill="white"/>
<circle cx="250" cy="250" r="50"/>
</mask>
<mask id="smallmask">
<circle cx="250" cy="250" r="150" fill="white"/>
<circle cx="250" cy="250" r="100"/>
</mask>
</defs>
<circle id="donut" cx="250" cy="250" r="200" mask="url(#bigmask)"/>
</svg>
CSS:
#donut:hover
{
mask: url(#smallmask);
}
Demo here
Unfortunately you can't modify the size of circles with CSS. "r" is not (yet) a property that can be manipulated with CSS. So you will need to either use SMIL (SVG) animation, or manipulate your mask circles with javascript:
<svg width="500" height="500">
<defs>
<mask id="donutmask">
<circle id="outer" cx="250" cy="250" r="200" fill="white"/>
<circle id="inner" cx="250" cy="250" r="50"/>
</mask>
</defs>
<circle id="donut" cx="250" cy="250" r="200" mask="url(#donutmask)"/>
</svg>
JS
$("#donut").mouseenter(function(evt) {
$("#outer").attr("r", 100 + Math.random() * 100);
$("#inner").attr("r", 100 - Math.random() * 50);
});
Demo here

Although BigBadaboom's answer is the best way IMO, if you want to use a compound path, it's possible to animate by rewriting the path's d attribute each frame like this:
// get svg path coordinates for a ring
ring:function(x, y, ir, or) {
var path =
'M'+x+' '+(y+or)+'A'+or+' '+or+' 0 1 1 '+(x+0.001)+' '+(y+or) // outer
+ 'M'+x+' '+(y+ir)+'A'+ir+' '+ir+' 0 1 0 '+(x-0.001)+' '+(y+ir) // inner
;
return path;
}