How to place svg inside the div - javascript

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>

Related

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>

"Render" an SVG polygon with a pattern fill

I'd like to be able to use svg patterns to fill a polygon, then export the result of the pattern fill as individual svg paths/polygons etc.
So I'd like to start with this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="300" height="130">
<defs>
<pattern id="ozmkp" patternUnits="userSpaceOnUse" width="20" height="20">
<path d="M 10, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
</pattern>
</defs>
<rect width="100" height="100" fill="#ff0066" x="20" y="20" style="
fill: url('#ozmkp');
"></rect>
</svg>
Then end up with this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="300" height="130">
<path d="M 20, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 20, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 20, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 20, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 20, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
</svg>
Is there a library that does this, or an extensible way to do this with more complex patterns?

How to stop SVG text hover from stopping gradient fill

I want the svg background fill gradient to remain filled even hovering over text but when you hover over the text clears the fill.
I have tried moving the text around and even moving the "flag" class but no luck. Many thanks.
I have included the codepen is here: https://codepen.io/daneli84/pen/OJVZmeJ
HTML
<svg viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(5,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(20,0,0);stop-opacity:0.1" />
</linearGradient>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox"
id="filter-1">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" class="flag-blur" in="shadowOffsetOuter1" result="shadowBlurOuter1">
</feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 9 2 0" in="shadowBlurOuter1"
type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<g id="pod">
<polygon stroke="#000000" stroke-width="1" points="5,-9 -5,-9 -10,0 -5,9 5,9 10,0" />
</g>
</defs>
<g class="pod-wrap">
<g transform="translate(50, 41)" class="flag">
<use xlink:href="#pod" class="h1 flag">
</use>
<text class="h1" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="5"
fill="blue">CNI</text>
</g>
<use xlink:href="#pod" transform="translate(35, 50)" class="flag h2" />
<use xlink:href="#pod" transform="translate(65, 50)" class=" h3" />
<use xlink:href="#pod" transform="translate(50, 59)" class=" h4" />
</g>
</svg>
CSS
/* grid styling */
use {
cursor: pointer;
fill:transparent;
}
g {cursor: pointer;}
filter: url(#filter-1);
fill: url(#grad2);
}
/* other styling */
svg {
width: 700px;
flex: 1;
}
body {
di
splay: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
height: 100vh;
font-weight: 700;
font-family: sans-serif;
}
JS
//
var flagBlur = document.querySelector('.flag-blur');
var flags = document.querySelectorAll('.flag');
//
function startPage() {
flags.forEach(flag => {
flag.onmouseover = function() {
flag.classList.add('filter-class')
TweenMax.fromTo(flagBlur, 1, {
attr: {
}
}, {
attr: {
stdDeviation: 1.2
},
ease: Power1.easeInOut
});
}
flag.onmouseleave = function() {
flag.classList.remove('filter-class')
}
})
}
startPage();

You can use the pointer-event attribute on your text element
Other options are: bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none, but in this case, just use none
<text
class="h1"
alignment-baseline="middle"
text-anchor="middle"
font-family="Verdana"
font-size="5"
fill="blue"
pointer-events="none"
>CNI</text>
The pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.
more reading: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events

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

I want to place boxes of text and images on the corners of the path. How to do that?

I have defined a path over which a red dot moves on scrolling up and down. I want to place boxes of text and images on the corners of the path. So how do I go about doing that?
function positionTheDot() {
// What percentage down the page are we?
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Get path length
var path = document.getElementById("theMotionPath");
var pathLen = path.getTotalLength();
// Get the position of a point at <scrollPercentage> along the path.
var pt = path.getPointAtLength(scrollPercentage * pathLen);
// Position the red dot at this point
var dot = document.getElementById("dot");
dot.setAttribute("transform", "translate(" + pt.x + "," + pt.y + ")");
};
// Update dot position when we get a scroll event.
window.addEventListener("scroll", positionTheDot);
// Set the initial position of the dot.
positionTheDot();
.verylong {
height: 2000px;
}
svg {
width: 1000px;
height: 1000px;
align: center;
}
body {
background-color: #333333;
}
h1 {
color: red;
font-size: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<svg viewBox="0 0 820 820" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10 10 H 600 V 500 H 10 L 10 10" stroke="#d3d3d3" stroke-width="5" fill="none" id="theMotionPath"/>
<!--<circle cx="10" cy="110" r="3" fill="#000"/> <!--The bottom grey dot-->
<!-- <circle cx="110" cy="10" r="3" fill="#000"/> <!--The top grey dot-->
<!-- Red circle which will be moved along the motion path. -->
<circle cx="0" cy="0" r="5" fill="red" id="dot"/>
</svg>
<div class="verylong">
</div>
This is what I tried to do by adding div, I had added cx and cy in div but that didn't help.
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<svg viewBox="0 0 120 120">
<svg viewBox="0 0 820 820" xmlns="http://www.w3.org/2000/svg"
version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10 10 H 600 V 500 H 10 L 10 10" stroke="#d3d3d3" stroke-
width="5" fill="none" id="theMotionPath"/>
<!-- Red circle which will be moved along the motion path. -->
<circle cx="0" cy="0" r="5" fill="red" id="dot"/>
<div>This text is the actual content of the box.</div>
</svg>

Categories