We Keep Coding

JS - Copy colour value to another elements

I'm trying to copy the color value from the <h1> element to <path> elements.
<div id='my_id'>
<h1 style='color:orange'>What What</h1>
<div id='my_element'>
<svg>
<path d="M10 10"></path>
<path d="M10 10"></path>
<path d="M10 10"></path>
</svg>
</div>
</div>
mycolor_element = document.querySelectorAll('#my_id h1')[0];
let my_value = window.getComputedStyle(mycolor_element).color;
document.querySelectorAll('#my_element svg path')[0].style.fill = my_value;
I expect that if my <h1> is orange then my <path>s are also orange.

You can use querySelector (if is just one element) with window.getComputedStyle for catch color of element then set it to the svg like:
const mycolor_element = window.getComputedStyle(document.querySelector('#my_id > h1')).color;
document.querySelectorAll('#my_element > svg > path').forEach(el => el.style.fill = mycolor_element);
h1 {
color: orange
}
<div id='my_id'>
<h1 style='color:orange'>What What</h1>
<div id='my_element'>
<svg>
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>

You can simplify this task by applying a fill:currentColor property value to your <path> elements:
path{
fill:currentColor;
}
This way all paths can inherit the fill color from the parent element's (text) color property:
let h1 = document.querySelector('#my_id h1');
let h1Color = window.getComputedStyle(h1).color;
let svgWrap = document.getElementById('svgWrap');
svgWrap.style.color = h1Color;
.colorOrange{
color:orange
}
.svgCurrentColor path{
fill:currentColor;
}
<div class='colorOrange'>
<h1>Inherit color via css</h1>
<div class='svgWrap'>
<svg class="svgCurrentColor">
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>
<div id='my_id'>
<h1 style="color:purple">Inherit color via js</h1>
<div id='svgWrap' >
<svg class="svgCurrentColor">
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
<path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
</svg>
</div>
</div>
So you might not need any javaScript at all.

document.querySelectorAll
This method is not used to select one element only.
Use the
document.querySelector
method instead.

Trouble assigning checkbox value to boolean in HTML/JavaScript

As the title says, I'm relatively new to JS, and I'm struggling to assign a checkbox value to a boolean value in my javascript code.
I have this code:
/* clock.js */
(function() {
var click = new Audio('sounds/click.mp3');
click.volume = .01;
var timermode = false;
var timer = false;
function display(a, n) {
number = [
[1, 1, 1, 0, 1, 1, 1], // 0
[0, 0, 1, 0, 0, 1, 0], // 1
[1, 0, 1, 1, 1, 0, 1], // 2
[1, 0, 1, 1, 0, 1, 1], // 3
[0, 1, 1, 1, 0, 1, 0], // 4
[1, 1, 0, 1, 0, 1, 1], // 5
[1, 1, 0, 1, 1, 1, 1], // 6
[1, 0, 1, 0, 0, 1, 0], // 7
[1, 1, 1, 1, 1, 1, 1], // 8
[1, 1, 1, 1, 0, 1, 1] // 9
]
n = number[n]
i = 0
while (i < n.length) {
crystal = document.getElementById(a + (i + 1))
if (n[i] === 0) {
switch(i+1) {
case 1:
case 4:
case 7:
crystal.style.transform = 'scale(1, 0)';
break;
case 2:
case 3:
case 5:
case 6:
crystal.style.transform = 'scale(0, 1)';
break;
}
click.play();
}
else {
crystal.style.transform = 'scale(1, 1)';
}
i++
}
}
function format(value) {
value = value + ''
if (value.length === 1) {
return '0' + value
}
return value
}
(function update() {
var timerBtn = document.getElementById("timer1");
if(timerBtn) {
timerBtn.addEventListener("click", function (evt) { evt.preventDefault(); if(!timer) {timer = document.querySelector("[name=timer1]");} else {timer=null;} console.log(timer); return false; });
}
if(!timer) {
date = new Date()
hours = format(date.getHours())
minutes = format(date.getMinutes())
seconds = format(date.getSeconds())
setTimeout(function() {
display('a', hours[0])
display('b', hours[1])
display('c', minutes[0])
display('d', minutes[1])
display('e', seconds[0])
display('f', seconds[1])
update()
}, 1000)
}
})()
})()
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
/* rtrtclock.css */
html, body, div {
height: 100%;
}
body {
margin: 0;
/*background: rgb(359, 191, 135);*/
background: rgb(60,60,60);
}
div {
display: flex;
}
svg {
flex: 1;
opacity: 1;
}
.animate {
transition: all .1s;
fill: limegreen;
}
.slots {
}
#fullscreen {
display: inline;
width: 40px;
height: 40px;
}
button {
border: 0;
padding: 0;
background: none;
margin: 0;
display: none;
}
#a1, #b1, #c1, #d1, #e1, #f1 {
transform-origin: 0px 38px;
}
#a4, #b4, #c4, #d4, #e4, #f4 {
transform-origin: 0px 52px;
}
#a7, #b7, #c7, #d7, #e7, #f7 {
transform-origin: 0px 69px;
}
#a2, #a5 {
transform-origin: 2px 0px;
}
#a3, #a6 {
transform-origin: 18px 0px;
}
#b2, #b5 {
transform-origin: 20px 0px;
}
#b3, #b6 {
transform-origin: 36px 0px;
}
#c2, #c5 {
transform-origin: 44px 0px;
}
#c3, #c6 {
transform-origin: 60px 0px;
}
#d2, #d5 {
transform-origin: 62px 0px;
}
#d3, #d6 {
transform-origin: 78px 0px;
}
#e2, #e5 {
transform-origin: 86px 0px;
}
#e3, #e6 {
transform-origin: 102px 0px;
}
#f2, #f5 {
transform-origin: 104px 0px;
}
#f3, #f6 {
transform-origin: 120px 0px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<link rel="stylesheet" href="rtrtclock.css" />
<script src="rtrtclock.js"></script>
<body>
<div>
<button onclick="toggleFullScreen(); return false" id="fullscreen">
<img src="img/fullscreen.png" alt="Fullscreen"/>
</button>
<input type="checkbox" id="timer1" name="timer1" value="Timer">
<label for="timer1">Timer Mode</label><br>
<svg id='clock' viewBox='0 36 122 36' xmlns='http://www.w3.org/2000/svg'>
<g id='seconds'>
<g>
<path id='f7' class="animate" d='M106,69l3-3h6l3,3c0,0-1,1-3,1h-6C107,70,106,69,106,69z'/>
<path id='f6' class="animate" d='M119,55l-3,2v8l3,3c0,0,1-1,1-3v-7C120,56,119,55,119,55z'/>
<path id='f5' class="animate" d='M105,55l3,2v8l-3,3c0,0-1-1-1-3v-7C104,56,105,55,105,55z'/>
<polygon id='f4' class="animate" points='109,52 115,52 118,54 115,56 109,56 106,54'/>
<path id='f3' class="animate" d='M119,40l-3,3v8l3,2c0,0,1-1,1-3v-7C120,41,119,40,119,40z'/>
<path id='f2' class="animate" d='M105,40l3,3v8l-3,2c0,0-1-1-1-3v-7C104,41,105,40,105,40z'/>
<path id='f1' class="animate" d='M106,39l3,3h6l3-3c0,0-1-1-3-1h-6C107,38,106,39,106,39z'/>
</g>
<g>
<path id='e7' class="animate" d='M88,69l3-3h6l3,3c0,0-1,1-3,1h-6C89,70,88,69,88,69z'/>
<path id='e6' class="animate" d='M101,55l-3,2v8l3,3c0,0,1-1,1-3v-7C102,56,101,55,101,55z'/>
<path id='e5' class="animate" d='M87,55l3,2v8l-3,3c0,0-1-1-1-3v-7C86,56,87,55,87,55z'/>
<polygon id='e4' class="animate" points='91,52 97,52 100,54 97,56 91,56 88,54'/>
<path id='e3' class="animate" d='M101,40l-3,3v8l3,2c0,0,1-1,1-3v-7C102,41,101,40,101,40z'/>
<path id='e2' class="animate" d='M87,40l3,3v8l-3,2c0,0-1-1-1-3v-7C86,41,87,40,87,40z'/>
<path id='e1' class="animate" d='M88,39l3,3h6l3-3c0,0-1-1-3-1h-6C89,38,88,39,88,39z'/>
</g>
</g>
<g id='minutes'>
<g>
<path id='d7' class="animate" d='M64,69l3-3h6l3,3c0,0-1,1-3,1h-6C65,70,64,69,64,69z'/>
<path id='d6' class="animate" d='M77,55l-3,2v8l3,3c0,0,1-1,1-3v-7C78,56,77,55,77,55z'/>
<path id='d5' class="animate" d='M63,55l3,2v8l-3,3c0,0-1-1-1-3v-7C62,56,63,55,63,55z'/>
<polygon id='d4' class="animate" points='67,52 73,52 76,54 73,56 67,56 64,54'/>
<path id='d3' class="animate" d='M77,40l-3,3v8l3,2c0,0,1-1,1-3v-7C78,41,77,40,77,40z'/>
<path id='d2' class="animate" d='M63,40l3,3v8l-3,2c0,0-1-1-1-3v-7C62,41,63,40,63,40z'/>
<path id='d1' class="animate" d='M64,39l3,3h6l3-3c0,0-1-1-3-1h-6C65,38,64,39,64,39z'/>
</g>
<g>
<path id='c7' class="animate" d='M46,69l3-3h6l3,3c0,0-1,1-3,1h-6C47,70,46,69,46,69z'/>
<path id='c6' class="animate" d='M59,55l-3,2v8l3,3c0,0,1-1,1-3v-7C60,56,59,55,59,55z'/>
<path id='c5' class="animate" d='M45,55l3,2v8l-3,3c0,0-1-1-1-3v-7C44,56,45,55,45,55z'/>
<polygon id='c4' class="animate" points='49,52 55,52 58,54 55,56 49,56 46,54'/>
<path id='c3' class="animate" d='M59,40l-3,3v8l3,2c0,0,1-1,1-3v-7C60,41,59,40,59,40z'/>
<path id='c2' class="animate" d='M45,40l3,3v8l-3,2c0,0-1-1-1-3v-7C44,41,45,40,45,40z'/>
<path id='c1' class="animate" d='M46,39l3,3h6l3-3c0,0-1-1-3-1h-6C47,38,46,39,46,39z'/>
</g>
</g>
<g id='hours'>
<g>
<path id='b7' class="animate" d='M22,69l3-3h6l3,3c0,0-1,1-3,1h-6C23,70,22,69,22,69z'/>
<path id='b6' class="animate" d='M35,55l-3,2v8l3,3c0,0,1-1,1-3v-7C36,56,35,55,35,55z'/>
<path id='b5' class="animate" d='M21,55l3,2v8l-3,3c0,0-1-1-1-3v-7C20,56,21,55,21,55z'/>
<polygon id='b4' class="animate" points='25,52 31,52 34,54 31,56 25,56 22,54'/>
<path id='b3' class="animate" d='M35,40l-3,3v8l3,2c0,0,1-1,1-3v-7C36,41,35,40,35,40z'/>
<path id='b2' class="animate" d='M21,40l3,3v8l-3,2c0,0-1-1-1-3v-7C20,41,21,40,21,40z'/>
<path id='b1' class="animate" d='M22,39l3,3h6l3-3c0,0-1-1-3-1h-6C23,38,22,39,22,39z'/>
</g>
<g>
<path id='a7' class="animate" d='M4,69l3-3h6l3,3c0,0-1,1-3,1h-6C5,70,4,69,4,69z'/>
<path id='a6' class="animate" d='M17,55l-3,2v8l3,3c0,0,1-1,1-3v-7C18,56,17,55,17,55z'/>
<path id='a5' class="animate" d='M3,55l3,2v8l-3,3c0,0-1-1-1-3v-7C2,56,3,55,3,55z'/>
<polygon id='a4' class="animate" points='7,52 13,52 16,54 13,56 7,56 4,54'/>
<path id='a3' class="animate" d='M17,40l-3,3v8l3,2c0,0,1-1,1-3v-7C18,41,17,40,17,40z'/>
<path id='a2' class="animate" d='M3,40l3,3v8l-3,2c0,0-1-1-1-3v-7C2,41,3,40,3,40z'/>
<path id='a1' class="animate" d='M4,39l3,3h6l3-3c0,0-1-1-3-1h-6C5,38,4,39,4,39z'/>
</g>
</g>
<g id='dots'>
<g>
<circle class="animate" cx='82' cy='54' r='2'/>
</g>
<g>
<circle class="animate" cx='40' cy='50' r='2'/>
<circle class="animate" cx='40' cy='58' r='2'/>
</g>
</g>
<!--<g id='secondslots'>
<g>
<path id='f7' class="slots" d='M106,69l3-3h6l3,3c0,0-1,1-3,1h-6C107,70,106,69,106,69z'/>
<path id='f6' class="slots" d='M119,55l-3,2v8l3,3c0,0,1-1,1-3v-7C120,56,119,55,119,55z'/>
<path id='f5' class="slots" d='M105,55l3,2v8l-3,3c0,0-1-1-1-3v-7C104,56,105,55,105,55z'/>
<polygon id='f4' class="slots" points='109,52 115,52 118,54 115,56 109,56 106,54'/>
<path id='f3' class="slots" d='M119,40l-3,3v8l3,2c0,0,1-1,1-3v-7C120,41,119,40,119,40z'/>
<path id='f2' class="slots" d='M105,40l3,3v8l-3,2c0,0-1-1-1-3v-7C104,41,105,40,105,40z'/>
<path id='f1' class="slots" d='M106,39l3,3h6l3-3c0,0-1-1-3-1h-6C107,38,106,39,106,39z'/>
</g>
<g>
<path id='e7' class="slots" d='M88,69l3-3h6l3,3c0,0-1,1-3,1h-6C89,70,88,69,88,69z'/>
<path id='e6' class="slots" d='M101,55l-3,2v8l3,3c0,0,1-1,1-3v-7C102,56,101,55,101,55z'/>
<path id='e5' class="slots" d='M87,55l3,2v8l-3,3c0,0-1-1-1-3v-7C86,56,87,55,87,55z'/>
<polygon id='e4' class="slots" points='91,52 97,52 100,54 97,56 91,56 88,54'/>
<path id='e3' class="slots" d='M101,40l-3,3v8l3,2c0,0,1-1,1-3v-7C102,41,101,40,101,40z'/>
<path id='e2' class="slots" d='M87,40l3,3v8l-3,2c0,0-1-1-1-3v-7C86,41,87,40,87,40z'/>
<path id='e1' class="slots" d='M88,39l3,3h6l3-3c0,0-1-1-3-1h-6C89,38,88,39,88,39z'/>
</g>
</g>
<g id='minuteslots'>
<g>
<path id='d7' class="slots" d='M64,69l3-3h6l3,3c0,0-1,1-3,1h-6C65,70,64,69,64,69z'/>
<path id='d6' class="slots" d='M77,55l-3,2v8l3,3c0,0,1-1,1-3v-7C78,56,77,55,77,55z'/>
<path id='d5' class="slots" d='M63,55l3,2v8l-3,3c0,0-1-1-1-3v-7C62,56,63,55,63,55z'/>
<polygon id='d4' class="slots" points='67,52 73,52 76,54 73,56 67,56 64,54'/>
<path id='d3' class="slots" d='M77,40l-3,3v8l3,2c0,0,1-1,1-3v-7C78,41,77,40,77,40z'/>
<path id='d2' class="slots" d='M63,40l3,3v8l-3,2c0,0-1-1-1-3v-7C62,41,63,40,63,40z'/>
<path id='d1' class="slots" d='M64,39l3,3h6l3-3c0,0-1-1-3-1h-6C65,38,64,39,64,39z'/>
</g>
<g>
<path id='c7' class="slots" d='M46,69l3-3h6l3,3c0,0-1,1-3,1h-6C47,70,46,69,46,69z'/>
<path id='c6' class="slots" d='M59,55l-3,2v8l3,3c0,0,1-1,1-3v-7C60,56,59,55,59,55z'/>
<path id='c5' class="slots" d='M45,55l3,2v8l-3,3c0,0-1-1-1-3v-7C44,56,45,55,45,55z'/>
<polygon id='c4' class="slots" points='49,52 55,52 58,54 55,56 49,56 46,54'/>
<path id='c3' class="slots" d='M59,40l-3,3v8l3,2c0,0,1-1,1-3v-7C60,41,59,40,59,40z'/>
<path id='c2' class="slots" d='M45,40l3,3v8l-3,2c0,0-1-1-1-3v-7C44,41,45,40,45,40z'/>
<path id='c1' class="slots" d='M46,39l3,3h6l3-3c0,0-1-1-3-1h-6C47,38,46,39,46,39z'/>
</g>
</g>
<g id='hourslots'>
<g>
<path id='b7' class="slots" d='M22,69l3-3h6l3,3c0,0-1,1-3,1h-6C23,70,22,69,22,69z'/>
<path id='b6' class="slots" d='M35,55l-3,2v8l3,3c0,0,1-1,1-3v-7C36,56,35,55,35,55z'/>
<path id='b5' class="slots" d='M21,55l3,2v8l-3,3c0,0-1-1-1-3v-7C20,56,21,55,21,55z'/>
<polygon id='b4' class="slots" points='25,52 31,52 34,54 31,56 25,56 22,54'/>
<path id='b3' class="slots" d='M35,40l-3,3v8l3,2c0,0,1-1,1-3v-7C36,41,35,40,35,40z'/>
<path id='b2' class="slots" d='M21,40l3,3v8l-3,2c0,0-1-1-1-3v-7C20,41,21,40,21,40z'/>
<path id='b1' class="slots" d='M22,39l3,3h6l3-3c0,0-1-1-3-1h-6C23,38,22,39,22,39z'/>
</g>
<g>
<path id='a7' class="slots" d='M4,69l3-3h6l3,3c0,0-1,1-3,1h-6C5,70,4,69,4,69z'/>
<path id='a6' class="slots" d='M17,55l-3,2v8l3,3c0,0,1-1,1-3v-7C18,56,17,55,17,55z'/>
<path id='a5' class="slots" d='M3,55l3,2v8l-3,3c0,0-1-1-1-3v-7C2,56,3,55,3,55z'/>
<polygon id='a4' class="slots" points='7,52 13,52 16,54 13,56 7,56 4,54'/>
<path id='a3' class="slots" d='M17,40l-3,3v8l3,2c0,0,1-1,1-3v-7C18,41,17,40,17,40z'/>
<path id='a2' class="slots" d='M3,40l3,3v8l-3,2c0,0-1-1-1-3v-7C2,41,3,40,3,40z'/>
<path id='a1' class="slots" d='M4,39l3,3h6l3-3c0,0-1-1-3-1h-6C5,38,4,39,4,39z'/>
</g>
</g>-->
</svg>
</div>
</body>
</html>
And my goal is to make the checkbox convert it from a clock to a timer. With the current code, the checkbox doesn't even seem to check when I click it, although I know it's receiving some sort of input due to the console. What am I missing?

Don't call Event.preventDefault() in the click event listener; it prevents the checkbox from being checked thus causing the checked property to always be false:
/* clock.js */
(function() {
var click = new Audio('sounds/click.mp3');
click.volume = .01;
var timermode = false;
var timer = false;
function display(a, n) {
number = [
[1, 1, 1, 0, 1, 1, 1], // 0
[0, 0, 1, 0, 0, 1, 0], // 1
[1, 0, 1, 1, 1, 0, 1], // 2
[1, 0, 1, 1, 0, 1, 1], // 3
[0, 1, 1, 1, 0, 1, 0], // 4
[1, 1, 0, 1, 0, 1, 1], // 5
[1, 1, 0, 1, 1, 1, 1], // 6
[1, 0, 1, 0, 0, 1, 0], // 7
[1, 1, 1, 1, 1, 1, 1], // 8
[1, 1, 1, 1, 0, 1, 1] // 9
]
n = number[n]
i = 0
while (i < n.length) {
crystal = document.getElementById(a + (i + 1))
if (n[i] === 0) {
switch (i + 1) {
case 1:
case 4:
case 7:
crystal.style.transform = 'scale(1, 0)';
break;
case 2:
case 3:
case 5:
case 6:
crystal.style.transform = 'scale(0, 1)';
break;
}
click.play();
} else {
crystal.style.transform = 'scale(1, 1)';
}
i++
}
}
function format(value) {
value = value + ''
if (value.length === 1) {
return '0' + value
}
return value
}
(function update() {
var timerBtn = document.getElementById("timer1");
if (timerBtn) {
timerBtn.addEventListener("click", function(evt) {
if (!timer) {
timer = document.querySelector("[name=timer1]");
} else {
timer = null;
}
console.log(timer);
return false;
});
}
if (!timer) {
date = new Date()
hours = format(date.getHours())
minutes = format(date.getMinutes())
seconds = format(date.getSeconds())
setTimeout(function() {
display('a', hours[0])
display('b', hours[1])
display('c', minutes[0])
display('d', minutes[1])
display('e', seconds[0])
display('f', seconds[1])
update()
}, 1000)
}
})()
})()
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
/* rtrtclock.css */
html,
body,
div {
height: 100%;
}
body {
margin: 0;
/*background: rgb(359, 191, 135);*/
background: rgb(60, 60, 60);
}
div {
display: flex;
}
svg {
flex: 1;
opacity: 1;
}
.animate {
transition: all .1s;
fill: limegreen;
}
.slots {}
#fullscreen {
display: inline;
width: 40px;
height: 40px;
}
button {
border: 0;
padding: 0;
background: none;
margin: 0;
display: none;
}
#a1,
#b1,
#c1,
#d1,
#e1,
#f1 {
transform-origin: 0px 38px;
}
#a4,
#b4,
#c4,
#d4,
#e4,
#f4 {
transform-origin: 0px 52px;
}
#a7,
#b7,
#c7,
#d7,
#e7,
#f7 {
transform-origin: 0px 69px;
}
#a2,
#a5 {
transform-origin: 2px 0px;
}
#a3,
#a6 {
transform-origin: 18px 0px;
}
#b2,
#b5 {
transform-origin: 20px 0px;
}
#b3,
#b6 {
transform-origin: 36px 0px;
}
#c2,
#c5 {
transform-origin: 44px 0px;
}
#c3,
#c6 {
transform-origin: 60px 0px;
}
#d2,
#d5 {
transform-origin: 62px 0px;
}
#d3,
#d6 {
transform-origin: 78px 0px;
}
#e2,
#e5 {
transform-origin: 86px 0px;
}
#e3,
#e6 {
transform-origin: 102px 0px;
}
#f2,
#f5 {
transform-origin: 104px 0px;
}
#f3,
#f6 {
transform-origin: 120px 0px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<link rel="stylesheet" href="rtrtclock.css" />
<script src="rtrtclock.js"></script>
<body>
<div>
<button onclick="toggleFullScreen(); return false" id="fullscreen">
<img src="img/fullscreen.png" alt="Fullscreen"/>
</button>
<input type="checkbox" id="timer1" name="timer1" value="Timer">
<label for="timer1">Timer Mode</label><br>
<svg id='clock' viewBox='0 36 122 36' xmlns='http://www.w3.org/2000/svg'>
<g id='seconds'>
<g>
<path id='f7' class="animate" d='M106,69l3-3h6l3,3c0,0-1,1-3,1h-6C107,70,106,69,106,69z'/>
<path id='f6' class="animate" d='M119,55l-3,2v8l3,3c0,0,1-1,1-3v-7C120,56,119,55,119,55z'/>
<path id='f5' class="animate" d='M105,55l3,2v8l-3,3c0,0-1-1-1-3v-7C104,56,105,55,105,55z'/>
<polygon id='f4' class="animate" points='109,52 115,52 118,54 115,56 109,56 106,54'/>
<path id='f3' class="animate" d='M119,40l-3,3v8l3,2c0,0,1-1,1-3v-7C120,41,119,40,119,40z'/>
<path id='f2' class="animate" d='M105,40l3,3v8l-3,2c0,0-1-1-1-3v-7C104,41,105,40,105,40z'/>
<path id='f1' class="animate" d='M106,39l3,3h6l3-3c0,0-1-1-3-1h-6C107,38,106,39,106,39z'/>
</g>
<g>
<path id='e7' class="animate" d='M88,69l3-3h6l3,3c0,0-1,1-3,1h-6C89,70,88,69,88,69z'/>
<path id='e6' class="animate" d='M101,55l-3,2v8l3,3c0,0,1-1,1-3v-7C102,56,101,55,101,55z'/>
<path id='e5' class="animate" d='M87,55l3,2v8l-3,3c0,0-1-1-1-3v-7C86,56,87,55,87,55z'/>
<polygon id='e4' class="animate" points='91,52 97,52 100,54 97,56 91,56 88,54'/>
<path id='e3' class="animate" d='M101,40l-3,3v8l3,2c0,0,1-1,1-3v-7C102,41,101,40,101,40z'/>
<path id='e2' class="animate" d='M87,40l3,3v8l-3,2c0,0-1-1-1-3v-7C86,41,87,40,87,40z'/>
<path id='e1' class="animate" d='M88,39l3,3h6l3-3c0,0-1-1-3-1h-6C89,38,88,39,88,39z'/>
</g>
</g>
<g id='minutes'>
<g>
<path id='d7' class="animate" d='M64,69l3-3h6l3,3c0,0-1,1-3,1h-6C65,70,64,69,64,69z'/>
<path id='d6' class="animate" d='M77,55l-3,2v8l3,3c0,0,1-1,1-3v-7C78,56,77,55,77,55z'/>
<path id='d5' class="animate" d='M63,55l3,2v8l-3,3c0,0-1-1-1-3v-7C62,56,63,55,63,55z'/>
<polygon id='d4' class="animate" points='67,52 73,52 76,54 73,56 67,56 64,54'/>
<path id='d3' class="animate" d='M77,40l-3,3v8l3,2c0,0,1-1,1-3v-7C78,41,77,40,77,40z'/>
<path id='d2' class="animate" d='M63,40l3,3v8l-3,2c0,0-1-1-1-3v-7C62,41,63,40,63,40z'/>
<path id='d1' class="animate" d='M64,39l3,3h6l3-3c0,0-1-1-3-1h-6C65,38,64,39,64,39z'/>
</g>
<g>
<path id='c7' class="animate" d='M46,69l3-3h6l3,3c0,0-1,1-3,1h-6C47,70,46,69,46,69z'/>
<path id='c6' class="animate" d='M59,55l-3,2v8l3,3c0,0,1-1,1-3v-7C60,56,59,55,59,55z'/>
<path id='c5' class="animate" d='M45,55l3,2v8l-3,3c0,0-1-1-1-3v-7C44,56,45,55,45,55z'/>
<polygon id='c4' class="animate" points='49,52 55,52 58,54 55,56 49,56 46,54'/>
<path id='c3' class="animate" d='M59,40l-3,3v8l3,2c0,0,1-1,1-3v-7C60,41,59,40,59,40z'/>
<path id='c2' class="animate" d='M45,40l3,3v8l-3,2c0,0-1-1-1-3v-7C44,41,45,40,45,40z'/>
<path id='c1' class="animate" d='M46,39l3,3h6l3-3c0,0-1-1-3-1h-6C47,38,46,39,46,39z'/>
</g>
</g>
<g id='hours'>
<g>
<path id='b7' class="animate" d='M22,69l3-3h6l3,3c0,0-1,1-3,1h-6C23,70,22,69,22,69z'/>
<path id='b6' class="animate" d='M35,55l-3,2v8l3,3c0,0,1-1,1-3v-7C36,56,35,55,35,55z'/>
<path id='b5' class="animate" d='M21,55l3,2v8l-3,3c0,0-1-1-1-3v-7C20,56,21,55,21,55z'/>
<polygon id='b4' class="animate" points='25,52 31,52 34,54 31,56 25,56 22,54'/>
<path id='b3' class="animate" d='M35,40l-3,3v8l3,2c0,0,1-1,1-3v-7C36,41,35,40,35,40z'/>
<path id='b2' class="animate" d='M21,40l3,3v8l-3,2c0,0-1-1-1-3v-7C20,41,21,40,21,40z'/>
<path id='b1' class="animate" d='M22,39l3,3h6l3-3c0,0-1-1-3-1h-6C23,38,22,39,22,39z'/>
</g>
<g>
<path id='a7' class="animate" d='M4,69l3-3h6l3,3c0,0-1,1-3,1h-6C5,70,4,69,4,69z'/>
<path id='a6' class="animate" d='M17,55l-3,2v8l3,3c0,0,1-1,1-3v-7C18,56,17,55,17,55z'/>
<path id='a5' class="animate" d='M3,55l3,2v8l-3,3c0,0-1-1-1-3v-7C2,56,3,55,3,55z'/>
<polygon id='a4' class="animate" points='7,52 13,52 16,54 13,56 7,56 4,54'/>
<path id='a3' class="animate" d='M17,40l-3,3v8l3,2c0,0,1-1,1-3v-7C18,41,17,40,17,40z'/>
<path id='a2' class="animate" d='M3,40l3,3v8l-3,2c0,0-1-1-1-3v-7C2,41,3,40,3,40z'/>
<path id='a1' class="animate" d='M4,39l3,3h6l3-3c0,0-1-1-3-1h-6C5,38,4,39,4,39z'/>
</g>
</g>
<g id='dots'>
<g>
<circle class="animate" cx='82' cy='54' r='2'/>
</g>
<g>
<circle class="animate" cx='40' cy='50' r='2'/>
<circle class="animate" cx='40' cy='58' r='2'/>
</g>
</g>
<!--<g id='secondslots'>
<g>
<path id='f7' class="slots" d='M106,69l3-3h6l3,3c0,0-1,1-3,1h-6C107,70,106,69,106,69z'/>
<path id='f6' class="slots" d='M119,55l-3,2v8l3,3c0,0,1-1,1-3v-7C120,56,119,55,119,55z'/>
<path id='f5' class="slots" d='M105,55l3,2v8l-3,3c0,0-1-1-1-3v-7C104,56,105,55,105,55z'/>
<polygon id='f4' class="slots" points='109,52 115,52 118,54 115,56 109,56 106,54'/>
<path id='f3' class="slots" d='M119,40l-3,3v8l3,2c0,0,1-1,1-3v-7C120,41,119,40,119,40z'/>
<path id='f2' class="slots" d='M105,40l3,3v8l-3,2c0,0-1-1-1-3v-7C104,41,105,40,105,40z'/>
<path id='f1' class="slots" d='M106,39l3,3h6l3-3c0,0-1-1-3-1h-6C107,38,106,39,106,39z'/>
</g>
<g>
<path id='e7' class="slots" d='M88,69l3-3h6l3,3c0,0-1,1-3,1h-6C89,70,88,69,88,69z'/>
<path id='e6' class="slots" d='M101,55l-3,2v8l3,3c0,0,1-1,1-3v-7C102,56,101,55,101,55z'/>
<path id='e5' class="slots" d='M87,55l3,2v8l-3,3c0,0-1-1-1-3v-7C86,56,87,55,87,55z'/>
<polygon id='e4' class="slots" points='91,52 97,52 100,54 97,56 91,56 88,54'/>
<path id='e3' class="slots" d='M101,40l-3,3v8l3,2c0,0,1-1,1-3v-7C102,41,101,40,101,40z'/>
<path id='e2' class="slots" d='M87,40l3,3v8l-3,2c0,0-1-1-1-3v-7C86,41,87,40,87,40z'/>
<path id='e1' class="slots" d='M88,39l3,3h6l3-3c0,0-1-1-3-1h-6C89,38,88,39,88,39z'/>
</g>
</g>
<g id='minuteslots'>
<g>
<path id='d7' class="slots" d='M64,69l3-3h6l3,3c0,0-1,1-3,1h-6C65,70,64,69,64,69z'/>
<path id='d6' class="slots" d='M77,55l-3,2v8l3,3c0,0,1-1,1-3v-7C78,56,77,55,77,55z'/>
<path id='d5' class="slots" d='M63,55l3,2v8l-3,3c0,0-1-1-1-3v-7C62,56,63,55,63,55z'/>
<polygon id='d4' class="slots" points='67,52 73,52 76,54 73,56 67,56 64,54'/>
<path id='d3' class="slots" d='M77,40l-3,3v8l3,2c0,0,1-1,1-3v-7C78,41,77,40,77,40z'/>
<path id='d2' class="slots" d='M63,40l3,3v8l-3,2c0,0-1-1-1-3v-7C62,41,63,40,63,40z'/>
<path id='d1' class="slots" d='M64,39l3,3h6l3-3c0,0-1-1-3-1h-6C65,38,64,39,64,39z'/>
</g>
<g>
<path id='c7' class="slots" d='M46,69l3-3h6l3,3c0,0-1,1-3,1h-6C47,70,46,69,46,69z'/>
<path id='c6' class="slots" d='M59,55l-3,2v8l3,3c0,0,1-1,1-3v-7C60,56,59,55,59,55z'/>
<path id='c5' class="slots" d='M45,55l3,2v8l-3,3c0,0-1-1-1-3v-7C44,56,45,55,45,55z'/>
<polygon id='c4' class="slots" points='49,52 55,52 58,54 55,56 49,56 46,54'/>
<path id='c3' class="slots" d='M59,40l-3,3v8l3,2c0,0,1-1,1-3v-7C60,41,59,40,59,40z'/>
<path id='c2' class="slots" d='M45,40l3,3v8l-3,2c0,0-1-1-1-3v-7C44,41,45,40,45,40z'/>
<path id='c1' class="slots" d='M46,39l3,3h6l3-3c0,0-1-1-3-1h-6C47,38,46,39,46,39z'/>
</g>
</g>
<g id='hourslots'>
<g>
<path id='b7' class="slots" d='M22,69l3-3h6l3,3c0,0-1,1-3,1h-6C23,70,22,69,22,69z'/>
<path id='b6' class="slots" d='M35,55l-3,2v8l3,3c0,0,1-1,1-3v-7C36,56,35,55,35,55z'/>
<path id='b5' class="slots" d='M21,55l3,2v8l-3,3c0,0-1-1-1-3v-7C20,56,21,55,21,55z'/>
<polygon id='b4' class="slots" points='25,52 31,52 34,54 31,56 25,56 22,54'/>
<path id='b3' class="slots" d='M35,40l-3,3v8l3,2c0,0,1-1,1-3v-7C36,41,35,40,35,40z'/>
<path id='b2' class="slots" d='M21,40l3,3v8l-3,2c0,0-1-1-1-3v-7C20,41,21,40,21,40z'/>
<path id='b1' class="slots" d='M22,39l3,3h6l3-3c0,0-1-1-3-1h-6C23,38,22,39,22,39z'/>
</g>
<g>
<path id='a7' class="slots" d='M4,69l3-3h6l3,3c0,0-1,1-3,1h-6C5,70,4,69,4,69z'/>
<path id='a6' class="slots" d='M17,55l-3,2v8l3,3c0,0,1-1,1-3v-7C18,56,17,55,17,55z'/>
<path id='a5' class="slots" d='M3,55l3,2v8l-3,3c0,0-1-1-1-3v-7C2,56,3,55,3,55z'/>
<polygon id='a4' class="slots" points='7,52 13,52 16,54 13,56 7,56 4,54'/>
<path id='a3' class="slots" d='M17,40l-3,3v8l3,2c0,0,1-1,1-3v-7C18,41,17,40,17,40z'/>
<path id='a2' class="slots" d='M3,40l3,3v8l-3,2c0,0-1-1-1-3v-7C2,41,3,40,3,40z'/>
<path id='a1' class="slots" d='M4,39l3,3h6l3-3c0,0-1-1-3-1h-6C5,38,4,39,4,39z'/>
</g>
</g>-->
</svg>
</div>
</body>
</html>

SVG-graphics: cloudy border

Is it possible to draw cloudy border for rect and polygon using svg-graphics? I tried using patterns in stroke, but it does not work.
I need border like this
Thank you!

You can fake it by using a dashed stroke with an SVG filter applied. Note this will likely slow down your page, so use the filter with caution.
<svg viewBox="0 0 300 500" width="600" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="outline-sobel" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.3" result="BLUR" />
<feConvolveMatrix in="BLUR" result="TOP-SOBEL" kernelMatrix="
1 2 1
0 0 0
-1 -2 -1"/>
<feConvolveMatrix in="BLUR" result="BOTTOM-SOBEL" kernelMatrix="
-1 -2 -1
0 0 0
1 2 1"/>
<feConvolveMatrix in="BLUR" result="LEFT-SOBEL" kernelMatrix="
1 0 -1
2 0 -2
1 0 -1"/>
<feConvolveMatrix in="BLUR" result="RIGHT-SOBEL" kernelMatrix="
-1 0 1
-2 0 2
-1 0 1"/>
<feComposite in="LEFT-SOBEL" in2="RIGHT-SOBEL" result="X" />
<feComposite in="TOP-SOBEL" in2="BOTTOM-SOBEL" result="Y" />
<feComposite in="X" in2="Y" />
</filter>
<style>
.cb1{
fill: none;
stroke: tomato;
stroke-width: 10;
}
.cb2{
stroke-dasharray: 2 10;
}
.cb3{
stroke-linecap: round;
stroke-linejoin: round;
}
.cb4{
fill: tomato;
}
.cb5
{
stroke-dasharray: 1 10 .9 10 1.1 10 .8 10 .7 10;
stroke-dashoffset: 4;
filter: url(#outline-sobel);
}
.cb6 {
stroke-width: 5;
stroke-dasharray: 0 5 0.1 5 0 5 ;
}
</style>
</defs>
<rect x="10" y="10" width="80" height="30" class="cb1" />
<rect x="10" y="60" width="80" height="30" class="cb1 cb2" />
<rect x="110" y="10" width="80" height="30" class="cb1 cb2 cb3" />
<rect x="110" y="60" width="80" height="30" class="cb1 cb2 cb3 cb4" />
<rect x="210" y="10" width="80" height="30" class="cb1 cb2 cb3 cb4 cb5" />
<path d="
M210 90
h80
a 10 10 0 0 0 -12 -20
a 18 18 0 0 0 -41 4
a 13 13 0 0 0 -26 14
z"
class="cb1 cb2 cb3 cb4 cb5 cb6" />
</svg>
Play with the values on the stroke-dasharray to get different effects, I've deliberately given a slightly random look.

Get HTML after Javascript execution/modification with WKWebView and Regex in Swift 4+

I have been trying to retrieve some data from a website which seems like javascript performs a modification before/after load
I want to find a specific DIV into HTML, and it just doesn't appear to be there the way I'm doing this, it loads only a part of the HTML but don't the one I need to.
Here is my code:
let url = URL(string: "https://www.spaceweatherlive.com")
let task = URLSession.shared.dataTask(with: url!) { (data, response, error) in
if error != nil{
print(error)
}else{
// let htmlcontent = NSString(data: data!, encoding: String.Encoding.utf8.rawValue)
let htmlcontent = String(data: data!, encoding: String.Encoding(rawValue: String.Encoding.utf8.rawValue))
// let regex = try? NSRegularExpression(pattern: "<h4 class=\"text-center\">Kp[0-9]</h4>", options: .caseInsensitive)
let substring = "<h4 class=\"text-center\">Kp[0-9]"
let matched = self.matches(for: substring, in: htmlcontent!)
print(matched)
if htmlcontent!.contains(substring){
print("Substring FOUND!!")
}else{
// print("Nope, printing whole html:")
// print(htmlcontent)
}
// print(htmlcontent)
}
}
task.resume()
Function to search for substring
func matches(for regex: String, in text: String) -> [String] {
do {
let regex = try NSRegularExpression(pattern: regex)
let results = regex.matches(in: text,
range: NSRange(text.startIndex..., in: text))
return results.map {
String(text[Range($0.range, in: text)!])
}
} catch let error {
print("invalid regex: \(error.localizedDescription)")
return []
}
}
Thanks! any help or advice to try is very appreciated
This is the DIV which I need to retrieve (KP[0-9] value)

We can maybe start with a simple expression and capture the SVG highchart part of the indicator that we have in the question:
(<div id="Kp_gauge".+?<\/div><\/div><\/div><\/div>)
Then, the title part can be written or attached to it with another similar expression.
Here, we are saying that start from:
<div id="Kp_gauge"
collect everything (.+?) to closest:
<\/div><\/div><\/div><\/div>
We can do the same for the title, if we wish, or we can just on the top of that write or add Kp-index and the problem may be solved.
The h3` title is always going to be:
<h3 class="card-header text-center">Kp-index <span class="text-primary" data-toggle="tooltip" title="" data-original-title="The Kp-index is a geomagnetic activity index based on data from magnetometers around the world. The gauge below shows the most recently observed Kp-value from the Planetary K-index of the NOAA SWPC and can be used to make a rough estimate of the current global geomagnetic conditions."><svg class="svg-inline--fa fa-info-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg><!-- <i class="fas fa-info-circle" aria-hidden="true"></i> --></span></h3>
which can be simply added.
DEMO
const regex = /(<div id="Kp_gauge".+?<\/div><\/div><\/div><\/div>)/gm;
const str = `<div id="Kp_gauge" style="height: 170px; overflow: hidden;" data-highcharts-chart="6"><div id="highcharts-c5v532c-27" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 448px; height: 170px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg version="1.1" class="highcharts-root" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="448" height="170" viewBox="0 0 448 170"><desc>Created with Highcharts 7.1.1</desc><defs><clipPath id="highcharts-c5v532c-28-"><rect x="0" y="0" width="428" height="145" fill="none"></rect></clipPath></defs><rect fill="none" class="highcharts-background" x="0" y="0" width="448" height="170" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="10" y="10" width="428" height="145"></rect><g class="highcharts-pane-group" data-z-index="0"><path fill="#eee" d="M 108 140.5 A 116 116 0 0 1 339.9999420000048 140.38400001933334 L 293.5999652000029 140.4304000116 A 69.6 69.6 0 0 0 154.4 140.5 Z" class="highcharts-pane " stroke="#cccccc" stroke-width="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid" data-z-index="1"><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 108 140.5" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 114.99565598883464 100.82566337422242" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 135.13884459819855 65.93663727636142" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 165.99999999999997 40.041053161005124" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 203.8568113906361 26.262300650583867" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 244.14318860936393 26.262300650583867" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 282 40.04105316100511" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 312.86115540180145 65.93663727636144" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 333.00434401116536 100.82566337422242" opacity="1"></path><path fill="none" data-z-index="1" class="highcharts-grid-line" d="M 224 140.5 L 340 140.5" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" data-z-index="1" x="10" y="10" width="428" height="145"></rect><g class="highcharts-axis highcharts-yaxis" data-z-index="2"><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 108 140.5 L 118 140.5" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 114.99565598883464 100.82566337422242 L 124.39258219669372 104.24586480747911" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 135.13884459819855 65.93663727636142 L 142.79928902938835 72.36451337322681" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 165.99999999999997 40.041053161005124 L 170.99999999999997 48.701307198849506" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 203.8568113906361 26.262300650583867 L 205.59329316730538 36.11037818070595" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 244.14318860936393 26.262300650583867 L 242.40670683269462 36.11037818070595" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 282 40.04105316100511 L 277 48.70130719884949" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 312.86115540180145 65.93663727636144 L 305.2007109706117 72.36451337322683" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 333.00434401116536 100.82566337422242 L 323.60741780330625 104.24586480747911" opacity="1"></path><path fill="none" class="highcharts-tick" stroke="#ccd6eb" stroke-width="2" d="M 340 140.5 L 330 140.5" opacity="1"></path><path fill="none" class="highcharts-axis-line" data-z-index="7" d="M 108 140.5 A 116 116 0 0 1 339.9999420000048 140.38400001933334 M 224 140.5 A 0 0 0 0 0 224 140.5 "></path></g><g data-z-index="2" class="highcharts-data-labels highcharts-series-0 highcharts-solidgauge-series highcharts-tracker" transform="translate(10,10) scale(1 1)"><g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 highcharts-tracker" data-z-index="1" transform="translate(181,84)"></g></g><g class="highcharts-series-group" data-z-index="3"><g data-z-index="0.1" class="highcharts-series highcharts-series-0 highcharts-solidgauge-series highcharts-tracker" transform="translate(10,10) scale(1 1)" clip-path="url(#highcharts-c5v532c-28-)"><path fill="rgb(85,191,59)" d="M 98 130.5 A 116 116 0 0 1 155.89957006990173 30.09910338080769 L 179.13974204194105 70.25946202848462 A 69.6 69.6 0 0 0 144.4 130.5 Z" sweep-flag="0" stroke-linecap="round" stroke-linejoin="round" class="highcharts-point highcharts-color-0"></path></g><g data-z-index="0.1" class="highcharts-markers highcharts-series-0 highcharts-solidgauge-series " transform="translate(10,10) scale(1 1)" clip-path="none"></g></g><text x="10" class="highcharts-title" data-z-index="4" style="color:#333333;font-size:18px;fill:#333333;" y="24"></text><text x="224" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color:#666666;fill:#666666;" y="24"></text><g class="highcharts-legend" data-z-index="7"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="8" height="8" visibility="hidden"></rect><g data-z-index="1"><g></g></g></g><g class="highcharts-axis-labels highcharts-yaxis-labels" data-z-index="7"><text x="98" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="144.49999999999997" opacity="1">0</text><text x="105.59872978097555" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="101.40546194096572" opacity="1">1</text><text x="127.47840016700879" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="63.50876117949602" opacity="1">2</text><text x="160.99999999999997" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="35.38079912316074" opacity="1">3</text><text x="202.1203296139668" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="20.414223120461784" opacity="1">4</text><text x="245.87967038603324" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="20.414223120461784" opacity="1">5</text><text x="287" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="35.38079912316073" opacity="1">6</text><text x="320.5215998329912" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="63.508761179496034" opacity="1">7</text><text x="342.40127021902447" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="101.40546194096574" opacity="1">8</text><text x="350" style="color:#666666;cursor:default;font-size:11px;fill:#666666;" text-anchor="middle" transform="translate(0,0)" y="144.5" opacity="1">9</text></g></svg><div class="highcharts-loading highcharts-loading-hidden" style="position: absolute; background-color: rgb(255, 255, 255); opacity: 0; text-align: center; z-index: 10; left: 10px; top: 10px; width: 428px; height: 145px; display: none;"><span class="highcharts-loading-inner" style="font-weight: bold; position: relative; top: 45%;">Loading…</span></div><div class="highcharts-data-labels highcharts-series-0 highcharts-solidgauge-series highcharts-tracker" style="position: absolute; left: 10px; top: 10px; opacity: 1; visibility: inherit;"><div class="highcharts-label highcharts-data-label highcharts-data-label-color-0 highcharts-tracker" style="position: absolute; left: 181px; top: 84px; opacity: 1;"><span data-z-index="1" style="position: absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; font-size: 11px; white-space: nowrap; font-weight: bold; color: rgb(0, 0, 0); margin-left: 0px; margin-top: 0px; left: 5px; top: 5px;"><h4 class="text-center">Kp3</h4><div class="text-center" style="font-size:10px;color:silver">18-21 UTC</div></span></div></div></div></div>`;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
Edit
For getting the Kp we can simply use an expression similar to:
<h[1-6] class="text-center">(Kp[0-9]+)<\/h[1-6]>
const regex = /<h[1-6] class="text-center">(Kp[0-9]+)<\/h[1-6]>/gm;
const str = `<span data-z-index="1" style="position: absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; font-size: 11px; white-space: nowrap; font-weight: bold; color: rgb(0, 0, 0); margin-left: 0px; margin-top: 0px; left: 5px; top: 5px;"><h4 class="text-center">Kp3</h4><div class="text-center" style="font-size:10px;color:silver">18-21 UTC</div></span>`;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
DEMO

How to place svg inside the div

I try to create multiple svg tag inside of the div, I want all the svg exist only inside of the parent div tag, if the coordinate of the svg is larger than the size of the div, I want the div become a scroll bar to expand the space. I also want to place the svg in the position I want. I am not sure how to make it happen? Thank you very much.
$(document).ready(function() {
$('#testbtm').click(function() {
var svgElement = $('<svg class="hexagon" class="ui-widget-content">\
<text fill="black" x=75 y=75 style="text-anchor: middle">1</text>\
<path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue"></svg>');
svgElement.children('text').text(1);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
svgElement.click(hexagonClick);
}); //end click
$('#testbtm2').click(function() {
$('.hexagon').each(function() {
var svgElement = $('<svg class="hexagon" class="ui-widget- content">\
<text fill="black" x=75 y=75 style="text-anchor: middle">1</text>\
<path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue"></svg>');
svgElement.children('text').text(1);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
svgElement.click(hexagonClick);
});
}); // end click
$('.hexagon').click(hexagonClick); // end click
}); // end ready
#display {
height: 500px;
width: 500px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="display">
</div>
<button id="testbtm">test</button>
<button id="testbtm2">test2</button>

You can use overflow: auto;
$(document).ready(function() {
$('#testbtm').click(function() {
var svgElement = $('<svg class="hexagon" class="ui-widget-content">\
<text fill="black" x=75 y=75 style="text-anchor: middle">1</text>\
<path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue"></svg>');
svgElement.children('text').text(1);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
svgElement.click(hexagonClick);
}); //end click
$('#testbtm2').click(function() {
$('.hexagon').each(function() {
var svgElement = $('<svg class="hexagon" class="ui-widget- content">\
<text fill="black" x=75 y=75 style="text-anchor: middle">1</text>\
<path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue"></svg>');
svgElement.children('text').text(1);
svgElement.attr("class", "hexagon ui-widget-content");
$("#display").append(svgElement);
svgElement.click(hexagonClick);
});
}); // end click
$('.hexagon').click(hexagonClick); // end click
}); // end ready
#display {
height: 500px;
width: 500px;
border: 1px solid black;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="display">
</div>
<button id="testbtm">test</button>
<button id="testbtm2">test2</button>