Develop Reference

SVG: how to draw multiple semicircles (arcs) path

Using the answer from this thread I was able to draw a semicircle (arc):
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
console.log(d)
return d;
}
window.onload = function() {
document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 50, -90, 90));
};
<svg width="1000" height="1000">
<path id="arc1" fill="red" stroke="#446688" stroke-width="2" />
</svg>
What I'm trying to achieve is to be able to draw an SVG as a path consistent with many arcs (semicircles) and be able to set fill on them.
Something like this:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100 A 10 10 0 0 1 100 100 M 100 100 A 10 10 0 0 1 150 100 M 150 100 A 10 10 0 0 1 200 100 M 200 100 A 10 10 0 0 1 250 100" fill="red" stroke="blue" stroke-width="3" />
</svg>
Is there a better way to achieve a simpler path? For now, it looks like this:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100 A 10 10 0 0 1 100 100 M 100 100 A 10 10 0 0 1 150 100 M 150 100 A 10 10 0 0 1 200 100 M 200 100 A 10 10 0 0 1 250 100" fill="red" stroke="blue" stroke-width="3" />
</svg>
Or do I have to generate a longer and longer path when there are, let's say, 30 semicircles?
Edit: the IE9+ support is required. Also, those elements will be clickable, draggable and controllable. By controllable I mean that their number and size will change when mouse clicking/moving.
I choose my first approach with a dynamic very long path.
Thanks!

For this I would use lower case commands. For example this is drawing the arc you need: an arc with a radius of 25 and an ending point 50 units ( 2 * 25 ) away from the starting point of the arc.
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100 a 25 25 0 0 1 50 0" fill="red" stroke="blue" stroke-width="3" />
</svg>
In order to get a path of 4 arcs you need to repeat the arc (a 25 25 0 0 1 50 0) 4 times something like this:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100 a 25 25 0 0 1 50 0
a 25 25 0 0 1 50 0
a 25 25 0 0 1 50 0
a 25 25 0 0 1 50 0 " fill="red" stroke="blue" stroke-width="3" />
</svg>
It's easy to see how you can use javascript to generate the d attribute you need:
let d ="M 50 100";
for(let i=0; i<4;i++){d +="a 25 25 0 0 1 50 0 "}
document.querySelector("path").setAttribute("d",d);
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100" fill="red" stroke="blue" stroke-width="3" />
</svg>

You can use a vanilla JavaScript Web Component (supported in all modern Browsers) to create the SVG
Your Custom Element <svg-arcs repeat="7"></svg-arcs> then creates:
<style>
svg { background: pink }
svg path { stroke-width: 3 }
</style>
<svg-arcs repeat="30"></svg-arcs>
<script>
customElements.define("svg-arcs", class extends HTMLElement {
connectedCallback() {
let repeat = this.getAttribute("repeat") || 5;
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
for (let x = 0; x < repeat; x++) {
let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", `M${3 + 50*x} 100 A 10 10 0 0 1 ${50+50*x} 100`);
path.setAttribute("fill", "red");
path.setAttribute("stroke", "blue");
svg.append(path);
}
svg.setAttribute("viewBox", `0 0 ${50*repeat + 3} 150`);
this.append(svg);
}
})
</script>
For more dynamic control over individual arcs see the Web Component in SO post:
Firefox: shadow-DOM compatibility

You could use a pattern and size your patterned object appropriately. Here is one that accomodates 4 iterations.
Edit & Update:
If you want those arcs to be independently clickable/draggable, then they need to be separately addressable in the DOM. The "use" element might be what you're looking for.
svg {
background: grey;
}
<svg width="800px" height="600px">
<defs>
<path id="arc-template" d="M1.5 50 a 10 10 0 0 1 97 0" fill="red" stroke="blue" stroke-width="3" />
</defs>
<use id="arc1" href="#arc-template" x="50" y="100"/>
<use id="arc2" href="#arc-template" x="150" y="100"/>
<use id="arc3" href="#arc-template" x="250" y="100"/>
<use id="arc4" href="#arc-template" x="350" y="100"/>
</svg>

Creating text out of SVG <path>'s [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm wondering if theres any tools to create text out of SVG <path> elements. I found this codepen I really like and would like to be able to use it with my own text.
Sorry if this is a stupid question but I tried looking on google and couldn't find anything
https://codepen.io/robin-dela/pen/KKPYoBq

Yes, you can there are a lot of tools to help you in that by entering the text and it will convert it to SVG path for example Google font to SVG path tool.
every time you want to change the text just use Google font to SVG path to generate your word SVG path and put it into your code.
here is an example based on your Codepen:
var vertex = `
attribute vec2 uv;
attribute vec2 position;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 0, 1);
}
`;
var fragment = `
precision highp float;
precision highp int;
uniform sampler2D tWater;
uniform sampler2D tFlow;
uniform float uTime;
varying vec2 vUv;
uniform vec4 res;
uniform vec2 img;
vec2 centeredAspectRatio(vec2 uvs, vec2 factor){
return uvs * factor - factor /2. + 0.5;
}
void main() {
// R and G values are velocity in the x and y direction
// B value is the velocity length
vec3 flow = texture2D(tFlow, vUv).rgb;
vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
// vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV -= flow.xy * (0.15 * 1.2);
vec2 myUV2 = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV2 -= flow.xy * (0.125 * 1.2);
vec2 myUV3 = (uv - vec2(0.5))*res.zw + vec2(0.5);
myUV3 -= flow.xy * (0.10 * 1.4);
vec3 tex = texture2D(tWater, myUV).rgb;
vec3 tex2 = texture2D(tWater, myUV2).rgb;
vec3 tex3 = texture2D(tWater, myUV3).rgb;
gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0);
}
`;
{
var _size = [2048, 1638];
var renderer = new ogl.Renderer({ dpr: 2 });
var gl = renderer.gl;
document.body.appendChild(gl.canvas);
// Variable inputs to control flowmap
var aspect = 1;
var mouse = new ogl.Vec2(-1);
var velocity = new ogl.Vec2();
function resize() {
gl.canvas.width = window.innerWidth * 2.0;
gl.canvas.height = window.innerHeight * 2.0;
gl.canvas.style.width = window.innerWidth + "px";
gl.canvas.style.height = window.innerHeight + "px";
var a1, a2;
var imageAspect = _size[1] / _size[0];
if (window.innerHeight / window.innerWidth < imageAspect) {
a1 = 1;
a2 = window.innerHeight / window.innerWidth / imageAspect;
} else {
a1 = window.innerWidth / window.innerHeight * imageAspect;
a2 = 1;
}
mesh.program.uniforms.res.value = new ogl.Vec4(
window.innerWidth,
window.innerHeight,
a1,
a2);
renderer.setSize(window.innerWidth, window.innerHeight);
aspect = window.innerWidth / window.innerHeight;
}
var flowmap = new ogl.Flowmap(gl, {
falloff: 0.3,
dissipation: 0.92,
alpha: 0.5 });
// Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
var geometry = new ogl.Geometry(gl, {
position: {
size: 2,
data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) } });
var texture = new ogl.Texture(gl, {
minFilter: gl.LINEAR,
magFilter: gl.LINEAR });
var img = new Image();
img.onload = () => texture.image = img;
img.crossOrigin = "Anonymous";
img.src = "https://robindelaporte.fr/codepen/bg3.jpg";
var a1, a2;
var imageAspect = _size[1] / _size[0];
if (window.innerHeight / window.innerWidth < imageAspect) {
a1 = 1;
a2 = window.innerHeight / window.innerWidth / imageAspect;
} else {
a1 = window.innerWidth / window.innerHeight * imageAspect;
a2 = 1;
}
var program = new ogl.Program(gl, {
vertex,
fragment,
uniforms: {
uTime: { value: 0 },
tWater: { value: texture },
res: {
value: new ogl.Vec4(window.innerWidth, window.innerHeight, a1, a2) },
img: { value: new ogl.Vec2(_size[1], _size[0]) },
// Note that the uniform is applied without using an object and value property
// This is because the class alternates this texture between two render targets
// and updates the value property after each render.
tFlow: flowmap.uniform } });
var mesh = new ogl.Mesh(gl, { geometry, program });
window.addEventListener("resize", resize, false);
resize();
// Create handlers to get mouse position and velocity
var isTouchCapable = ("ontouchstart" in window);
if (isTouchCapable) {
window.addEventListener("touchstart", updateMouse, false);
window.addEventListener("touchmove", updateMouse, { passive: false });
} else {
window.addEventListener("mousemove", updateMouse, false);
}
var lastTime;
var lastMouse = new ogl.Vec2();
function updateMouse(e) {
e.preventDefault();
if (e.changedTouches && e.changedTouches.length) {
e.x = e.changedTouches[0].pageX;
e.y = e.changedTouches[0].pageY;
}
if (e.x === undefined) {
e.x = e.pageX;
e.y = e.pageY;
}
// Get mouse value in 0 to 1 range, with y flipped
mouse.set(e.x / gl.renderer.width, 1.0 - e.y / gl.renderer.height);
// Calculate velocity
if (!lastTime) {
// First frame
lastTime = performance.now();
lastMouse.set(e.x, e.y);
}
var deltaX = e.x - lastMouse.x;
var deltaY = e.y - lastMouse.y;
lastMouse.set(e.x, e.y);
var time = performance.now();
// Avoid dividing by 0
var delta = Math.max(10.4, time - lastTime);
lastTime = time;
velocity.x = deltaX / delta;
velocity.y = deltaY / delta;
// Flag update to prevent hanging velocity values when not moving
velocity.needsUpdate = true;
}
requestAnimationFrame(update);
function update(t) {
requestAnimationFrame(update);
// Reset velocity when mouse not moving
if (!velocity.needsUpdate) {
mouse.set(-1);
velocity.set(0);
}
velocity.needsUpdate = false;
// Update flowmap inputs
flowmap.aspect = aspect;
flowmap.mouse.copy(mouse);
// Ease velocity input, slower when fading out
flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
flowmap.update();
program.uniforms.uTime.value = t * 0.01;
renderer.render({ scene: mesh });
}
}
body {
position: fixed;
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
}
.mask {
position: absolute;
z-index: 2;
background: white;
height: 100vh;
width: 100vw;
mix-blend-mode: screen;
/* display: none; */
}
svg {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://robindelaporte.fr/codepen/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<div class="mask">
<svg id="Layer_1" width="500.25" height="300.401" viewBox="0 0 124.25 35.401" xmlns="http://www.w3.org/2000/svg"><g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="" ><path class="st0" d="M 0.287 14.019 A 28.282 28.282 0 0 0 0 18.15 A 32.323 32.323 0 0 0 0.167 21.511 Q 0.796 27.521 3.8 31 Q 7.6 35.4 14.525 35.4 Q 21.45 35.4 25.875 30.575 Q 30.3 25.75 30.3 16.75 Q 30.3 12.5 29.225 9.3 Q 28.579 7.375 27.769 5.984 A 10.057 10.057 0 0 0 26.625 4.375 Q 25.1 2.65 22.95 1.625 A 22.239 22.239 0 0 0 22.015 1.205 Q 21.254 0.884 20.556 0.663 A 11.47 11.47 0 0 0 19.1 0.3 Q 17.4 0 15.55 0 A 14.963 14.963 0 0 0 10.221 0.967 A 17.387 17.387 0 0 0 5.45 3.75 A 10.119 10.119 0 0 0 4.91 4.213 Q 3.765 5.263 2.846 6.738 A 17.31 17.31 0 0 0 1.5 9.425 A 17.43 17.43 0 0 0 1.384 9.722 Q 0.631 11.696 0.287 14.019 Z M 15.1 30.7 Q 24.05 30.7 24.05 17.55 A 28.133 28.133 0 0 0 23.703 12.915 Q 22.273 4.4 14.95 4.4 A 9.734 9.734 0 0 0 12.536 4.685 A 7.198 7.198 0 0 0 9.675 6.125 Q 7.6 7.85 6.8 10.425 Q 6 13 6 16.4 A 33.631 33.631 0 0 0 6.32 21.26 Q 7.706 30.7 15.1 30.7 Z" id="0" vector-effect="non-scaling-stroke"/><path class="st0" d="M 33.7 13.4 L 33.7 10.8 A 1.08 1.08 0 0 1 33.737 10.503 Q 33.833 10.17 34.172 10.082 A 1.105 1.105 0 0 1 34.45 10.05 L 41.3 10.05 A 0.819 0.819 0 0 1 41.618 10.108 Q 41.978 10.258 42.05 10.8 L 42.45 13.7 A 8.722 8.722 0 0 1 45.429 10.703 Q 47.085 9.726 49.233 9.542 A 11.966 11.966 0 0 1 50.25 9.5 A 9.347 9.347 0 0 1 52.894 9.848 Q 55.914 10.738 57.1 13.9 A 9.588 9.588 0 0 1 59.583 11.134 Q 61.533 9.704 64.18 9.526 A 11.433 11.433 0 0 1 64.95 9.5 A 10.083 10.083 0 0 1 68.146 9.963 Q 72.659 11.47 72.7 17.882 A 18.445 18.445 0 0 1 72.7 18 L 72.7 30.85 L 75.55 30.85 A 1.08 1.08 0 0 1 75.847 30.887 Q 76.18 30.983 76.268 31.322 A 1.105 1.105 0 0 1 76.3 31.6 L 76.3 34.05 A 1.08 1.08 0 0 1 76.263 34.347 Q 76.168 34.68 75.828 34.768 A 1.105 1.105 0 0 1 75.55 34.8 L 64.55 34.8 A 1.08 1.08 0 0 1 64.253 34.763 Q 63.921 34.668 63.832 34.328 A 1.105 1.105 0 0 1 63.8 34.05 L 63.8 31.6 A 1.08 1.08 0 0 1 63.837 31.303 Q 63.933 30.97 64.272 30.882 A 1.105 1.105 0 0 1 64.55 30.85 L 67.1 30.85 L 67.1 20.5 A 19.73 19.73 0 0 0 67.04 18.905 Q 66.916 17.374 66.531 16.396 A 4.228 4.228 0 0 0 66.3 15.9 A 2.552 2.552 0 0 0 64.913 14.738 Q 64.155 14.45 63.075 14.45 A 7.356 7.356 0 0 0 61.458 14.618 Q 60.129 14.917 59.2 15.75 A 4.704 4.704 0 0 0 58.275 16.857 A 3.756 3.756 0 0 0 57.75 18.8 L 57.75 30.85 L 60.15 30.85 A 1.08 1.08 0 0 1 60.447 30.887 Q 60.78 30.983 60.868 31.322 A 1.105 1.105 0 0 1 60.9 31.6 L 60.9 34.05 A 1.08 1.08 0 0 1 60.863 34.347 Q 60.768 34.68 60.428 34.768 A 1.105 1.105 0 0 1 60.15 34.8 L 49.9 34.8 A 1.08 1.08 0 0 1 49.603 34.763 Q 49.271 34.668 49.182 34.328 A 1.105 1.105 0 0 1 49.15 34.05 L 49.15 31.6 A 1.08 1.08 0 0 1 49.187 31.303 Q 49.283 30.97 49.622 30.882 A 1.105 1.105 0 0 1 49.9 30.85 L 52.15 30.85 L 52.15 20.5 A 19.73 19.73 0 0 0 52.09 18.905 Q 51.966 17.374 51.581 16.396 A 4.228 4.228 0 0 0 51.35 15.9 A 2.534 2.534 0 0 0 50.001 14.758 Q 49.535 14.575 48.943 14.501 A 6.978 6.978 0 0 0 48.075 14.45 A 6.698 6.698 0 0 0 46.432 14.641 A 4.652 4.652 0 0 0 44.175 15.925 A 5.128 5.128 0 0 0 43.106 17.519 A 4.719 4.719 0 0 0 42.75 19.35 L 42.75 30.85 L 45.8 30.85 A 1.08 1.08 0 0 1 46.097 30.887 Q 46.43 30.983 46.518 31.322 A 1.105 1.105 0 0 1 46.55 31.6 L 46.55 34.05 A 1.08 1.08 0 0 1 46.513 34.347 Q 46.418 34.68 46.078 34.768 A 1.105 1.105 0 0 1 45.8 34.8 L 34.5 34.8 A 1.08 1.08 0 0 1 34.203 34.763 Q 33.871 34.668 33.782 34.328 A 1.105 1.105 0 0 1 33.75 34.05 L 33.75 31.6 A 1.08 1.08 0 0 1 33.787 31.303 Q 33.883 30.97 34.222 30.882 A 1.105 1.105 0 0 1 34.5 30.85 L 37.15 30.85 L 37.15 14.15 L 34.45 14.15 A 1.08 1.08 0 0 1 34.153 14.113 Q 33.821 14.018 33.732 13.678 A 1.105 1.105 0 0 1 33.7 13.4 Z" id="1" vector-effect="non-scaling-stroke"/><path class="st0" d="M 93.5 19.95 L 93.5 18.2 A 9.647 9.647 0 0 0 93.39 16.682 Q 93.268 15.915 93.008 15.33 A 2.968 2.968 0 0 0 91.5 13.75 A 4.051 4.051 0 0 0 90.823 13.539 Q 90.105 13.377 89.09 13.354 A 15.117 15.117 0 0 0 88.75 13.35 A 5.387 5.387 0 0 0 87.177 13.563 Q 85.452 14.089 84.826 15.917 A 5.734 5.734 0 0 0 84.65 16.55 A 1.491 1.491 0 0 1 84.559 16.851 Q 84.37 17.287 83.927 17.3 A 0.936 0.936 0 0 1 83.9 17.3 L 80.7 17.3 Q 79.9 17.3 80 16.55 A 7.966 7.966 0 0 1 80.439 14.271 A 5.867 5.867 0 0 1 82.95 11.2 A 10.731 10.731 0 0 1 86.13 9.912 Q 87.507 9.584 89.115 9.517 A 20.158 20.158 0 0 1 89.95 9.5 A 14.16 14.16 0 0 1 93.383 9.879 Q 97.836 10.995 98.695 15.405 A 12.019 12.019 0 0 1 98.9 17.7 L 98.9 30.85 L 101.05 30.85 A 1.08 1.08 0 0 1 101.347 30.887 Q 101.68 30.983 101.768 31.322 A 1.105 1.105 0 0 1 101.8 31.6 L 101.8 34.05 A 1.08 1.08 0 0 1 101.763 34.347 Q 101.668 34.68 101.328 34.768 A 1.105 1.105 0 0 1 101.05 34.8 L 95.15 34.8 A 0.819 0.819 0 0 1 94.832 34.742 Q 94.472 34.592 94.4 34.05 L 94.05 31.75 A 8.78 8.78 0 0 1 87.642 35.327 A 12.938 12.938 0 0 1 86.25 35.4 A 10.061 10.061 0 0 1 83.832 35.124 A 7.408 7.408 0 0 1 80.95 33.725 A 5.2 5.2 0 0 1 79.256 31.211 Q 78.964 30.324 78.882 29.235 A 11.781 11.781 0 0 1 78.85 28.35 Q 78.85 23.553 82.812 21.74 A 8.786 8.786 0 0 1 82.9 21.7 A 17.364 17.364 0 0 1 86.701 20.474 Q 88.465 20.11 90.481 20.017 A 29.489 29.489 0 0 1 90.9 20 Q 91.628 20 92.765 19.971 A 162.373 162.373 0 0 0 93.5 19.95 Z M 93.6 27.25 L 93.6 23.4 A 81.655 81.655 0 0 0 91.93 23.416 Q 88.594 23.484 87.7 23.85 A 25.7 25.7 0 0 0 86.663 24.3 A 18.714 18.714 0 0 0 85.75 24.75 Q 84.15 25.6 84.15 27.85 A 4.287 4.287 0 0 0 84.374 29.298 Q 85.054 31.195 87.791 31.295 A 8.517 8.517 0 0 0 88.1 31.3 A 8.903 8.903 0 0 0 89.683 31.168 Q 90.569 31.008 91.273 30.653 A 4.486 4.486 0 0 0 92.15 30.075 A 4.729 4.729 0 0 0 92.976 29.189 A 3.301 3.301 0 0 0 93.6 27.25 Z" id="2" vector-effect="non-scaling-stroke"/><path class="st0" d="M 124.25 10.8 L 124.25 17.55 A 1.08 1.08 0 0 1 124.213 17.847 Q 124.118 18.18 123.778 18.268 A 1.105 1.105 0 0 1 123.5 18.3 L 120.25 18.3 A 1.082 1.082 0 0 1 119.976 18.269 Q 119.52 18.149 119.549 17.573 A 1.474 1.474 0 0 1 119.55 17.55 L 119.75 14.65 Q 119.502 14.6 118.91 14.6 A 13.297 13.297 0 0 0 118.9 14.6 A 4.593 4.593 0 0 0 115.438 16.087 A 6.025 6.025 0 0 0 115.1 16.475 A 6.486 6.486 0 0 0 113.914 18.887 Q 113.661 19.831 113.612 20.948 A 12.535 12.535 0 0 0 113.6 21.5 L 113.6 30.85 L 119.1 30.85 A 1.08 1.08 0 0 1 119.397 30.887 Q 119.73 30.983 119.818 31.322 A 1.105 1.105 0 0 1 119.85 31.6 L 119.85 34.05 A 1.08 1.08 0 0 1 119.813 34.347 Q 119.718 34.68 119.378 34.768 A 1.105 1.105 0 0 1 119.1 34.8 L 105.35 34.8 A 1.08 1.08 0 0 1 105.053 34.763 Q 104.721 34.668 104.632 34.328 A 1.105 1.105 0 0 1 104.6 34.05 L 104.6 31.6 A 1.08 1.08 0 0 1 104.637 31.303 Q 104.733 30.97 105.072 30.882 A 1.105 1.105 0 0 1 105.35 30.85 L 108 30.85 L 108 14.15 L 105.3 14.15 A 1.08 1.08 0 0 1 105.003 14.113 Q 104.671 14.018 104.582 13.678 A 1.105 1.105 0 0 1 104.55 13.4 L 104.55 10.8 A 1.08 1.08 0 0 1 104.587 10.503 Q 104.683 10.17 105.022 10.082 A 1.105 1.105 0 0 1 105.3 10.05 L 111.9 10.05 A 0.966 0.966 0 0 1 112.25 10.109 Q 112.642 10.261 112.75 10.8 L 113.3 14.35 A 8.128 8.128 0 0 1 115.482 11.384 A 9.875 9.875 0 0 1 116.05 10.925 Q 117.95 9.5 120.2 9.5 A 20.41 20.41 0 0 1 121.444 9.535 Q 122.636 9.608 123.432 9.833 A 4.92 4.92 0 0 1 123.65 9.9 Q 124.123 10.058 124.223 10.525 A 1.309 1.309 0 0 1 124.25 10.8 Z" id="3" vector-effect="non-scaling-stroke"/></g> <style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
}
</style>
</svg>
</div>

I think you need to write text in Svg Like this if you don't want to use path.
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line.</tspan>
<tspan x="10" y="70">Second line.</tspan>
</text
</svg>

Make arm point towards mouse direction

I have a SVG image of a person which I want to animate slightly. I want to make the arm point towards the mouse. However I can't seem to get it to work. Currently I have this:
View on Codepen
As you can see the hand is fixed but the shoulder is loose which should be the opposite. Only when I point my mouse towards the shoulder the hand is correct again.
I use the following code
document.querySelector('#app')
.addEventListener('mousemove', mascotArm);
function mascotArm() {
var arm = document.querySelectorAll('.arm');
arm.forEach(function(arm) {
let x = (arm.getBoundingClientRect().right);
let y = (arm.getBoundingClientRect().top);
let radian = Math.atan2(event.pageX - x, event.pageY + y);
let rot = (radian * (90 / Math.PI))
arm.style.transform = 'rotate('+ rot + 'deg)';
})
}
I've tried the following code, but I wasn't able to implement it correctly in the SVG image
var cv = document.createElement('canvas');
var ctx = cv.getContext('2d');
cv.width = 1224;
cv.height = 768;
document.body.appendChild(cv);
var centerX = 300, centerY = 200;
var arm = new Image();
arm.onload = function() {
drawArrow(0);
};
var arm = document.querySelectorAll('.arm')
function drawArm(angle) {
ctx.clearRect(0, 0, cv.width, cv.height);
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(-Math.PI / 2);
ctx.rotate(angle);
ctx.drawImage(arm, -arm.width / 2, -arm.height / 2);
ctx.restore();
}
document.onmousemove = function(e) {
var dx = e.pageX - centerX;
var dy = e.pageY - centerY;
var theta = Math.atan2(dy, dx);
drawArm(theta);
};
Desired solution
My desired solution would be that I can move my mouse on the page and that the arm is pointing towards my mouse. If possible it would be awesome if it can only move 90 degrees so that it doesn't make weird rotations.
Many thanks!

You will need a transform origin for the rotation of the .arm. For example you may try .arm{transform-origin: 280px 200px;}. In the code I've added a small red circle to mark the rotation hub. You can delete the circle and change the position of the hub. Please observe that I'm using the hub position in JavaScript. You will have to change it there too.
In JavaScript it's Math.atan2(y,x) not Math.atan2(x,y). Please read about Math.atan2.
Also the arm has a different angle inside the .arm box. You will need to to take in consideration this angle too. In order to understand what happens I've added a black rectangle as big as the bounding box of the arm. You may try arm.style.transform = 'rotate('+ (rot - 20) + 'deg)';
Also you ar listening the mouse over the app. As you can see I'm listening the mouse over the svg elemet. I suppose you need the doctorat the right side of the app. In order to keep it there I have #app {height:100vh; The app is now as wide as it's parent. Also svg{width:100%; height:100%} This will stretch the svg element over the app. In order to keep the doctor to the right I'm using preserveAspectRatio="xMaxYMax meet"
let svg = document.querySelector('#svg'); svg.addEventListener('mousemove', mascotArm);
//the hub position
let X = 280;
let Y = 200;
function mascotArm(event) {
var arm = document.querySelector('.arm');
let p = getMousePositionSVG(event)
let x = p.x;
let y = p.y;
let radian = Math.atan2(Y-y, X-x);
let rot = (radian * (180 / Math.PI))
arm.style.transform = 'rotate('+ (rot - 20) + 'deg)';
}
//a function to calculate the mouse position over an svg element
function getMousePositionSVG(event) {
var point = svg.createSVGPoint();
point.x = event.clientX;
point.y = event.clientY;
point = point.matrixTransform(svg.getScreenCTM().inverse());
return point;
}
#app {
background: #efefef;
height:100vh
}
svg{width:100%; height:100%}
.arm{transform-origin: 280px 200px;}
<div id="app">
<svg viewBox="0 0 458 753" fill="none" id="svg" preserveAspectRatio="xMaxYMax meet">
<g class="Layer 1">
<g class="Group">
<g class="Group_2">
<g class="Group_3">
<path d="M286.306 353l-18.063 197.3-14.569 144.54s7.896 11 37.606 6l15.695-151.5 19.149-124.5h15.299l10.167 276s12.831 10 36.619 1l-4.737-355.3-97.166 6.46z" fill="#303942" class="Vector_7"/>
<path d="M373.265 701.34a48.73 48.73 0 0014.609-2.5l-4.639-347.6-89.033 5.9-17.767 193.7-14.312 142.4c2.171 1.6 7.6 4.7 18.853 4.7a73.728 73.728 0 0010.462-.8l15.3-148.3 19.741-128.2h22.998l10.266 277.8a29.95 29.95 0 0013.522 2.9z" fill="#252D33" class="Vector_8"/>
<path d="M274.856 199.44s3.257 100.3 9.673 151.2c0 0 24.479 11.1 63.566 9.5 27.638-1.1 35.534-7.1 35.534-7.1l40.075-162.7s-20.432-11.9-62.481-11.9l-19.543 18.3s-5.331-14.2-15.793-17c-15.793 1.1-32.277 6-50.834 9.1l-.197 10.6z" fill="#148C78" class="Vector_9"/>
<path d="M341.778 196.64l5.034-17.8 11.154 5.2-16.188 12.6z" fill="#056351" class="Vector_10"/>
<path d="M349.477 161.24c4.936-2.4 9.476-6.9 12.931-13l.493 2.6.296 25.5c-8.982 1.2-19.247-4.1-28.526-14.6a17.467 17.467 0 007.458 1.399 17.467 17.467 0 007.348-1.899z" fill="#F2957C" class="Vector_11"/>
<path d="M340.298 180.44l1.48 16.2-9.179-11.5 7.699-4.7z" fill="#056351" class="Vector_12"/>
<path d="M350.168 185.14a41.914 41.914 0 01-13.226.5l-6.219 7.5 5.429 7.9-21.222 125.3 16.385 16.6 20.038-14.5-4.639-126.6 6.81-9.8-3.356-6.9z" fill="#73C8D2" class="Vector_13"/>
<path d="M315.029 179.34l13.72 18.8 11.549-17.7-18.162-12.3-7.107 11.2z" fill="#0C7561" class="Vector_14"/>
<path d="M412.353 247.44l-19.445 75 6.712 198.2-66.33 14.6-9.674-19.7-9.673 20.9-54.683-13.8s13.424-289.4 15.892-333.6l28.032-9.1 34.547 115.5 41.299-118.2s43.43 11.8 53.794 14.4" fill="#E5E5E5" class="Vector_16"/>
<path d="M335.165 164.64c17.964-2.3 38.199-17.3 42.838-27a17.044 17.044 0 012.863-4.6c16.385 3 24.38-31.4 13.621-36.1-.395-.2-.888-.3-1.283-.5a10.522 10.522 0 017.6.5c10.759 4.7 2.863 39.1-13.621 36.1a15.652 15.652 0 00-2.863 4.6c-4.639 9.8-24.873 24.7-42.838 27a33.045 33.045 0 01-7.699.1c.463.016.926-.017 1.382-.1z" fill="#F4876C" class="Vector_17"/>
<path d="M399.225 102.84c-5.626-2.9-10.562 6.3-10.858 16.1 4.639-.7 5.429 4.7 2.764 8.6 9.278 1.9 14.115-21.6 8.094-24.7z" fill="#F2957C" class="Vector_18"/>
<path d="M432.884 191.64c-8.094-2.1-40.174-13.5-53.795-14.4l-41.259 118.1-34.547-115.5-17.471 44c-2.171 40.1-18.359 258.6-20.235 295l46.491 12.4 11.154-23.6 11.943 22.3 61.888-15.3 4.442-196.4 14.411-98.3" fill="#F2F2F2" class="Vector_19"/>
<g class="Group_6">
<path d="M375.733 274.74v-8.2h-6.811a2.956 2.956 0 01-1.923-1.186 3.028 3.028 0 01-.544-2.214 2.887 2.887 0 01.808-1.681 2.824 2.824 0 011.659-.819h19.544a2.935 2.935 0 012.018.674c.567.47.942 1.136 1.053 1.87a3.035 3.035 0 01-.455 2.103 2.964 2.964 0 01-1.728 1.253h-7.6v8.2a3.118 3.118 0 01-1.064 1.796 3.04 3.04 0 01-3.893 0 3.118 3.118 0 01-1.064-1.796zm-6.811-12.8a1.664 1.664 0 00-1.215.427c-.333.3-.535.722-.561 1.173-.027.451.125.894.421 1.231.296.338.713.542 1.158.569h8.39v9.4c.038.446.243.861.573 1.159.331.298.762.455 1.204.441a1.774 1.774 0 001.066-.519c.287-.291.468-.672.513-1.081v-9.4h8.094c.445.027.882-.127 1.215-.427.333-.3.535-.722.561-1.173a1.711 1.711 0 00-.421-1.231 1.674 1.674 0 00-1.158-.569h-19.84z" fill="#006983" class="Vector_20"/>
<path d="M368.922 260.64h19.544a2.935 2.935 0 012.018.674c.567.47.942 1.136 1.053 1.87a3.035 3.035 0 01-.455 2.103 2.964 2.964 0 01-1.728 1.253h-7.6v8.2a3.007 3.007 0 01-1.171 1.949 2.931 2.931 0 01-2.185.551 2.943 2.943 0 01-1.636-.843 3.015 3.015 0 01-.832-1.657v-8.2h-6.771a2.954 2.954 0 01-1.924-1.186 3.028 3.028 0 01-.543-2.214 2.433 2.433 0 01.629-1.721 2.375 2.375 0 011.641-.779h-.04zm.04-1.2c-1.1 0-2.154.443-2.932 1.23a4.23 4.23 0 00-1.214 2.97 4.23 4.23 0 001.214 2.97 4.118 4.118 0 002.932 1.23h5.626v6.9a4.254 4.254 0 001.361 2.904 4.147 4.147 0 002.982 1.096 4.073 4.073 0 002.751-1.213 4.174 4.174 0 001.197-2.787v-6.9h5.626c1.1 0 2.154-.442 2.932-1.23a4.23 4.23 0 001.214-2.97 4.23 4.23 0 00-1.214-2.97 4.123 4.123 0 00-2.932-1.23h-19.543z" fill="#fff" class="Vector_21"/>
<path d="M368.922 259.44h19.544c1.1 0 2.154.443 2.931 1.23a4.227 4.227 0 011.215 2.97 4.227 4.227 0 01-1.215 2.97 4.114 4.114 0 01-2.931 1.23h-5.626v6.9a4.254 4.254 0 01-1.361 2.904 4.147 4.147 0 01-2.982 1.096 4.069 4.069 0 01-2.751-1.213 4.17 4.17 0 01-1.197-2.787v-6.9h-5.627a4.15 4.15 0 01-2.923-1.239 4.258 4.258 0 01-1.222-2.961 4.187 4.187 0 011.202-2.982 4.095 4.095 0 012.943-1.218zm0-1.3a5.35 5.35 0 00-2.08.413 5.41 5.41 0 00-1.764 1.192 5.485 5.485 0 00-1.177 1.787 5.554 5.554 0 00-.407 2.108 5.475 5.475 0 00.391 2.117 5.424 5.424 0 001.175 1.796 5.334 5.334 0 001.772 1.19 5.28 5.28 0 002.09.397h4.343v5.7a5.492 5.492 0 001.686 3.646 5.354 5.354 0 003.694 1.484 5.354 5.354 0 003.694-1.484 5.496 5.496 0 001.685-3.646v-5.7h4.343a5.351 5.351 0 002.081-.413 5.42 5.42 0 001.764-1.192 5.482 5.482 0 001.176-1.787 5.536 5.536 0 00.408-2.108 5.475 5.475 0 00-.391-2.117 5.424 5.424 0 00-1.175-1.796 5.328 5.328 0 00-3.863-1.587h-19.445z" fill="#006983" class="Vector_22"/>
<path d="M378.595 249.44c.391 0 .773.117 1.097.337a2.019 2.019 0 01.299 3.077 1.956 1.956 0 01-3.037-.303 2.017 2.017 0 01.246-2.525 1.96 1.96 0 011.395-.586zm0-1.2c-.644 0-1.273.194-1.809.556a3.295 3.295 0 00-1.2 1.481 3.343 3.343 0 00-.185 1.907c.125.64.436 1.228.891 1.689a3.219 3.219 0 003.55.716 3.27 3.27 0 001.462-1.216c.358-.542.549-1.18.549-1.833a3.32 3.32 0 00-.24-1.268 3.268 3.268 0 00-.705-1.074 3.216 3.216 0 00-2.313-.958z" fill="#006983" class="Vector_23"/>
<path d="M378.595 248.24c.645 0 1.274.194 1.81.556.536.363.953.878 1.2 1.481.246.603.311 1.267.185 1.907a3.316 3.316 0 01-.891 1.689 3.219 3.219 0 01-3.55.716 3.27 3.27 0 01-1.462-1.216 3.327 3.327 0 01-.549-1.833 3.423 3.423 0 01.982-2.306 3.334 3.334 0 012.275-.994zm0-1.3c-.878 0-1.737.264-2.467.758a4.489 4.489 0 00-1.636 2.02 4.56 4.56 0 00-.253 2.6 4.508 4.508 0 001.216 2.304 4.389 4.389 0 004.84.975 4.45 4.45 0 001.994-1.657c.488-.74.748-1.61.748-2.5a4.585 4.585 0 00-1.315-3.168 4.461 4.461 0 00-3.127-1.332z" fill="#fff" class="Vector_24"/>
<path d="M378.595 246.94c.879 0 1.738.264 2.468.758a4.489 4.489 0 011.636 2.02 4.56 4.56 0 01.253 2.6 4.523 4.523 0 01-1.216 2.304 4.389 4.389 0 01-4.84.975 4.45 4.45 0 01-1.994-1.657 4.542 4.542 0 01-.748-2.5 4.636 4.636 0 011.331-3.151 4.522 4.522 0 013.11-1.349zm0-1.2c-1.132 0-2.239.34-3.18.977a5.794 5.794 0 00-2.109 2.603 5.875 5.875 0 00-.325 3.352 5.818 5.818 0 001.566 2.969 5.66 5.66 0 006.239 1.257 5.742 5.742 0 002.57-2.136 5.854 5.854 0 00.964-3.222 5.84 5.84 0 00-1.676-4.101 5.688 5.688 0 00-4.049-1.699z" fill="#006983" class="Vector_25"/>
</g>
<path d="M303.184 179.84l34.547 115.5-30.302-37.4 2.369-24.6-16.089-4.9 1.579-47.3 7.896-1.3z" fill="#E5E5E5" class="Vector_26"/>
<path d="M303.382 180.14l-4.343.7-1.086 43.8 15.892 5-2.567 25.4 22.999 28.4-30.895-103.3z" fill="#EAEAEA" class="Vector_27"/>
<path d="M333.092 318.34c2.508 0 4.541-2.059 4.541-4.6 0-2.541-2.033-4.6-4.541-4.6-2.507 0-4.54 2.059-4.54 4.6 0 2.541 2.033 4.6 4.54 4.6z" fill="#E8E8E8" class="Vector_28"/>
<path d="M331.019 349.04c2.508 0 4.541-2.06 4.541-4.6 0-2.541-2.033-4.6-4.541-4.6-2.507 0-4.54 2.059-4.54 4.6 0 2.54 2.033 4.6 4.54 4.6z" fill="#E8E8E8" class="Vector_29"/>
<path d="M329.637 381.04c2.508 0 4.541-2.06 4.541-4.6 0-2.541-2.033-4.6-4.541-4.6-2.507 0-4.54 2.059-4.54 4.6 0 2.54 2.033 4.6 4.54 4.6z" fill="#E8E8E8" class="Vector_30"/>
<path d="M327.565 411.74c2.507 0 4.54-2.06 4.54-4.6 0-2.541-2.033-4.6-4.54-4.6-2.508 0-4.541 2.059-4.541 4.6 0 2.54 2.033 4.6 4.541 4.6z" fill="#E8E8E8" class="Vector_31"/>
<path d="M326.676 439.34c2.508 0 4.541-2.059 4.541-4.6 0-2.541-2.033-4.6-4.541-4.6-2.507 0-4.54 2.059-4.54 4.6 0 2.541 2.033 4.6 4.54 4.6z" fill="#E8E8E8" class="Vector_32"/>
<path d="M324.505 470.04c2.507 0 4.54-2.06 4.54-4.6 0-2.541-2.033-4.6-4.54-4.6-2.508 0-4.541 2.059-4.541 4.6 0 2.54 2.033 4.6 4.541 4.6z" fill="#E8E8E8" class="Vector_33"/>
<path d="M323.222 498.24c2.507 0 4.54-2.06 4.54-4.6 0-2.541-2.033-4.6-4.54-4.6-2.508 0-4.541 2.059-4.541 4.6 0 2.54 2.033 4.6 4.541 4.6z" fill="#E8E8E8" class="Vector_34"/>
<path d="M352.142 88.24c2.567-2.3 8.686-1.8 10.364.6.889.6 0 1.8-1.776 1.8h-3.415a3.91 3.91 0 00-2.567.6c-1.717-.1-4.343-1.9-2.606-3z" fill="#65433F" class="Vector_35"/>
<path d="M332.895 120c.789 0 2.27 1.6 3.06 1.6 1.48 0 2.27 0 3.059-.8.79-.8 2.271 0 1.58 1.6-.691 1.6-3.06 2.5-4.639 2.5-1.58 0-4.64-1.6-5.33-3.3.789-.76 1.48-1.6 2.27-1.6z" fill="#F4876C" class="Vector_36"/>
<path d="M332.796 153.74l1.086-1.1c1.086 0 2.171 2.3 1.086 2.3h-2.172c0-.1-1.086-.1 0-1.2z" fill="#F4876C" class="Vector_37"/>
<path d="M396.955 104.84a4.065 4.065 0 00-1.913-.537 4.062 4.062 0 00-1.937.437c1.777-2 3.948-2.8 6.219-1.6 5.231 2.7 2.171 21-4.738 24.3 5.172-5.7 6.909-20.2 2.369-22.6z" fill="#E58370" class="Vector_38"/>
<path d="M322.037 88.34c-2.566-2.4-8.686-1.8-10.364.6-.888.6 0 1.8 1.777 1.8h3.454a3.91 3.91 0 012.567.6c1.776-.1 4.343-1.9 2.566-3z" fill="#65433F" class="Vector_39"/>
<path d="M378.99 177.24l6.811.3 3.948 42.4-19.642 4.4 6.712 26.4-37.212 39.3 39.383-112.8z" fill="#E5E5E5" class="Vector_40"/>
<path d="M373.167 247.94l-6.91-27.4 19.939-4.5-3.554-38.6-3.454-.2-35.534 101.9 29.513-31.2z" fill="#EAEAEA" class="Vector_41"/>
<path d="M296.176 190.54h-.395a19.546 19.546 0 00-13.621 5.5c-10.463 10.1-9.377 30.6-9.278 31.5.093.656.432 1.251.947 1.66.514.41 1.165.603 1.816.54a2.41 2.41 0 001.754-.723 2.49 2.49 0 00.714-1.777c0-.3-1.086-19.4 7.897-28a13.675 13.675 0 014.593-2.975 13.54 13.54 0 015.376-.925h.197a13.562 13.562 0 018.291 3.1c4.146 3.3 9.18 10.9 9.575 27.9a2.61 2.61 0 00.921 1.718c.516.43 1.177.638 1.843.582a2.36 2.36 0 001.798-.635 2.423 2.423 0 00.768-1.765c-.395-15.1-4.244-25.7-11.549-31.4a18.149 18.149 0 00-11.647-4.3z" fill="#006983" class="Vector_67"/>
<g class="Group_13">
<path d="M293.807 255.34a2.381 2.381 0 00-.714-1.647 2.311 2.311 0 00-1.655-.653l-4.245.5c-1.283.4-1.283 1.1-1.283 2 0 1 0 1.7 1.481 2l4.145.2a2.36 2.36 0 001.609-.74c.423-.447.66-1.041.662-1.66z" fill="#151E31" class="Vector_68"/>
<path d="M290.55 255.44a2.712 2.712 0 012.27 1c-.418.429-.984.68-1.579.7l-2.566-.1c-.099-1.2.592-1.6 1.875-1.6z" fill="#fff" class="Vector_69"/>
<path d="M289.563 254.24c-1.875.3-2.566 1.6-2.566 3.3-1.185-.3-1.185-1-1.185-1.9 0-.9 0-1.6 1.283-2l4.245-.5c.522 0 1.03.177 1.441.504.411.326.703.782.829 1.296a4.596 4.596 0 00-4.047-.7z" fill="#808184" class="Vector_70"/>
</g>
<g class="Group_14">
<path d="M298.841 255.24a2.375 2.375 0 01.645-1.677 2.32 2.32 0 011.626-.723l4.343.3c1.381.3 1.283 1 1.381 1.9 0 1 0 1.7-1.381 2.1l-4.146.4a2.458 2.458 0 01-1.676-.663 2.523 2.523 0 01-.792-1.637z" fill="#151E31" class="Vector_71"/>
<path d="M302.099 255.14a2.272 2.272 0 00-2.172 1.1c.429.401.996.616 1.579.6l2.567-.3c0-1.2-.691-1.54-1.974-1.4z" fill="#fff" class="Vector_72"/>
<path d="M303.027 253.84c.379.016.751.11 1.094.277a2.8 2.8 0 01.897.692 2.851 2.851 0 01.674 2.131c1.184-.4 1.184-1.1 1.086-2-.099-.9 0-1.6-1.382-1.9l-4.343-.3a2.218 2.218 0 00-1.428.549c-.397.348-.66.826-.744 1.351a5.713 5.713 0 014.146-.8z" fill="#808184" class="Vector_73"/>
</g>
</g>
</g>
<g class="ster-ogen">
<path d="M318.43 112.35l8.72 3.42-3.63-8.61 6-7.27-9.34.73-5-7.89-2.18 9-9 2.28 8 4.88-.62 9.34 7.05-5.88z" fill="#F9FF00" class="Vector_74"/>
<path d="M361.98 119.3l-.62-10 8.51-5.19-9.65-2.49-2.24-9.62-5.3 8.31-9.86-.83 6.33 7.68-3.84 9.13 9.24-3.63 7.43 6.64z" fill="#F9FF00" class="Vector_75"/>
</g>
<g class="blij">
<path d="M334.671 148.64c-11.055-1.1-12.733-9-11.055-11.2 1.678-2.2 19.939-2.3 22.209 0 1.619 1.7-.592 11.2-11.154 11.2z" fill="#AA312D" class="Vector_76"/>
<path d="M346.319 139.14a1.93 1.93 0 00-.592-1.7c-2.271-2.3-19.939-2.3-22.209 0 0 0-.593 1.1 0 1.7 7.304 2.2 15.102 1.7 22.801 0z" fill="#fff" class="Vector_77"/>
<path d="M330.723 147.84a12.667 12.667 0 01-4.836-2.6c.493-.5 1.085-.5 1.579-1.1a17.076 17.076 0 015.527-.6 13.086 13.086 0 018.588 3.2 12.866 12.866 0 01-6.91 1.9 13.294 13.294 0 01-3.454-.7.884.884 0 01-.494-.1z" fill="#902622" class="Vector_78"/>
</g>
<g class="ogen">
<path d="M358.065 113.64c4.143 0 7.501-3.627 7.501-8.1 0-4.474-3.358-8.1-7.501-8.1-4.143 0-7.502 3.626-7.502 8.1 0 4.473 3.359 8.1 7.502 8.1z" fill="#F2957C" class="Vector_79"/>
<path d="M358.065 112.44c3.543 0 6.416-3.089 6.416-6.9 0-3.811-2.873-6.9-6.416-6.9-3.544 0-6.416 3.089-6.416 6.9 0 3.811 2.872 6.9 6.416 6.9z" fill="#5E3536" class="Vector_80"/>
<path d="M360.039 104.14c.872 0 1.579-.761 1.579-1.7s-.707-1.7-1.579-1.7-1.579.761-1.579 1.7.707 1.7 1.579 1.7z" fill="#fff" class="Vector_81"/>
<path d="M316.707 113.64c4.143 0 7.502-3.627 7.502-8.1 0-4.474-3.359-8.1-7.502-8.1s-7.502 3.626-7.502 8.1c0 4.473 3.359 8.1 7.502 8.1z" fill="#F2957C" class="Vector_82"/>
<path d="M316.707 112.44c3.543 0 6.416-3.089 6.416-6.9 0-3.811-2.873-6.9-6.416-6.9s-6.416 3.089-6.416 6.9c0 3.811 2.873 6.9 6.416 6.9z" fill="#5E3536" class="Vector_83"/>
<path d="M318.681 104.14c.872 0 1.579-.761 1.579-1.7s-.707-1.7-1.579-1.7-1.579.761-1.579 1.7.707 1.7 1.579 1.7z" fill="#fff" class="Vector_84"/>
</g>
<g class="arm" id="kk">
<rect y="109" width="282" height="128" fill="black"/>
<path d="M75.77 140.4l-8.785-3.8s-8.983-13.4-21.222-17.2a79.917 79.917 0 01-8.193-2.9 16.65 16.65 0 01-6.81-7.5s-5.627.5-1.481 7.8a22.565 22.565 0 006.613 6.4 67.371 67.371 0 01-10.759-3.4c-1.776-.8-12.437-5-16.385-6.9-1.875-.9-6.712-3.3-8.489.4-1.974 4.2 7.897 7.6 10.068 8.4 4.738 1.9 16.78 8.8 16.78 8.8s-8.093-2.6-9.475 2.2a4.26 4.26 0 00.296 3.1c1.184 2.4 2.862 2.5 2.862 2.5a4.809 4.809 0 00-1.579 2.521 4.86 4.86 0 00.197 2.979 5.87 5.87 0 001.962 2.366 5.76 5.76 0 002.875 1.034s-4.442 5.6 3.948 9c2.863 1.2 4.935 1.3 7.897 1.8 2.888.601 5.843.802 8.784.6a48.873 48.873 0 009.377-.9c1.876-.4 7.009 3.1 9.772 5.2a22.152 22.152 0 005.824 3.2l11.845-23.4-5.923-2.3z" fill="#F2AB8F" class="Vector_85"/>
<path d="M84.949 140.3l-8.982-4.2-14.806 31.4 9.377 5.2 14.41-32.4z" fill="#148C78" class="Vector_86"/>
<path d="M273.97 233.6l8.193-41.3s-168.984-14.9-194.55-56.5c0 0-19.938 21.6-22.307 37.7-.098 0 175.795 76.3 208.664 60.1z" fill="#F2F2F2" class="Vector_87"/>
<path d="M254.328 237.2c-36.028-1.5-144.308-43-190.403-62.3 1.875-3.4 2.171-8.1 4.639-11.6 18.556 14.8 66.034 33.9 116.867 43.9 29.908 5.9 78.965 10.9 95.35 12.8l-.691 16c-5.231 1.2-25.071 1.2-25.762 1.2z" fill="#E5E5E5" class="Vector_88"/>
</g>
</g>
<circle cx="280" cy="200" r="10" fill="red"/>
</svg>
</div>

Searching a NodeList in JavaScript

I have a NodeList of DOM elements with id's conforming to the following pattern:
prefix-number
(e.g. square-115, circle-15, triangle-2, etc.)
From a certain id, I need a reference to all the elements in the NodeList that have the same number but a different prefix.
For example, from the element with id="ellipse-25", how can I reference all the elements that are with the same number but a different prefix (e.g. polygon-25, square-25), if any?
In JavaScript, what is the most efficient way to do this? Can it be achieved without multiple or no NodeList iterations?
P.S. Here is the sample NodeList, as asked by Gangadhar Jannu, though it is not necessary, as it is more a conceptual question rather than a practical one:
<NodeList length="36">
<path class="segm-lad segm-stroke" id="psax-1" POINTER-EVENTS="auto" d="M 436.508 173.867 A 192.267 192.267 0 0 0 270 77.7333 L 270 130 A 140 140 0 0 1 391.244 200 L 436.508 173.867 Z"></path>
<path class="segm-lad segm-stroke" id="psax-2" POINTER-EVENTS="auto" d="M 270 77.7333 A 192.267 192.267 0 0 0 103.492 173.867 L 148.756 200 A 140 140 0 0 1 270 130 L 270 77.7333 Z"></path>
<path class="segm-rca segm-stroke" id="psax-3" POINTER-EVENTS="auto" d="M 103.492 173.867 A 192.267 192.267 0 0 0 103.492 366.133 L 148.756 340 A 140 140 0 0 1 148.756 200 L 103.492 173.867 Z"></path>
<path class="segm-rca segm-stroke" id="psax-4" POINTER-EVENTS="auto" d="M 103.492 366.133 A 192.267 192.267 0 0 0 270 462.267 L 270 410 A 140 140 0 0 1 148.756 340 L 103.492 366.133 Z"></path>
<path class="segm-rca-cx segm-stroke" id="psax-5" POINTER-EVENTS="auto" d="M 270 462.267 A 192.267 192.267 0 0 0 436.508 366.133 L 391.244 340 A 140 140 0 0 1 270 410 L 270 462.267 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-6" POINTER-EVENTS="auto" d="M 436.508 366.133 A 192.267 192.267 0 0 0 436.508 173.867 L 391.244 200 A 140 140 0 0 1 391.244 340 L 436.508 366.133 Z"></path>
<path class="segm-lad segm-stroke" id="psax-7" POINTER-EVENTS="auto" d="M 391.244 200 A 140 140 0 0 0 270 130 L 270 182.267 A 87.7333 87.7333 0 0 1 345.979 226.133 L 391.244 200 Z"></path>
<path class="segm-lad segm-stroke" id="psax-8" POINTER-EVENTS="auto" d="M 270 130 A 140 140 0 0 0 148.756 200 L 194.021 226.133 A 87.7333 87.7333 0 0 1 270 182.267 L 270 130 Z"></path>
<path class="segm-rca-lad segm-stroke" id="psax-9" POINTER-EVENTS="auto" d="M 148.756 200 A 140 140 0 0 0 148.756 340 L 194.021 313.867 A 87.7333 87.7333 0 0 1 194.021 226.133 L 148.756 200 Z"></path>
<path class="segm-rca segm-stroke" id="psax-10" POINTER-EVENTS="auto" d="M 148.756 340 A 140 140 0 0 0 270 410 L 270 357.733 A 87.7333 87.7333 0 0 1 194.021 313.867 L 148.756 340 Z"></path>
<path class="segm-rca-cx segm-stroke" id="psax-11" POINTER-EVENTS="auto" d="M 270 410 A 140 140 0 0 0 391.244 340 L 345.979 313.867 A 87.7333 87.7333 0 0 1 270 357.733 L 270 410 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-12" POINTER-EVENTS="auto" d="M 391.244 340 A 140 140 0 0 0 391.244 200 L 345.979 226.133 A 87.7333 87.7333 0 0 1 345.979 313.867 L 391.244 340 Z"></path>
<path class="segm-lad segm-stroke" id="psax-13" POINTER-EVENTS="auto" d="M 354.744 247.293 A 87.7333 87.7333 0 0 0 247.293 185.256 L 260.821 235.742 A 35.4667 35.4667 0 0 1 304.258 260.821 L 354.744 247.293 Z"></path>
<path class="segm-lad segm-stroke" id="psax-14" POINTER-EVENTS="auto" d="M 247.293 185.256 A 87.7333 87.7333 0 0 0 185.256 292.707 L 235.742 279.179 A 35.4667 35.4667 0 0 1 260.821 235.742 L 247.293 185.256 Z"></path>
<path class="segm-lad segm-stroke" id="psax-15" POINTER-EVENTS="auto" d="M 185.256 292.707 A 87.7333 87.7333 0 0 0 292.707 354.744 L 279.179 304.258 A 35.4667 35.4667 0 0 1 235.742 279.179 L 185.256 292.707 Z"></path>
<path class="segm-lad-cx segm-stroke" id="psax-16" POINTER-EVENTS="auto" d="M 292.707 354.744 A 87.7333 87.7333 0 0 0 354.744 247.293 L 304.258 260.821 A 35.4667 35.4667 0 0 1 279.179 304.258 L 292.707 354.744 Z"></path>
<path class="segm-lad" id="a3c-2" POINTER-EVENTS="auto" d="M 174.4 72.6 c -2.2 1.1 -3.9 -0.9 -6.1 -0.8 c -1.1 0 -2 0.6 -2.9 1 c -4.5 1.9 -9.2 3 -13.8 3.8 c -3.6 0.7 -7.3 1.1 -11 2.3 c -1.6 0.5 -3.2 0.8 -4.8 0.9 l 2.1 19.8 c 4.9 -0.7 10.4 -1.9 15.9 -3.5 c 1.8 -0.5 8.2 -2.5 9.9 -3.2 c 6.2 -2.7 8.9 -4.3 14.8 -7.1 c 1.6 -0.8 4.4 -2.4 5.8 -3.4 c 1 -0.7 6.1 -4.2 6.1 -8.2 c 0 -2.5 -9.3 -5.1 -11.6 -4.3 C 177.2 70.4 176.1 71.8 174.4 72.6 Z"></path>
<path class="segm-rca-cx" id="a3c-5" POINTER-EVENTS="auto" d="M 152.3 201 c 13.2 1.4 25.6 -2.5 39 -2.7 c 4.6 0 9.1 0.6 13.5 -0.5 c 2.6 -0.7 5.3 -1 7.7 -2.4 c 1.1 -0.6 2.1 -1.3 3.1 -2 c 3.6 -2.3 5.5 -6.5 5 -10.7 c -0.5 -3.9 -2 -7.6 -5.1 -10.5 c -2.2 -2 -4.8 -2.7 -7.7 -3.1 c -1.4 -0.1 -2.8 -0.2 -4.2 -0.2 c -1.7 0.9 -3.6 1.4 -5.5 2.2 c -0.8 0.3 -1.6 0.9 -2.4 1.2 c -3 1.1 -5.8 2.2 -8.8 3.2 c 0 -0.1 0 -0.2 0 -0.3 c -3.2 0.9 -6.3 1.9 -9.7 2 c -3.7 0.1 -7.1 0.6 -10.8 0.6 c -1.2 0 -3.5 -0.6 -4.7 -0.5 c -3.9 0.2 -2.9 1.3 -6.8 1.6 c -1.4 0.1 -6 -1.5 -7.7 -1.8 c -3.4 -0.7 -6.8 -1.3 -10.2 -2.1 l -5.7 22.1 C 138.4 199.3 145.2 200.2 152.3 201 Z"></path>
<path class="segm-rca-cx" id="a3c-11" POINTER-EVENTS="auto" d="M 83.9 177.3 c 3 0.8 13.5 5.8 15.7 6.8 c 4.5 2.1 6.4 2.9 10.3 4.6 c 8.3 3.6 11.1 4.8 17.1 7 c 1.5 0.6 3 1 4.5 1.5 l 5.7 -22.1 c -0.8 -0.2 -1.6 -0.4 -2.4 -0.6 c -5.1 -1.4 -10 -3.5 -14.5 -6.3 c -5.4 -0.5 -5.8 -3.8 -8.6 -7.7 c -1.1 -1.5 -3.3 -2.2 -3.5 -3.2 c -0.2 -0.9 1.1 -1.5 0.8 -2.4 c -1 -2.8 -3.9 -2.8 -6 -4 c -0.6 -0.4 -1.3 -1.2 -2 -1.5 c -2.2 -0.7 -4.2 -1.5 -6.4 -2.1 c -2.8 -0.7 -5.7 -0.8 -8.4 -1.5 s -4.9 -1.9 -5.8 -2.2 c -2.6 -0.6 -4.9 -1.1 -7 -1.7 l -8.9 28.4 C 70.2 173 76.5 175.3 83.9 177.3 Z"></path>
<path class="segm-lad" id="a3c-8" POINTER-EVENTS="auto" d="M 127.4 80.3 c -3.2 0.4 -6.2 -0.1 -9.4 -0.1 c -0.6 0.3 -1.3 0.5 -2 0.5 c -9.9 -0.8 -26 0 -38.9 0.9 l 2.7 19.7 c 5.4 -0.9 10.9 -0.6 16.5 -0.7 c 6.8 -0.1 13 0.4 19.4 0.2 c 4 -0.1 8.1 -0.5 12.1 -0.4 c 2.7 0.1 6.2 -0.2 10.1 -0.7 l -2.1 -19.8 C 133.1 80.1 130.2 79.9 127.4 80.3 Z"></path>
<path class="segm-lad-cx" id="a3c-16" POINTER-EVENTS="auto" d="M 23 147.9 c 1.4 0.9 2.8 1.8 4.2 2.6 c 14.1 8.1 24.7 14.6 37.1 19.9 l 8.9 -28.4 c -6.6 -1.7 -11.4 -3.7 -18 -9.6 c -0.7 -0.6 -0.9 -1.7 -0.3 -2.5 c 0.8 -1 2.1 -1.5 3.1 -2.5 c 0.9 -0.9 0.7 -2.4 -0.6 -2.9 c -6.2 -2.3 -11.9 2.2 -18 1.7 c -1.6 -0.1 -2.4 -0.4 -2.6 -0.7 H 23 V 147.9 Z"></path>
<path class="segm-lad" id="a3c-14" POINTER-EVENTS="auto" d="M 75.2 81.6 c -12.1 0.9 -24 4 -35 9.2 c -6.3 3 -13 6.4 -17.3 9 v 25.7 h 13.9 c -0.4 -0.4 0.4 -0.9 0.6 -1 c 2.8 -1.1 7.9 0.6 8.3 -3 c 0.2 -1.3 -2.3 -1.5 -2.7 -2.8 c -0.5 -2 2.4 -1.5 3.4 -2.3 c 1 -0.8 0.9 -2.7 2.3 -2.9 c 1.7 -0.3 3.7 0.4 5 -0.9 c 0.5 -0.5 0.6 -1.3 1 -1.8 c 0.5 -0.6 1.6 -0.6 2.3 -1.1 c 0.9 -0.7 3.3 -2.2 4.1 -2.8 c 2 -1.4 2.6 -1.8 5.1 -2.8 c 0.6 -0.3 1.7 -0.5 2.4 -0.5 c 3 0 5.9 -0.1 8.8 -2 c 0.8 -0.2 1.6 -0.3 2.4 -0.5 L 77 81.5 C 76.4 81.5 75.8 81.6 75.2 81.6 Z"></path>
<path class="segm-rca-lad" id="a4c-9" POINTER-EVENTS="auto" d="M 74.6 93.2 c 1.4 2.5 -2.2 4.7 -1.8 7.6 c 0.3 2.1 3 1.2 3.4 2.9 c 1.3 6.3 1.2 13 3.2 18.1 c 1.9 4.8 0 15.4 5.9 19 c 1.2 0.8 -1.2 1.2 -1.6 1.9 c -0.6 1.1 -0.5 2 -0.2 2.8 l 23.9 -3.1 c -0.2 -2.4 0.9 -5.1 -0.7 -7.3 c -0.8 -1.1 -1.8 -2.1 -2.8 -3.1 c -0.9 -0.9 0.3 -1.8 1.1 -2.7 c 0.8 -0.9 0.3 -2.2 0.5 -4.2 c 0.4 -4.2 -0.8 -8.2 -2.6 -12.1 c -0.6 -1.3 1.1 -3.2 0.3 -4.8 c -3.4 -6.5 -4.8 -13 -5.8 -20.1 H 72 C 72.7 89.7 73.6 91.4 74.6 93.2 Z"></path>
<path class="segm-rca" id="a4c-3" POINTER-EVENTS="auto" d="M 86.5 149.7 c 3.9 6.2 3.3 13 6.3 19.4 c 0 0.1 0.1 0.1 0.1 0.2 c 2.1 4.5 4.3 9.7 4.9 15.1 c 0.4 3.2 0.8 7.1 0.8 7.1 c 0.3 2.4 2.4 7.5 3 8 c 1.4 1 3.6 0.9 5 0 c 1 -0.7 1.4 -1.6 2 -3 c 0.7 -1.6 2 -5 2 -5 s 1.1 -2.8 2.2 -5.7 c 1 -5.4 0.4 -10.9 1.3 -16.3 c 1.7 -9.8 -3.2 -17.7 -6.5 -25.9 c -0.2 -0.4 -0.3 -0.9 -0.3 -1.3 l -23.9 3.1 C 84.1 146.9 85.6 148.2 86.5 149.7 Z"></path>
<path class="segm-lad" id="a4c-14" POINTER-EVENTS="auto" d="M 72.8 25.9 c -1.4 2.5 -2.4 5.1 -2.8 7.6 c -1.5 8.7 -1.8 27.8 -1.8 27.8 c 0.3 6.3 0.2 15.1 2 21.4 c 0.5 1.9 1.1 3.5 1.8 5.2 h 25.3 c 0 -0.3 -0.1 -0.5 -0.1 -0.8 c -0.4 -2.7 0.3 -5.6 0.2 -8.4 c -2.7 -7.7 -4 -14.4 -4.8 -19.3 c -1.5 -10.6 -1.8 -17.1 0 -20 c 2.6 -4.4 2 -7.4 2.3 -8.7 c 0.3 -1.6 3.3 -1.1 3.7 -1.3 c 0.6 -0.4 1.2 -0.7 1.8 -1 l -2.3 -8.8 L 72.8 25.9 Z"></path>
<path class="segm-lad" id="a4c-17" POINTER-EVENTS="auto" d="M 98 19 l 0.2 0.7 l 31.6 -7.7 c -11.4 -5.6 -24.1 -8.2 -37.2 -5.6 C 88.5 7.2 78 16.2 72.8 25.9 l 25.4 -6.2 L 98 19 Z"></path>
<path class="segm-lad-cx" id="a4c-6" POINTER-EVENTS="auto" d="M 225.1 158.2 c -0.3 -4.3 -0.8 -8.5 -1.4 -12.7 c -1.7 -11.4 -7 -21.7 -12.6 -32.2 l -29 12.9 c 0.3 0.5 0.7 1 1 1.5 c 0.6 0.8 0.5 2.4 0.8 3.7 c 0.7 4.3 4.9 6.7 6.5 10.7 c 1.9 4.9 6.5 9.2 7.9 14.5 c 0 0 1 3.9 2.4 9.4 c 0.6 2.4 1.6 4.6 3 6.6 c 1.7 2.4 3.4 4.4 5 5 c 3.5 1.5 7.2 1.5 9 1 c 3.2 -0.9 5.8 -4.6 7.4 -10.3 c 0.3 -0.9 0.4 -1.9 0.4 -2.8 C 225.4 163 225.3 160.6 225.1 158.2 Z"></path>
<path class="segm-lad-cx" id="a4c-12" POINTER-EVENTS="auto" d="M 205.9 103.4 c -8.5 -16.7 -18 -32.5 -29.8 -46.9 L 149.3 77 c 0.3 1.5 1.1 3.1 1.3 4.5 c 2.9 4.4 1.6 9.8 1.4 21.7 c -0.1 4.4 0 9.8 0.6 16.3 c 1.4 16.3 8.6 8.1 12 3 c 4 -6 4.9 -16.9 6 -16 c 4.1 3.4 -1.2 5.3 3.9 7.9 c 3.6 1.9 4.9 7.6 7.5 11.8 l 29 -12.9 C 209.3 110 207.6 106.7 205.9 103.4 Z"></path>
<path class="segm-lad-cx" id="a4c-16" POINTER-EVENTS="auto" d="M 161.2 40.6 c -4.2 -4 -6 -9.7 -10.3 -13.7 c -6.3 -5.9 -13.4 -11 -21.2 -14.8 l -31.6 7.7 l 2.3 8.8 c 2.9 -1.3 5.9 -1.2 9.2 -0.1 c 1.1 0.3 2.1 2.7 3 3.1 c 2.1 0.8 1 -3 5.6 0.6 c 3.4 2.7 6.5 4.6 8.4 6.4 c 8.3 8.2 12.6 9.4 16 19 c 4.5 12.7 9.6 13.3 7 17 c -0.5 0.7 -0.5 1.6 -0.3 2.5 L 176 56.5 C 171.5 51 166.6 45.6 161.2 40.6 Z"></path>
<path class="segm-lad" id="a2c-15" POINTER-EVENTS="auto" d="M 54.6 30 c -0.1 0.1 -0.1 0.2 -0.2 0.3 c -5 7.1 -13.9 24.4 -17.4 32.5 c -1.7 3.9 -4.2 9.5 -6.8 15.5 l 29.4 8.4 c 0.3 -0.3 1.8 -2.1 2.2 -5 c 0.5 -3.3 0 -9.3 0 -9.3 s 2.5 0 4 -2.8 c 1.5 -2.8 1.5 -7.1 2.8 -9.1 c 1.3 -2 2.8 -3 4.8 -3.5 c 2 -0.5 2.8 -2 3.3 -3.5 c 0.5 -1.5 1.8 -7.1 1.8 -7.1 s 0.5 3.8 3 3.8 c 0.1 0 0.2 0 0.3 0 V 30 H 54.6 Z"></path>
<path class="segm-lad" id="a2c-17" POINTER-EVENTS="auto" d="M 107.9 30 c -7 -8.4 -19.6 -18.3 -29 -18.3 c -10.4 0 -19.1 11.3 -24.2 18.3 h 27.2 H 107.9 Z"></path>
<path class="segm-rca" id="a2c-4" POINTER-EVENTS="auto" d="M 3.3 169.9 c -0.3 4.8 -0.8 4.5 0 11.6 c 0.8 7.1 5 23.7 9.8 33.8 c 4.1 8.6 18.8 19.6 21.4 17.3 c 9 -8 0.6 -16 -0.6 -19.5 c -1.3 -3.5 -6.3 -11.1 -7.1 -17.6 c -0.8 -6.5 0 -12.6 -0.3 -15.6 c -0.3 -3 -1 -5.8 -2 -6.8 c -1 -1 1.8 0.3 1.8 0.3 s 0.8 -6.8 1.3 -10.8 c 0.5 -4 2 -2.5 2 -2.5 c 0.4 -2 0.9 -4.6 1.4 -7.6 l -24 -7 C 5.2 153.4 3.6 162.7 3.3 169.9 Z"></path>
<path class="segm-rca" id="a2c-10" POINTER-EVENTS="auto" d="M 22.9 96.6 c -3.5 10.1 -11.3 30.7 -13.9 40.3 c -0.7 2.5 -1.4 5.4 -2 8.4 l 24 7 c 1.6 -8.3 4.1 -19.1 8.5 -25.7 c 2.3 -3.5 0.3 10.8 3 19 c 3 9 9 3 11 -5 c 4 -10 5.8 -31.8 5.8 -37.9 s 0.3 -15.9 0.3 -15.9 s 0 0 0.1 -0.1 l -29.4 -8.4 C 27.5 84.6 24.7 91.3 22.9 96.6 Z"></path>
<path class="segm-lad" id="a2c-13" POINTER-EVENTS="auto" d="M 128.7 70.1 c -3.5 -13.9 -12.3 -28.5 -18.6 -37.3 c -0.6 -0.9 -1.4 -1.9 -2.2 -2.8 H 81.8 v 20.2 c 2.3 -0.1 3.7 -1.2 3.7 -1.2 s 0.3 3.3 3.3 5.3 c 3 2 4.3 0 4.3 0 s 1.8 3.8 2.8 5 c 1 1.3 1.8 4.5 3 8.8 c 1.3 4.3 4.9 13.6 5 16.9 c 0 0.2 0 0.3 0 0.5 l 26.8 -6.9 C 130.1 75.5 129.4 72.7 128.7 70.1 Z"></path>
<path class="segm-lad" id="a2c-7" POINTER-EVENTS="auto" d="M 138.1 119.5 c -1 -10.3 -4.2 -27.4 -7.3 -40.9 l -26.8 6.9 c 0.3 6 2.5 4.8 2.5 4.8 s 1.3 10.8 1.3 18.6 c 0 7.8 -2.3 22.4 -0.8 29.7 c 0.7 3.4 2.5 8.3 4.4 13.5 l 28.6 -7.4 C 139.3 136.2 138.8 126.6 138.1 119.5 Z"></path>
<path class="segm-lad" id="a2c-1" POINTER-EVENTS="auto" d="M 141.6 160.8 c -0.7 -3.4 -1.2 -9.4 -1.7 -16.1 l -28.6 7.4 c 2.1 5.8 4.3 11.8 4.9 16.3 c 1.3 8.3 2.8 14.6 2 22.7 c -0.4 4.4 0.2 9.7 -0.8 13.5 c -0.8 3.1 -4.6 13.2 2 16 c 7 3 16.8 -10.8 19 -14 c 4 -6 3.7 -8.2 6 -17 C 146.8 180.7 143.1 168.6 141.6 160.8 Z"></path>
</NodeList>

Given the NodeList in your scenario already exists, it's hard to see how it can be done without iterations.
However, an alternative could be to create the NodeList according to the desired id, in the first place.
For example:
let getRelatedElements = id =>
document.querySelectorAll('[id$="-'+id.replace(/\D/g, '')+'"]:not(#'+id+')');
This uses a combination of an attribute-selector to select elements with the same numerical suffix and a :not selector to ignore the element with the original id.

Is there a way to merge two path elements (svg) using Javascript?

I have drawn two path lines using SVG and I've saved these elements into two variables in my javascript code: 'Line1', and 'Line2', and I need to merge the two lines into one single path element. Is there a way to do so?

Are your paths defined relatively (small letters) or absolutely (capitals)? If absolute, joining two paths is trivial, just append the values of the d attribute. If you have two paths like this:
<path id="Line1" d="M50,50
A30,30 0 0,1 35,20
L100,100"
style="stroke:#660000; fill:none;"/>
<path id="Line2" d="M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
Then this JavaScript code:
var Line1 = document.getElementById("Line1");
var Line2 = document.getElementById("Line2");
//Add paths together
Line1.setAttribute('d', Line1.getAttribute('d') + ' ' + Line2.getAttribute('d'));
//Remove unnecessary second path
Line2.parentNode.removeChild(Line2);
Will lead to you having a single path like this:
<path id="Line1" d="M50,50
A30,30 0 0,1 35,20
L100,100 M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
Here's a jsFiddle, it works in Firefox 4 (needs an HTML5 parser so you can have inline SVG).
If your paths are relative then you're going to have to add something between the appended paths so that the second one starts in the correct place.

Concatenate d attributes
Usually, you can just concatenate the pathdata d attribute of several <path> elements to get a combined path.
Unfortunately, you might encounter some »bad practices« using M or m as interchangeable commands.
Common misconceptions about M or m:
M (moveto) can be absolute or relative.
Unlike the z (closepath) command (lowercase/uppercase – doesn't matter).
Relative m commands can be used used for compound paths like e.g the inner "hole" of the letter "o" referring to the previous command's end coordinate.
In fact, every first m or M command uses absolute coordinates – since there are no preceding points.
However, the first M command can be uppercase or lowercase – doesn't matter
(blame the specs)
Exception: the lowercase m command introduces a row of implicit relative l lineto commands. (But you can/should also avoid this)
Example 1: paths starting with (unnecessary) relative m command
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p>Seperate paths</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 l 10 0 l 0 10 l -10 0z" />
<path id="path2" d="m 40 0 l 10 0 l 0 10 l -10 0z" />
<path id="path3" d="m 0 0 l 10 0 l 0 10 l -10 0z" />
</svg>
<p>Merged paths</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 l 10 0 l 0 10 l -10 0z
m 40 0 l 10 0 l 0 10 l -10 0z
m 0 0 l 10 0 l 0 10 l -10 0z
" />
</svg>
<p>Merged paths - fixed</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
M 20 0 l 10 0 l 0 10 l -10 0z
M 40 0 l 10 0 l 0 10 l -10 0z
M 0 0 l 10 0 l 0 10 l -10 0z
" />
</svg>
Fix: just replace each starting m with an absolute M
Example 2: m command for adjacent linetos
The exception are m commands followed by coordinates – used as a shorthand for succeeding l (relative linetos). (See also w3c specs.)
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p>Seperate paths</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 10 0 0 10 -10 0z" />
<path id="path2" d="m 40 0 10 0 0 10 -10 0z" />
<path id="path3" d="m 0 0 10 0 0 10 -10 0z" />
</svg>
<p>Merged paths</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 10 0 0 10 -10 0z
m 40 0 10 0 0 10 -10 0z
m 0 0 10 0 0 10 -10 0z
" />
</svg>
<p>Merged paths - fixed</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 10 0 0 10 -10 0z
M 40 0 l 10 0 0 10 -10 0z
M 0 0 l 10 0 0 10 -10 0z
" />
</svg>
Fix: insert l commands
<path d="m 20 0 10 0 0 10 -10 0z" />
equals
<path d="M 20 0 l 10 0 l 0 10 l -10 0z" />
or
<path d="M 20 0 l 10 0 0 10 -10 0z" />
Example 3: fix pseudo relative m commands via getPathData()
Currently still a draft and not natively supported by major browser.
However you can use Jarek Foksa's polyfill..
getPathData() will return an array of command objects and normalize
repeated commands like this:
[
{type: 'm', values:[20, 0] },
{type: 'l', values:[10, 0]},
{type: 'l', values:[0, 10]},
{type: 'l', values:[-10, 0]}
]
function concatSimple(){
let d1= path1.getAttribute('d')
let d2= path2.getAttribute('d')
let d3= path3.getAttribute('d')
pathConcat.setAttribute('d', d1+d2)
}
function concatPathData(){
let pathData1= fixFirstM(path1.getPathData());
let pathData2= fixFirstM(path2.getPathData());
let pathData3= fixFirstM(path3.getPathData());
let pathDataConcat = pathData1.concat(pathData2).concat(pathData3);
pathConcat.setPathData(pathDataConcat);
}
// change first m to absolute M
function fixFirstM(pathData){
pathData[0].type='M';
return pathData;
}
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p><button onclick="concatSimple()">concat d simple</button>
<button onclick="concatPathData()">concat d pathData</button>
</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 10 0 0 10 -10 0z" />
<path id="path2" d="m 40 0 10 0 0 10 -10 0z" />
<path id="path3" d="m 0 0 10 0 0 10 -10 0z" />
</svg>
<svg viewBox="0 0 50 10">
<path id="pathConcat" d="" />
</svg>
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill#1.0.4/path-data-polyfill.min.js"></script>
To fix the first relative m we can convert by changing the first command type
pathData[0].type='M';
Recommendation: only use relative m commands if they are actually relative:
if you need a shorthand for following l commands (like m 20 0 10 0 0 10 -10 0z)
for relative (subpath) starting points in compound paths – like the letter "o"
Actually merging shapes: removing overlapping shapes
If you need to merge shapes - paper.js has some powerful path operations like unite, subtract etc.
Explained here: "Merging two bezier-based shapes into one to create a new outline"