Change style based on Javascript changes - javascript

Ive got a page working as inteded to stream footage from a PTZ camera live on the website, the user can control the camera subject to been front of the cue - all good so far.
When a user connects the the page their status is displayed at the top - IDLE (if noone else is connected) or WAITING if someone else is connected - once connected the status changes to CONTROL> I would like to update the style of the text or cell based on this status so that the text (or cell) is red, amber or green depending on the status.
<html>
<head>
<meta http-equiv="refresh" content="900; url=http://www.starcross-fcc.co.uk/">
<meta charset="UTF-8">
<meta name="robots" content="index, follow" />
<meta name="keywords" content="STARCROSS, Starcross, starcross, www.starcross-fcc.co.uk, sfcc, SFCC, S.F.C.C., starcross-fishing-and-cruising-club, starcross_fishing_and_cruising_club, starcross fishing and cruising club, starcross devon, starcross devon england, starcross england, starcross devon uk, starcross devon england uk, starcross england uk, starcross uk, fishing and cruising, fishing, fishing in devon, fishing club, fishing club in devon, fishing club in devon uk, sea fishing, sea fishing club, sea fishing club in devon, sea fishing club devon uk, fishing clubs, fishing clubs in devon, fishing clubs in devon uk, fishing clubs devon, fishing clubs devon uk, cruising, cruising club, cruising devon, cruising club devon uk, sailing, sailing club, sailing devon, sailing devon uk, sailing club in devon, sailing club in devon uk, cruising in devon, cruising club in devon uk, sailing in devon, sailing club in devon, sailing in devon uk, webcam, starcross webcam, starcross fishing and cruising club webcam, starcross fishing and cruising club interactive webcam, brunel tower interactive webcam, sfcc interactive webcam, sfcc brunel tower interactive webcam, live webcam, interactive webcam, interactive webcam devon, interactive webcam england, interactive webcam uk, webcam devon, webcam england, BRUNELTOWER, bruneltower, Bruneltower, brunel_tower, Brunel_Tower, brunel_atmospheric_railway, BRUNEL, GWR, GWR_atmospheric_railway">
<meta name="description" content="Starcross Fishing and Cruising Club Website, Welcome, Social Events, Quick Links, Cruising Latest Information, Fishing Latest Information, Pictures, Membership, Facilities, Education, Club History, Notice Board, Website Links. webcam, starcross webcam, starcross fishing and cruising club webcam, starcross fishing and cruising club interactive webcam, brunel tower interactive webcam, sfcc interactive webcam, sfcc brunel tower interactive webcam, live webcam, interactive webcam, interactive webcam devon, interactive webcam england, interactive webcam uk, webcam devon, webcam england, BRUNELTOWER, bruneltower, Bruneltower, brunel_tower, Brunel_Tower, brunel_atmospheric_railway, BRUNEL, GWR, GWR_atmospheric_railway">
<link rel="shortcut icon" href="http://www.starcross-fcc.co.uk/favicon.ico">
<title>SFCC Brunel Tower Live Interactive Webcam</title>
<script type="text/javascript">
function _log(msg) {
if (document.location.search.toLowerCase().indexOf("log=true") >= 0) {
document.getElementById("error-log").innerText += msg + "\n\n";
}
}
document.addEventListener("DOMContentLoaded", function () {
status_p = document.getElementById("status-p");
queue_pos_p = document.getElementById("queue-pos");
time_left_p = document.getElementById("time-left");
join_queue_btn = document.getElementById("join-queue");
leave_queue_btn = document.getElementById("leave-queue");
controls_svg = document.getElementById("controls-svg");
preset_btn = document.getElementById("preset-btn");
preset_select = document.getElementById("preset-select");
stream = document.getElementById("stream");
cmdlist_btn = document.getElementById("cmdlist-btn");
cmdlist_input = document.getElementById("cmdlist-input");
auto_joined = false;
on_state_changed("LOADING");
try {
connect();
}
catch (ex) {
_log(ex);
}
});
function connect() {
try{
ws = new WebSocket("wss://starcross-fcc.co.uk/ptz/");
ws.onerror = function (ex) {
_log("WS error\n" + ex + "\n\n");
};
}
catch (ex) {
_log(ex);
}
ws.onopen = console.log;
on_state_changed("CONNECTING");
ws.onclose = function (ev) {
on_state_changed("TIMED OUT");
setTimeout(connect, 3000);
};
ws.onmessage = on_message;
queue_pos = -1;
}
function on_message(event) {
var data = JSON.parse(event.data);
console.log(data);
var type = data.type;
if (type == "state-changed") {
on_state_changed(data.state);
}
else if (type == "queue-pos-changed") {
queue_pos = data.queue_pos;
queue_pos_p.style.display = (state == "WAITING" && queue_pos != -1) ? "" : "none";
queue_pos_p.innerText = "Queue Pos: " + queue_pos;
}
else if (type == "countdown-update") {
on_countdown_update_recv(data.time_left);
}
else if (type == "settings") {
control_time = data.control_time;
}
else if (type == "countdown-update") {
control_time = data.control_time;
}
}
function on_state_changed(newState) {
state = newState;
status_p.innerText = "Status: " + state;
join_queue_btn.style.display = state == "IDLE" ? "" : "none";
leave_queue_btn.style.display = (state == "WAITING" || state == "CONTROL") ? "" : "none";
leave_queue_btn.innerText = state == "WAITING" ? "Leave Queue" : "Release Control";
queue_pos_p.style.display = (state == "WAITING" && queue_pos != -1) ? "" : "none";
var inControl = state == "CONTROL";
controls_svg.classList = inControl ? "" : "disabled";
cmdlist_btn.disabled = cmdlist_input.disabled = preset_btn.disabled = preset_select.disabled = !inControl;
time_left_p.style.display = (state == "WAITING" || state == "CONTROL") ? "" : "none";
if (!auto_joined && state == "IDLE") {
auto_joined = true;
join_queue();
}
}
function on_countdown_update_recv(timeLeft) {
endTime = new Date().getTime() + (timeLeft*1000);
update_countdown();
}
function update_countdown() {
if (state != "CONTROL" && state != "WAITING") { return; }
var timeLeft = Math.round((endTime - new Date().getTime())/1000);
if (state == "WAITING") {
timeLeft += (queue_pos - 1) * control_time;
}
time_left_p.innerText = "Time left: " + timeLeft + "s";
setTimeout(update_countdown, ((endTime - new Date().getTime()) % 1000));
}
function clear_dropdown() {
while (dropdown.lastChild) {
dropdown.removeChild(dropdown.lastChild);
}
}
function send_json(json) {
ws.send(JSON.stringify(json));
}
function join_queue() {
if (state != "IDLE") { return; }
send_json({ "type": "join-queue" });
}
function leave_queue() {
send_json({ "type": "leave-queue" });
}
function on_run_clicked() {
if (state != "CONTROL") { return; }
send_cmdlist(dropdown.value);
}
function send_move(dir, time, speed) {
if (speed == undefined) { speed = 50; }
if (time == undefined) { time = 0.12; }
if (state != "CONTROL") { return; }
send_json({
type: "control",
action: "move",
direction: dir,
speed: speed,
duration: time
});
}
function send_zoom(direction) {
if (state != "CONTROL") { return; }
send_json({
type: "control",
action: "zoom",
direction: direction
});
}
function send_goto() {
if (state != "CONTROL") { return; }
v = parseInt(preset_select.value);
send_json({
type: "control",
action: "goto",
preset: v
});
}
function send_cmdlist(name) {
if (state != "CONTROL") { return; }
name = cmdlist_input.value;
send_json({
type: "cmdlist",
name: name
});
}
</script>
<style>
#media (max-width: 399px) {
#controls-blocker {
background: #FFBF00;
opacity: 0.75;
width: 300px;
height: 300px;
position: relative;
top: -300px;
}
td.control {
background: #FFBF00;
cursor: pointer;
}
svg.disabled {
opacity: 0.5;
}
svg a {
cursor: pointer;
}
g.clickables rect, g.clickables path {
opacity: 0;
cursor: pointer;
}
svg.disabled g.clickables rect, svg.disabled g.clickables path {
cursor: not-allowed;
opacity: 0;
}
.viewing_window {
width:100%;
font-family: verdana;
}
.table1 {
border: 1px;
width: 350px !important;
background-color: lightgrey;
}
th, td {
padding: 15px;
}
}
/* here the rules for windows over 400px */
#media (min-width: 400px){
#controls-blocker {
background: #FFBF00;
opacity: 0.75;
width: 300px;
height: 300px;
position: relative;
top: -300px;
}
td.control {
background: #FFBF00;
cursor: pointer;
}
svg.disabled {
opacity: 0.5;
}
svg a {
cursor: pointer;
}
g.clickables rect, g.clickables path {
opacity: 0;
cursor: pointer;
}
svg.disabled g.clickables rect, svg.disabled g.clickables path {
cursor: not-allowed;
opacity: 0;
}
.viewing_window {
width:100%;
font-family: verdana;
}
.table1 {
border: 1px;
width: 760px !important;
background-color: lightgrey;
}
th, td {
padding: 15px;
}
}
</style>
<div align="center" class="viewing_window">
<table id="table1" class="table1" border="1px">
<tr>
<td> </td>
<td width=15%>
<button id="join-queue" onclick="join_queue()" style="display: none">Join Queue</button>
<button id="leave-queue" onclick="leave_queue()" style="display: none">Leave Queue</button>
</td>
<td width=25%>
<div id="status-p">Status: Connecting...</div>
</td>
<td width=25%>
<p id="queue-pos" style="display: none;">Queue Pos:</p>
</td>
<td width=25%>
<p id="time-left" style="display: none;">Time Left:</p>
</td>
</tr>
<tr>
<td align="center" colspan="5">
<p id="error-log"></p>
<img alt="Live Image" decoding="auto" src="https://starcross-fcc.co.uk/stream/?action=stream" style="width:700px" id="stream" />
<br />
</td>
</tr>
<tr>
<td colspan="5" align="center">
<svg id="controls-svg" version="1.1" style="width: 300px; height: 300px;">
<g>
<!-- N Arrow--><path fill="#1f567c" d="m 154,150 7,-94.48415 h 11.5 L 150,23.02117 127.5,55.51585 H 139 L 146,150 Z" />
<!-- E Arrow--><path fill="#1f567c" d="m 150,154.00026 94.48415,7 v 11.5 l 32.49468,-22.5 -32.49468,-22.5 v 11.5 l -94.48415,7 z" />
<!-- S Arrow--><path fill="#1f567c" d="m 146,150 -7,94.48415 h -11.5 l 22.5,32.49468 22.5,-32.49468 H 161 L 154,150 Z" />
<!-- W Arrow--><path fill="#1f567c" d="m 150,146.00026 -94.48415,-7 v -11.5 l -32.49468,22.5 32.49468,22.5 v -11.5 l 94.48415,-7 z" />
<!-- NE Arrow--><path fill="#AB7C94" d="m 169.51696,134.36332 49.13174,-42.35365 5.56753,5.56751 4.83874,-26.62455 -26.6247,4.83872 5.56752,5.5675 -42.35389,49.13144 z" />
<!-- SE Arrow--><path fill="#AB7C94" d="m 165.637,169.50992 42.35365,49.13174 -5.56751,5.56753 26.62455,4.83874 -4.83872,-26.6247 -5.5675,5.56752 -49.13144,-42.35389 z" />
<!-- SW Arrow--><path fill="#AB7C94" d="M 133.39832,130.48994 91.04467,81.3582 l 5.56751,-5.56753 -26.62455,-4.83874 4.83872,26.6247 5.5675,-5.56752 49.13144,42.35389 z" />
<!-- NW Arrow--><path fill="#AB7C94" d="m 130.34675,170.51995 -49.13174,42.35365 -5.56753,-5.56751 -4.83874,26.62455 26.6247,-4.83872 -5.56752,-5.5675 42.35389,-49.13144 z" />
</g>
<g id="g4687">
<!-- Zoom + circle--><circle cx="272.05188" cy="27.805429" r="22.366377" style="opacity:1;fill:none;stroke:#1f567c;stroke-width:6.61417341;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<!-- Zoom + handle --><rect height="8.2292299" id="rect4652" style="opacity:1;fill:#1f567c;fill-opacity:1;stroke:none;stroke-width:5.88930559;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="rotate(135)" width="28.229383" x="-148.761" y="-215.62125" />
<!-- Zoom + --><path fill="#1f567c" d="m 269.05188,11.805429 h 6 v 13 l 13,-0.015 v 6.015 h -13 v 13 h -6 v -13 h -13 v -6 h 13 z" />
</g>
<g id="g4692">
<!-- Zoom - Circle--><circle cx="271.59006" cy="256.56717" id="circle4674" r="22.366377" style="opacity:0.95;fill:none;fill-opacity:0.19607843;stroke:#AB7C94;stroke-width:6.61417341;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<!-- Zoom - Handle--><rect height="8.2292299" id="rect4676" style="opacity:1;fill:#AB7C94;fill-opacity:1;stroke:none;stroke-width:5.88930559;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="rotate(135)" width="28.229383" x="13.324527" y="-377.05368" />
<!-- Zoom - --><rect height="6" id="rect4682" style="opacity:0.95;fill:#AB7C94;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" width="28" x="257.59006" y="253.56717"/>
</g>
<g class="clickables">
<rect onclick="send_zoom('out')" width="71.705521" height="71.705521" rx="5.22438" ry="7.0581698" x="227.5" y="226.60715" />
<rect onclick="send_zoom('in')" width="72.5" height="73.39286" rx="5.22438" ry="7.0581698" x="228.29448" y="4.7412109e-006" />
<path onclick="send_move('up')" d="m 113.75,4.4759006 h 72.5 c 2.0775,0 4.56191,2.9814599 3.75,6.4761984 L 165.24081,117.52378 c -0.80076,3.44673 -0.84951,6.47619 -1.9051,6.47619 h -26.67142 c -1.05543,0 -1.09608,-2.99392 -1.9051,-6.47619 L 110,10.952099 c -0.81191,-3.4947385 1.6725,-6.4761984 3.75,-6.4761984 z" />
<path onclick="send_move('right')" d="m 295.5241,113.75016 v 72.5 c 0,2.0775 -2.98146,4.56191 -6.4762,3.75 L 182.47622,165.24097 c -3.44673,-0.80076 -6.47619,-0.84951 -6.47619,-1.9051 v -26.67142 c 0,-1.05543 2.99392,-1.09608 6.47619,-1.9051 L 289.0479,110.00016 c 3.49474,-0.81191 6.4762,1.6725 6.4762,3.75 z" />
<path onclick="send_move('down')" d="m 186.25,295.524 h -72.5 c -2.0775,0 -4.56191,-2.98146 -3.75,-6.4762 l 24.75919,-106.57168 c 0.80076,-3.44673 0.84951,-6.47619 1.9051,-6.47619 h 26.67142 c 1.05543,0 1.09608,2.99392 1.9051,6.47619 L 190,289.0478 c 0.81191,3.49474 -1.6725,6.4762 -3.75,6.4762 z" />
<path onclick="send_move('left')" d="m 4.4759,186.25016 v -72.5 c 0,-2.0775 2.98146,-4.56191 6.4762,-3.75 l 106.57168,24.75919 c 3.44673,0.80076 6.47619,0.84951 6.47619,1.9051 v 26.67142 c 0,1.05543 -2.99392,1.09608 -6.47619,1.9051 L 10.9521,190.00016 c -3.49474,0.81191 -6.4762,-1.6725 -6.4762,-3.75 z" />
<path onclick="send_move('up|right')" d="M 221.471,78.5289 290,78.5299 c 5.90788,9e-5 7.60217,10.13319 0,12.481 l -98.87934,30.53736 c -3.15831,0.97539 -13.70018,-9.32805 -12.66856,-12.66847 L 208.989,9.9999 c 1.73793,-5.6275 11.67334,-5.36021 11.732,0 z" />
<path onclick="send_move('down|right')" d="m 221.47132,221.46386 -0.001,68.529 c -9e-5,5.90788 -10.13319,7.60217 -12.481,0 l -30.53736,-98.87934 c -0.97539,-3.15831 9.32805,-13.70018 12.66847,-12.66856 l 98.87989,30.5369 c 5.6275,1.73793 5.36021,11.67334 0,11.732 z" />
<path onclick="send_move('up|left')" d="m 84.38562,8.23793 c 19.36802,2.69738 36.19774,100.64821 36.19774,100.64821 1.0763,3.12536 -9.32805,13.70018 -12.66847,12.66856 0,0 -94.82648,-13.97223 -98.87989,-30.5369 C 4.98159,74.45313 65.0176,5.54055 84.38562,8.23793 Z" />
<path onclick="send_move('down|left')" d="m 8.09484,219.53255 c 2.69738,-19.36802 100.64821,-36.19774 100.64821,-36.19774 3.12536,-1.0763 13.70018,9.32805 12.66856,12.66847 0,0 -13.97223,94.82648 -30.5369,98.87989 C 82.592375,296.90987 61.223063,282.91422 42.261506,265.9909 23.29995,249.06757 6.74615,229.21656 8.09484,219.53255 Z" />
</g>
</svg>
<div>
<button disabled id="preset-btn" onclick="send_goto()">Go to</button>
<select disabled id="preset-select">
<option value="1">Starcross Pier</option>
<option value="2">Starcross FCC Car Park</option>
<option value="3">Ashes Quay</option>
<option value="4">Brunel Landing Pontoon</option>
<option value="5">Exe Estuary to the South</option>
<option value="6">Exmouth Dockside</option>
<option value="7">River Exe Cafe</option>
<option value="8">Ashes Quay Moorings</option>
<option value="9">Cockwood Moorings</option>
<option value="10">SailExmouth.com - Exewake</option>
<option value="11">Lower Starcross Pool</option>
<option value="12">Upper Starcross Pool</option>
<option value="13">Top Starcross Pool</option>
</select>
</div>
<br>
<div id="presets">
Member Code:
<input type="text" size="6" id="cmdlist-input"/>
<button disabled id="cmdlist-btn" onclick="send_cmdlist()">Go</button>
</div>
</td>
</tr>
<tr>
<td colspan="5">
<a class="weatherwidget-io" href="https://forecast7.com/en/50d62n3d41/exmouth/" data-label_1="EXMOUTH" data-label_2="WEATHER" data-theme="original" >EXMOUTH WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script></td></tr> </table>
</body>
</html>
Have got basic functions and layout working but struggling to work out how to change the style of the cell bases on this fuction

Related

function to make some divs disappear

i have a 3divs inside of a container and when i click div number 1 i want the others to disappear
but it works only when i click the "rock" div
The parent div is called "choices" in the JS file
i am trying to loop over the child divs to keep the clicked one and hide the others
choices.addEventListener("click", (e) => {
let currentTag = e.target.tagName;
let current;
if (e.target.className !== "choices") {
// to make sure the user click on the choices only
switch (
currentTag // to get the div element even if the user clicked the svg or the path
) {
case "DIV":
current = e.target;
console.log(current);
break;
case "svg":
current = e.target.parentElement;
console.log(current);
break;
case "path":
current = e.target.parentElement.parentElement;
console.log(current);
break;
default:
break;
}
current.setAttribute("chosen", "true");
for (i = 0; i < choicesList.length; i++) {
choicesList[i].hasAttribute("chosen") ?
"" :
choices.removeChild(choicesList[i]);
}
}
});
<div class="choices" vassel="true">
<!-- Scissors -->
<div class="scissors">
<svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path
class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"
/>
</svg>
</div>
<!-- rock -->
<div class="rock">
<svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path
class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"
/>
</svg>
</div>
<!-- Paper -->
<div class="paper">
<svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path
class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"
/>
</svg>
</div>
</div>
and here is the link for codepen : https://codepen.io/omarmahdy/pen/JjpEMaV

There is a problem with your child selector. My suggestion is to use querySelectorAll() and add a second class to all options. I created a working fork here: https://codepen.io/foorschtbar/pen/OJQWZJJ
const choicesList = document.querySelectorAll(".choice");
<!-- Scissors -->
<div class="scissors choice">
[...]
</div>
<!-- Rock -->
<div class="rock choice">
[...]
</div>
<!-- Paper -->
<div class="paper choice">
[...]
</div>
(i hope i understand your problem right and is now fixed)

IMHO you should apply a CSS-class with classList.add('class-name) to all the child div elements of choices:
document.querySelectorAll('.choices div').forEach(el => el.classList.add('class-name');
Then you remove this class for the clicked element after wards. That CSS-Class only needs to contain: display: none;
var choices = document.querySelector('.choices');
choices.addEventListener('click', e => {
var scissors = document.querySelector('.scissors'),
rock = document.querySelector('.rock'),
paper = document.querySelector('.paper');
document.querySelectorAll('.choices div').forEach(el => el.classList.add('d-none'));
if (e.target.classList.contains('scissors')) {
scissors.classList.remove('d-none');
}
if (e.target.classList.contains('rock')) {
rock.classList.remove('d-none');
}
if (e.target.classList.contains('paper')) {
paper.classList.remove('d-none');
}
});
.d-none {
display: none;
}
<div class="choices" vassel="true">
<!-- Scissors -->
<div class="scissors">
<svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path
class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"
/>
</svg>
</div>
<!-- rock -->
<div class="rock selection">
<svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path
class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"
/>
</svg>
</div>
<!-- Paper -->
<div class="paper selection">
<svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path
class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"
/>
</svg>
</div>
</div>

You need to manipulate the styling of each div that you needs to be removed. I have written a code to add display:none; property to the div those you need to remove.
const rockDiv = document.querySelectorAll(".rock");
const paperDiv = document.querySelectorAll(".paper");
const scissorsDiv = document.querySelectorAll(".scissors");
for (let i = 0; i < rockDiv.length; i++) {
rockDiv[i].addEventListener("click", ()=>{
paperDiv[i].style.display = "none";
scissorsDiv[i].style.display = "none";
});
}
for (let i = 0; i < paperDiv.length; i++) {
paperDiv[i].addEventListener("click", ()=>{
rockDiv[i].style.display = "none";
scissorsDiv[i].style.display = "none";
});
}
for (let i = 0; i < scissorsDiv.length; i++) {
scissorsDiv[i].addEventListener("click", ()=>{
paperDiv[i].style.display = "none";
rockDiv[i].style.display = "none";
});
}

Details commented in example, refer here for the CSS
// Score counters
let T = 0;
let W = 0;
let L = 0;
// Reference the <form>
const RPS = document.forms.RPS;
// Register <form> to the click event
RPS.onclick = pick;
// Event handler passes Event Object
function pick(e) {
// Reference ALL form controls
const IO = this.elements;
// The tag the user clicked
const clk = e.target;
// If the tag clicked is an <input>..
if (clk.matches('input')) {
// Disable <label>s
IO.choices.disabled = true;
// Add .picked class to <form>
this.classList.add('picked');
// Get a random number 0-2
let r = Math.floor(Math.floor(Math.random() * 6) / 2);
/* Pass:
** All form controls,
** Random number,
** and #id of clicked <label>
** to outcome(IO, r, id)
*/
switch (clk.id) {
case 'R':
console.log('Rock');
outcome(IO, r, 'R');
break;
case 'P':
console.log('Paper');
outcome(IO, r, 'P');
break;
case 'S':
console.log('Scissors', );
outcome(IO, r, 'S');
break;
default:
break;
}
}
}
/*
** Pass all form controls, random
** number, and #id of clicked
*/
function outcome(node, vs, user) {
// 'R'ock, 'P'aper, 'S'cissors
let rpsA = ['R', 'P', 'S'];
// Index of user's pick
const sv = rpsA.indexOf(user);
/*
** Clone the `<label>` that
** corresponds to opponent's index
*//*
** Add .vs class to opponent
*//*
** Add opponent to #choices
*/
const opponent = document.querySelector(`[
for='${rpsA[vs]}'
]`).cloneNode(true);
opponent.classList.add('vs');
node.choices.append(opponent);
/**
** One line nested ternary to
** resolve win, lose, or tie
*/
let result = vs === sv ? 'tied' :
vs === sv + 1 ? 'lost' :
vs === 0 && sv === 2 ? 'lost' : 'win';
// Increment score
switch (result) {
case 'tied':
T++;
break;
case 'win':
W++;
break;
case 'lost':
L++;
break;
default:
break;
}
// Display score
node.w.value = W;
node.l.value = L;
node.t.value = T;
// Array for final outcome
const roshambo = ["Rock", "Paper", "Scissors"];
// Message of outcome
let msg = `You played ${roshambo[sv]},
your opponent played ${roshambo[vs]}, you ${result}!`;
// Display message
node.msg.value = msg;
}
// Register <form> to reset event
RPS.onreset = reset;
// Resets game
function reset(e) {
this.classList.remove('picked');
this.choices.disabled = false;
document.querySelectorAll('label').forEach(tag => {
if (tag.classList.contains('vs')) {
tag.remove();
}
});
}
html {
font: 300 1ch/1.1 'Segoe UI'
}
form {
width: 100%;
min-height: 100vh;
padding: 2rem;
color: white;
}
#choices {
border: 0;
margin: 0 auto;
}
input,
output,
button {
font: inherit;
font-size: 100%;
}
legend,
button {
font-size: 1.25rem;
}
[type='radio'] {
display: none
}
[type='radio']:checked+label {
color: cyan
}
[type='radio']:checked+label * {
fill: cyan
}
label.vs {
color: gold
}
label.vs * {
fill: gold;
}
.picked {
background: #3B4262;
}
output {
display: inline-block;
width: 4rem;
margin-bottom: 0.5rem;
}
output::before {
content: attr(value);
}
#msg {
display: inline-block;
width: 100%;
}
[type='reset'] {
position: relative;
top: 14vh;
}
.as-console-row::after {
width: 0;
font-size: 0;
}
.as-console-row-code {
width: 100%;
word-break: break-word;
}
.as-console-wrapper {
max-height: 15% !important;
max-width: 50%;
margin-left: 50%;
}
<form id='RPS'>
<fieldset id='choices'>
<legend>
<label>Wins:
<output id='w'></output>
</label>
<label>Lost:
<output id='l'></output>
</label>
<label>Tied:
<output id='t'></output>
</label><br>
<output id='msg'></output>
</legend>
<!-- rock -->
<input id='R' name='rps' type='radio'>
<label for='R' class="rock">
<svg class="rock svg" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"/></svg></label>
<!-- Paper -->
<input id='P' name='rps' type='radio'>
<label for='P' class="paper">
<svg class="paper svg" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"/></svg></label>
<!-- Scissors -->
<input id='S' name='rps' type='radio'>
<label for='S' class="scissors">
<svg class="scissors svg" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"/></svg></label>
</fieldset>
<button type='reset'>Reset</button>
</form>

Switch Logo color in Dark Mode issue

I have a black color logo for my portfolio and i would like to switch it white when Dark Mode : https://www.paulinerouger.com/
I have tried:
Using CSS Variables
<img class="nav_logo" src="assets/img/PR_logo.png" alt="original logo" />
body {
--nav_logo: url(PR_logo.png) no-repeat;
}
body[data-theme="dark"] {
--nav_logo: url(PR_logo_white.png) no-repeat;
}
.nav_logo {
background: var(--nav_logo);
}
Using SVG
<img class="nav_logo" src="assets/img/PR_logo.svg" id="svg" alt="PR Logo">
.nav_logo {
fill: currentColor;
}
Unfortunately none of the above has worked.
Any suggestion?

change stroke="#000" in your svg to stroke="currentColor"
body.dark-theme .nav__logo{
color: #FFFFFF;
}

If you are considering a JS-based solution, you can use the approach I developed below. Clicking the toggle button changes both the src attribute of the <img> element and the background-color style of the <body> element.
let button = document.getElementById('toggleButton');
let logo = document.getElementById('logo');
let darkImageURL = "https://cdn-icons-png.flaticon.com/512/196/196685.png";
let lightImageURL = "https://cdn-icons-png.flaticon.com/512/169/169367.png";
button.addEventListener('click', function(event) {
if(this.innerHTML === "Dark") {
document.body.style.background = "black";
this.innerHTML = "Light";
logo.src = darkImageURL;
}
else {
document.body.style.background = "white";
this.innerHTML = "Dark";
logo.src = lightImageURL;
}
});
<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100"/>
</body>

You can use css variables with content property for img
document.getElementById('toggleButton').addEventListener('click', function(event) {
if (this.innerHTML === "Dark") {
document.body.dataset.theme = "dark";
this.innerHTML = "Light";
} else {
document.body.dataset.theme = "light";
this.innerHTML = "Dark";
}
});
body {
--nav_logo: url('https://cdn-icons-png.flaticon.com/512/169/169367.png');
}
body[data-theme="dark"] {
--nav_logo: url('https://cdn-icons-png.flaticon.com/512/196/196685.png');
}
.nav_logo {
content: var(--nav_logo);
}
<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100" />
</body>

Svg is just perfect – but wont't work within an <img> element.
You might consider these steps:
optimize your logo svg to inherit colors in a more consistent way
reduce your logo to fixed path elements i.e convert stroked elemnts like the inside bar/pipe to a solid shape/path to avoid accidental strike-width shifts
use an svg <use> concept – providing an <img> like usage i.e providing external svg files as reusable assets.
Example1
stripping hard coded svg properties for better global css styling:
function toggleDarkmode(){
document.body.classList.toggle('darkmode')
}
* {
box-sizing: border-box;
}
body {
color: #000;
transition: 0.3s;
}
.darkmode {
color: #fff;
background-color: #000;
}
/* just example css – not essential */
.nav__logo .logo {
display: inline-block;
width: 10em;
}
.svgAsset {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
<div class="nav__logo">
<p><button type="button" onclick="toggleDarkmode()">toggleDarkmode</button></p>
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 375" fill="currentColor">
<path d="M 187.382812 337.265625 C 148.582031 337.265625 112.046875 322.164062 84.628906 294.691406 C 57.152344 267.273438 42.050781 230.738281 42.050781 191.933594 C 42.050781 153.132812 57.152344 116.597656 84.628906 89.179688 C 112.046875 61.703125 148.582031 46.601562 187.382812 46.601562 C 226.1875 46.601562 262.722656 61.703125 290.140625 89.179688 C 317.613281 116.652344 332.714844 153.132812 332.714844 191.933594 C 332.714844 230.738281 317.613281 267.273438 290.140625 294.691406 C 262.722656 322.164062 226.1875 337.265625 187.382812 337.265625 Z M 187.382812 55.316406 C 150.90625 55.316406 116.574219 69.546875 90.785156 95.335938 C 64.996094 121.125 50.765625 155.457031 50.765625 191.933594 C 50.765625 228.414062 64.996094 262.742188 90.785156 288.53125 C 116.574219 314.324219 150.90625 328.554688 187.382812 328.554688 C 223.863281 328.554688 258.191406 314.324219 283.980469 288.53125 C 309.773438 262.742188 324.003906 228.414062 324.003906 191.933594 C 324.003906 155.457031 309.773438 121.125 283.980469 95.335938 C 258.191406 69.546875 223.863281 55.316406 187.382812 55.316406 Z M 187.382812 55.316406"></path>
<path d="M 35.097656 -71.835938 L 8.824219 -71.835938 L 8.824219 0 L 19.292969 0 L 19.292969 -23.910156 L 35.097656 -23.910156 C 50.59375 -23.910156 58.390625 -35.816406 58.390625 -47.820312 C 58.390625 -59.828125 50.59375 -71.835938 35.097656 -71.835938 Z M 35.097656 -34.171875 L 19.292969 -34.171875 L 19.292969 -61.367188 L 35.097656 -61.367188 C 43.820312 -61.367188 48.128906 -54.59375 48.128906 -47.71875 C 48.128906 -40.945312 43.820312 -34.171875 35.097656 -34.171875 Z M 35.097656 -34.171875" transform="translate(97.282 227.676)"></path>
<path d="M 34.996094 -36.429688 L 22.886719 -36.429688 L 22.886719 -31.503906 L 49.054688 0 L 62.496094 0 L 39.816406 -26.988281 C 52.132812 -29.144531 58.390625 -38.792969 58.390625 -48.949219 C 58.390625 -60.34375 50.59375 -72.757812 34.996094 -72.757812 L 8.824219 -72.757812 L 8.824219 0 L 19.085938 0 L 19.085938 -62.292969 L 34.996094 -62.292969 C 43.71875 -62.292969 48.027344 -55.109375 48.027344 -48.949219 C 48.027344 -42.691406 43.71875 -36.429688 34.996094 -36.429688 Z M 34.996094 -36.429688" transform="translate(216.811 227.676)"></path>
<path transform="matrix(0 -9.7441 10.11111 0 187.491 250.21)" d="M -0.0000988013 0.0000885473 L 11.930592 0.0000885473" stroke="currentColor" stroke-width="1"></path>
</svg>
</div>
all path related fill attributes are removed (resulting in a default fill="#000" / black)
svg parent element gets a fill="currentColor" – inherited to all children
the stroke based bar/pipe element gets a stroke="currentColor" rule
Example2
<svg><use href="#..."></svg> also works fine with external files
The next example takes an inlined svg as source but will also work fine with external file references like this (provided, these external files are available on the same domain):
<svg>
<use href="logo.svg#logo-symbol">
</svg>
function toggleDarkmode(){
document.body.classList.toggle('darkmode')
}
*{
box-sizing:border-box;
}
body {
color: #000;
transition: 0.3s;
}
.darkmode {
color: #fff;
background-color: #000;
}
/* just example css – not essential */
.nav__logo .logo {
display: inline-block;
width: 10em;
}
.svgAsset{
position:absolute;
width:0;
height:0;
overflow:hidden;
}
<div class="nav__logo">
<p><button type="button" onclick="toggleDarkmode()">toggleDarkmode</button></p>
<svg class="logo logo-cropped" viewBox="0 0 100 100" >
<use href="#logo-smaller" />
</svg>
</div>
<svg class="svgAsset" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true">
<symbol id="logo-smaller" viewBox="0 0 100 100" fill="currentColor">
<path id="circle" d="M50 100c-27.6 0-50-22.4-50-50c0-27.6 22.4-50 50-50c27.6 0 50 22.4 50 50c0 27.6-22.4 50-50 50zm0-97c-25.9 0-47 21.1-47 47c0 25.9 21.1 47 47 47c25.9 0 47-21.1 47-47c0-25.9-21.1-47-47-47z" />
<path id="P" d="M31.1 37.6l-9 0l0 24.7l3.6 0l0-8.2l5.4 0c5.3 0 8-4.1 8-8.2c0-4.2-2.7-8.3-8-8.3zm0 12.9l-5.4 0l0-9.4l5.4 0c3 0 4.5 2.3 4.5 4.7c0 2.4-1.5 4.7-4.5 4.7z" />
<path id="R" d="M72.2 49.8l-4.2 0l0 1.7l9 10.8l4.6 0l-7.8-9.3c4.2-0.7 6.4-4.1 6.4-7.6c0-3.9-2.7-8.2-8-8.2l-9 0l0 25l3.5 0l0-21.3l5.5 0c3 0 4.5 2.5 4.5 4.6c-0.1 2.1-1.5 4.3-4.5 4.3z" />
<path id="Pipe" d="M51.4 70l-2.8 0l0-40l2.8 0l0 40z" />
</symbol>
</svg>
In the above example, strokes are converted to solid paths – thus you don’t have to bother about styling stroke-colors and fill colors.
»Silverbullet« currentColor?
svg's currentColor value is handy to color svg elements according to their parent elements' (text) color.
E.g. perfectly suited for an inline (icon font like) element behavior.
But you won't see any effect applying fill color values.
Nothing wrong with the fill property
Since fill is reserved for svg elements – you don't have to worry about accidentally overridden styles.
So it might still be a better choice for some elements.

Coloring svg using javascript when clicking an arrow to go to the next slide

I have to color SVG when I press red square to change slide, can someone help me?
I can color SVG when I hit, but when I click the red square to go to the next slide I have no idea how to change the color of the SVG so that it matches colored white.
So the final result should be that when I click on the red square the slide changes, SVG turns white together with the pink background
// Script written by #hamzadhamiya for #bloggerever.
// http://bloggerever.com
$(function () {
$.FindContainer = function () {
$('.tab-content>div').each(function findcontent() {
var newindex = $('.activetab').index();
var newheight = $('.activetab').height();
$('.tab-content').animate({
'height': newheight+20
}, 100);
var otherindex = $(this).index();
var substractindex = otherindex - newindex;
var currentwidth = $('.multipletab').width();
var newpositions = substractindex * currentwidth;
$(this).animate({
'left': newpositions
});
});
};
$.FindId = function () {
$('.tab-content>div').each(function () {
if ($(this).attr('id') == $('.active').attr('id')) {
$('.tab-content>div').removeClass('activetab');
$(this).addClass('activetab');
}
});
};
$('.tab-buttons>span').first().addClass('active');
$('.tab-content>div').each(function () {
var activeid = $('.active').attr('id');
if ($(this).attr('id') == activeid) {
$(this).addClass('activetab');
}
var currentheight = $('.activetab').height();
var currentwidth = $('.multipletab').width();
var currentindex = $(this).index();
var currentposition = currentindex * currentwidth;
$(this).css({
'left': currentposition,
'width': currentwidth - 40,
'padding': '10px 20px'
});
$(this).attr('data-position', currentposition);
$('.tab-content').css('height', currentheight+20);
});
$('.tab-buttons>span').click(function () {
$('.tab-buttons>span').removeClass('active');
$(this).addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
});
$('.next').click(function () {
var activetabindex = $('.activetab').index() + 1;
var containers = $('.tab-content>div').length;
if (containers == activetabindex) {
$('.tab-buttons>span').removeClass('active');
$('.tab-buttons>span').first().addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
} else {
var currentopen = $('.active').next();
$('.active').removeClass('active');
currentopen.addClass('active');
$.FindId();
$.FindContainer();
}
});
$('.prev').click(function(){
var activetabindex = $('.activetab').index();
if (activetabindex == 0) {
$('.tab-buttons>span').removeClass('active');
$('.tab-buttons>span').last().addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
} else {
var currentopen = $('.active').prev();
$('.active').removeClass('active');
currentopen.addClass('active');
$.FindId();
$.FindContainer();
}
});
});
//script che colora il tabs tessuti
document.getElementById("linkTessuti1").classList.add("colorebianco")
function onclickWhite1() {
var color1=document.getElementById("linkTessuti1");
color1.classList.add("colorebianco");
var rimuovicolor2=document.getElementById("linkTessuti2");
rimuovicolor2.classList.remove("colorebianco");
var rimuovicolor3=document.getElementById("linkTessuti3");
rimuovicolor3.classList.remove("colorebianco");
}
function onclickWhite2() {
var color2=document.getElementById("linkTessuti2");
color2.classList.add("colorebianco");
var rimuovicolor1=document.getElementById("linkTessuti1");
rimuovicolor1.classList.remove("colorebianco");
var rimuovicolor3=document.getElementById("linkTessuti3");
rimuovicolor3.classList.remove("colorebianco");
}
function onclickWhite3() {
var color3=document.getElementById("linkTessuti3");
color3.classList.add("colorebianco");
var rimuovicolor1=document.getElementById("linkTessuti1");
rimuovicolor1.classList.remove("colorebianco");
var rimuovicolor2=document.getElementById("linkTessuti2");
rimuovicolor2.classList.remove("colorebianco");
}
.multipletab{
width:50%;
margin:0 auto;
background:blue;
overflow:hidden;
position:relative;
}
.tab-buttons{
display:inline-block;
width:100%;
border-bottom:2px solid #666;
}
.tab-buttons>span{
display:block;
text-align: center;
float:left;
cursor:pointer;
width: 20%;
background:green;
}
.tab-buttons>span.active{
background:pink;
position:relative;
}
.tab-content{
position:relative;
}
.tab-content>div{
position:absolute;
background-color:yellow;
}
.tab-nav>span{
position:absolute;
top:50%;
cursor:pointer;
display:block;
height:35px;
width:35px;
}
.tab-nav>span.next{
right:10px;
background-color: red;
}
.tab-nav>span.prev{
left:10px;
background-color: red;
}
.colorebianco {
fill: #ffffff!important;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Sliding Multiple Tabs with Arrow navigation</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=PT+Sans'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='multipletab'>
<div class='tab-buttons'>
<span id='content1'>
<svg onclick="onclickWhite1()" id="linkTessuti1" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content2'>
<svg onclick="onclickWhite2()" id="linkTessuti2" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content3'>
<svg onclick="onclickWhite3()" id="linkTessuti3" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content4'>
<svg onclick="onclickWhite4()" id="linkTessuti4" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content5'>
<svg onclick="onclickWhite5()" id="linkTessuti5" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<!--add more button right after it with same id attribute of that container. Make sure to use span tag.-->
</div>
<div class='tab-content'>
<div id='content1'>
THE CONTENT OF FIRST TAB.THE CONTENT OF FIRST TAB.THE
</div>
<div id='content2'>
This is Second Containter.This is Second Containter.This
</div>
<div id='content3'>
THE CONTENT OF 3RD CONTAINER GOES HERETHE CONTENT OF
</div>
<div id='content4'>
THE CONTENT OF 4RD CONTAINER GOES HERETHE CONTENT OF
</div>
<div id='content5'>
THE CONTENT OF 5RD CONTAINER GOES HERETHE CONTENT OF
</div>
<!--add more container right after it with same id attribute of that button. Make sure to use div tag.-->
</div>
<div class='tab-nav'>
<span class='next'></span>
<span class='prev'></span>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

You don't need to specifically set the circle to white (class .colorebianco). Instead just add a CSS rule that makes the circle white if it is in the .active span.
.tab-buttons>span.active path {
fill: #ffffff!important;
}
Then everything works automatically for you.

Tweak SVG viewBox behaviour via javascript

I am using vanilla javascript to navigate the pages of a comic book. However, I need to setup a condition that checks if the points in the current polygon intersects with the points in the next polygon. If true, I want the viewBox to animate from the current points to the next points, if false let nothing happen (use the default fade transition).
Here is a section of my code
var DELAY = 400;
function nextArea() {
if (isFirstPage() || areaIndex >= areas.length - 1) {
changePage(true);
changeArea();
} else {
fade();
areaIndex++;
setTimeout(changeArea, DELAY);
}
}
function prevArea() {
if (isLastPage() || areaIndex <= 0) {
changePage(false);
changeArea();
} else {
fade();
areaIndex--;
setTimeout(changeArea, DELAY);
}
}
function changeArea() {
if (isFirstPage() || isLastPage()) {
return;
}
var activeArea = areas[areaIndex];
var points = activeArea.getAttribute('points').split(' ');
var xy1 = points[0].split(',');
var xy2 = points[1].split(',');
var xy3 = points[2].split(',');
var box = [xy1[0], xy1[1], xy2[0] - xy1[0], xy3[1] - xy2[1]];
activePage.classList.remove('fade');
activePage.setAttribute('viewBox', box.join(' '));
activeRect = rects[pageIndex - 1];
activeRect.setAttribute('x', xy1[0]);
activeRect.setAttribute('y', xy1[1]);
}
My code repository is here: https://github.com/cnario/svg-carousel
Here is what I have thus far: https://cnario.github.io/svg-carousel/
Here is how I expect it to act: https://read.marvel.com/#book/41323

I suppose this is what you may need: a way to transition the viewBox from one value to another so that every time you have only one part of the svg in the viewBox.
let BB = {};
BB.tomato = tomato.getBBox();
BB.skyblue = skyblue.getBBox();
BB.gold = gold.getBBox();
let radios = document.querySelectorAll("#controls input");
radios.forEach(r =>{
let color = r.dataset.color;
let bb = BB[color];
r.addEventListener("change",()=>{
svg.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
svg.style.height = `${bb.height * 300 / bb.width}px`;
})
})
svg {
width: 300px;
border: 1px solid;
height: 600px;
transition: height 1s;
}
<p id="controls">
<label>tomato: <input type="radio" name="selector" data-color="tomato" /></label>
<label>skyblue: <input type="radio" name="selector" data-color="skyblue" /></label>
<label>gold: <input type="radio" name="selector" data-color="gold" /></label>
</p>
<svg id="svg" viewBox="0 0 100 200">
<g id="tomato">
<circle cx="35" cy="70" r="25" fill="tomato" />
</g>
<g id="skyblue">
<ellipse cx="75" cy="160" rx="15" ry="35" fill="skyblue" />
</g>
<g id="gold">
<polygon fill="gold" points="75,15 60,30 90,30" />
</g>
</svg>

Relatively scale Svg inside fixed Div (CSS and JS)

I have two svg graphics which do not have the same size, but the content does relatively suit each other, see the following example:
The Goal
I search for a solution which preserves the ratio between both svg´s while having both images in a "fixed frame".
The Problem
The following example shows how the left person "gets bigger" since the svg is smaller than the svg from the right person and can grow more inside the fxied frame (max-width and max-height 100%) like this
I can´t change the svg files (i.e. the viewbox) since they are loaded on a canvas and working right there.
This two SVGs are just an example, there are a lot of other SVGs with different sizes and ratios between each other.
JsFiddle
I prepared a Fiddle to play around and try possible solutions: https://jsfiddle.net/e6hs4w3s/

I know you're looking to strictly use CSS, but as a (potential) fallback you could use JavaScript to resize the smaller svg, based on the ratio of the larger svg's computed height / natural height.
This is the line that resizes the smaller img based on the desired proportions: shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);
var images = document.querySelectorAll('.Tile');
var img1 = images[0];
var img2 = images[1];
if (img1.naturalHeight > img2.naturalHeight) {
tallImg = img1;
shortImg = img2;
} else {
tallImg = img2;
shortImg = img1;
}
shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);
.Box {
display: inline-flex;
align-items: flex-end;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
vertical-align: bottom;
}
.Tile {
max-width: 100%;
max-height: 100%;
}
<img src="http://imgh.us/lay.svg" />
<img src="http://imgh.us/heart_23.svg" />
<hr />
<div class="Box">
<img class="Tile" src="http://imgh.us/lay.svg" />
</div>
<div class="Box">
<img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>

Use a more appropriate viewBox for the sitting person. Make the viewBox y and height components match the ones in the standing SVG.
In your case the "standing" SVG has a viewBox y=0 and height=367. The "sitting" SVG has a height=269.
If you make the sitting one have a viewBox height of 367 also, the proportions of the two will match. However you'll need to change the y component of its viewBox as well - otherwise it will be at the top of the SVG instead of the bottom. So we set the y component to (269-367) to correct that.
viewBox="0 -98 230.31494 367"
.Box {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
}
.Tile {
max-width: 100%;
max-height: 100%;
}
<div class="Box">
<svg
class="Tile"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Ebene_1"
x="0px"
y="0px"
width="6.499999cm"
height="7.5915117cm"
viewBox="0 -98 230.31494 367"
enable-background="new 0 0 283.46 283.46"
xml:space="preserve"
inkscape:version="0.92.0 r15299"
sodipodi:docname="zugewandt_nach_unten.svg"><metadata
id="metadata27"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs25" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="657"
id="namedview23"
showgrid="false"
units="cm"
inkscape:zoom="1"
inkscape:cx="51.890866"
inkscape:cy="140.27666"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Ebene_1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:pagecheckerboard="true" />
<g
id="g3"
transform="matrix(-1.1825709,0,0,1.1825709,230.31821,-66.220423)">
<path
d="m 154.409,92.382 c 2.378,4.021 6.902,5.898 12.702,6.499 -4.37,4.104 -14.615,1.891 -12.702,-6.499 z"
id="path5"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 95.329,181.592 c -1.929,-2.74 -7.111,-5.074 -9.452,-8.567 1.326,-3.302 3.538,-5.093 5.612,-8.271 2.503,1.253 3.837,4.155 6.204,5.907 2.975,2.204 7.198,4.248 10.93,6.204 7.161,3.754 14.226,6.105 21.859,10.93 -1.638,3.984 -5.125,8.652 -7.976,12.406 -1.792,-0.078 -1.973,-1.018 -3.25,-2.362 1.052,4.188 3.411,6.844 6.203,9.452 3.106,2.9 13.093,7.684 13.884,12.702 0.667,4.229 -3.668,8.383 -6.499,9.747 -4.851,2.338 -11.467,2.618 -18.314,3.545 -17.772,2.408 -39.861,6.749 -54.353,10.634 -0.07,-3.613 0.012,-7.077 0.295,-10.338 7.509,-3.136 14.493,-7.042 22.154,-10.634 7.693,-3.607 16.185,-5.73 26.29,-6.5 3.629,-0.275 7.491,1.302 10.043,-0.295 -5.255,-1.816 -13.221,-2.709 -20.382,-1.772 -3.784,0.495 -9.981,4.586 -12.875,4.756 -4.165,0.245 -7.423,-6.422 -10.756,-8.891 -4.354,-3.225 -7.647,-6.24 -10.93,-9.749 -0.243,-7.731 0.063,-16.014 -3.249,-20.677 -0.934,4.94 0.733,11.296 0.295,19.2 -0.528,9.541 -3.121,20.377 -3.841,32.789 -0.318,5.496 -0.798,10.925 -0.295,17.428 0.388,4.998 2.265,13.149 1.182,16.247 -0.645,1.846 -6.201,5.688 -7.976,7.09 -4.705,3.72 -7.906,7.009 -13.588,7.68 -2.893,0.343 -6.303,-0.408 -6.794,-1.772 -0.258,-0.717 1.764,-2.797 3.25,-4.431 1.744,-1.918 2.818,-3.332 3.544,-4.431 1.965,-2.972 4.74,-6.738 6.203,-9.749 1.402,-2.883 0.811,-4.989 0.591,-8.861 -0.31,-5.44 0.422,-12.134 0,-17.428 -1.251,-15.694 -3.658,-33.514 -4.431,-51.103 -0.344,-7.83 -0.436,-15.952 0.591,-22.451 0.845,-5.349 4.916,-10.429 12.702,-7.975 2.738,0.862 8.226,5.452 10.93,7.384 10.395,7.428 19.205,17.48 32.199,22.156 z"
id="path7"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 165.633,186.908 c 1.453,8.804 -3.142,22.188 1.479,27.472 2.745,3.142 9.129,6.53 13.904,8.053 3.712,1.183 9.56,1.866 12.472,4.543 -3.165,2.398 -10.156,0.245 -14.266,-0.483 -5.991,-1.064 -12.716,-2.966 -18.609,-0.887 -4.011,1.414 -5.568,5.899 -10.34,5.612 -2.66,-0.501 1.098,-2.64 1.772,-4.135 4.068,-9.019 3.812,-23.248 2.067,-34.857 5.049,-0.566 8.242,-2.986 11.521,-5.318 z"
id="path9"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 40.091,237.219 c 0.182,4.248 -0.608,7.899 0,11.723 -9.146,1.374 -19.969,5.869 -29.54,6.499 -2.362,0.154 -5.277,0.199 -6.499,-1.772 0.896,-3.576 2.178,-3.695 4.333,-4.424 8.607,-2.91 15.533,-9.286 22.549,-12.709 2.045,-0.999 6.426,0.218 9.157,0.683 z"
id="path11"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 169.117,105.585 c -3.789,-2.385 -8.862,-2.115 -13.587,-0.295 -1.44,0.555 -2.468,1.662 -3.841,1.772 -3.503,0.283 -5.502,-0.698 -8.567,-2.068 0.831,2.518 3.815,2.881 5.908,4.136 -0.84,2.311 -1.232,0.879 -1.863,4.271 1.753,-0.043 2.258,-1.242 3.92,-2.761 2.919,-2.67 11.884,-7.785 16.258,-2.101 0.66,0.857 1.29,2.776 1.479,4.135 0.885,6.416 0.351,14.986 0,22.746 -0.697,15.317 -0.622,31.636 -2.66,41.946 -3.868,0.563 -6.138,2.725 -10.93,2.363 -1.492,-14.936 1.168,-36.355 -6.498,-46.081 -0.777,4.567 2.566,9.542 2.067,14.474 -0.373,3.697 -3.416,7.464 -5.021,10.93 -2.746,5.929 -4.522,12.689 -7.975,16.838 -5.693,-2.095 -11.339,-5.942 -16.542,-9.748 -2.36,-1.727 -7.439,-6.067 -7.976,-9.159 -0.516,-2.975 1.074,-7.574 2.068,-11.224 1.699,-6.246 3.776,-11.365 3.249,-19.201 -2.357,1.513 -2.405,4.688 -2.954,7.09 -0.567,2.476 -1.357,5.154 -2.068,7.679 -1.388,4.935 -5.411,13.406 -2.659,18.316 2.058,3.672 9.207,8.246 12.997,10.633 5.443,3.428 9.08,7.222 14.18,9.453 4.87,2.132 10.908,-0.73 15.746,-1.123 1.674,0.292 0.589,1.919 -0.268,3.207 6.101,1.975 15.711,-6.053 15.537,-1.493 -2.353,9.6 -23.563,12.656 -34.561,6.203 -8.282,-4.858 -18.467,-9.137 -26.585,-13.884 -2.803,-1.639 -5.919,-3.115 -8.271,-5.021 -2.07,-1.676 -6.064,-6.029 -6.499,-8.271 -0.8,-4.127 1.95,-10.061 3.249,-15.064 2.158,-8.304 3.753,-13.701 6.794,-20.382 0.924,-2.03 2.024,-4.664 2.954,-5.612 4.713,-4.809 18.369,-4.518 26.29,-6.794 2.859,-0.822 5.622,-2.228 6.794,-5.318 2.344,-6.177 -1.19,-12.252 -1.772,-17.723 -0.861,-8.079 1.603,-15.854 5.316,-20.383 6.295,-7.677 20.574,-12.459 31.312,-6.499 4.378,2.43 9.727,7.719 10.854,12.19 2.453,9.716 -4.879,23.439 -10.123,28.416 -1.647,1.565 -3.207,3.117 -5.752,3.407 z m -7.384,-20.677 c 0.229,0.065 0.342,0.247 0.294,0.591 3.046,1.599 5.774,-1.618 3.842,-4.135"
id="path13"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 162.186,55.997 c 0.199,0 0.196,0 0.396,0 6.142,0 11.791,1.277 15.852,4.135 4.196,2.953 8.647,8.275 9.748,13.588 1.209,5.828 -0.092,12.4 -2.067,17.428 -2.923,7.438 -9.257,13.562 -14.474,18.019 2.43,10.587 0.839,24.841 0.296,37.22 -0.468,10.617 -1.039,21.178 -2.659,30.426 1.421,0.761 2.186,0.926 2.363,3.249 0.125,1.649 -0.746,4.244 -2.954,5.907 -0.581,3.304 -0.086,8.046 -0.295,12.997 -0.196,4.656 -0.933,9.164 0.591,12.407 1.837,3.913 12.26,8.465 17.132,10.044 3.475,1.125 7.552,1.816 8.566,5.908 1.064,4.288 -8.802,2.549 -13.884,2.066 -5.919,-0.561 -11.474,-2.473 -15.95,-2.066 -3.359,0.304 -5.824,3.119 -8.862,5.021 -2.046,1.282 -8.383,3.896 -9.748,0 -0.917,-2.614 1.959,-5.31 2.954,-7.975 3.302,-8.851 3.733,-19.401 2.658,-31.607 -7.682,1.293 -13.458,-1.375 -18.905,-3.25 -2.427,4.663 -5.369,8.811 -8.271,12.997 4.168,6.246 16.768,9.067 17.725,18.02 1.525,14.28 -15.868,14.926 -27.472,16.542 -18.028,2.513 -39.852,6.658 -54.648,10.043 -0.06,3.664 0.596,6.441 0.886,9.158 0.283,2.663 1.301,6.291 0.591,9.452 -0.671,2.981 -5.512,5.316 -8.862,7.976 -5.566,4.418 -9.548,9.458 -17.428,9.748 -4.32,0.159 -10.468,-1.677 -10.634,-4.727 -0.109,-1.997 2.922,-4.173 4.431,-5.611 5.661,-5.403 11.798,-15.013 10.93,-20.088 -2.639,-0.34 -6,1.328 -9.453,2.068 -3.363,0.721 -7.076,1.395 -10.635,2.068 -5.167,0.977 -19.593,3.505 -20.086,-3.25 -0.5,-6.841 11.431,-7.824 16.542,-10.93 6.697,-4.069 12.635,-14.058 23.534,-8.613 -2.043,-15.677 -4.313,-36.206 -5.428,-54.158 -0.33,-5.322 -0.356,-10.632 0.209,-15.508 1.092,-9.412 6.831,-18.869 18.314,-15.656 2.347,0.657 5.177,3.024 7.681,4.726 7.516,5.112 14.579,11.641 21.563,16.247 3.45,-3.143 5.502,-4.255 7.208,-8.248 -1.796,-4.543 -0.257,-7.046 0.159,-8.922 1.07,-4.835 2.708,-6.9 4.154,-11.779 1.529,-5.16 2.977,-9.229 4.431,-14.178 1.398,-4.757 3.601,-8.829 7.09,-11.521 3.581,-2.763 8.66,-3.413 14.179,-4.431 3.427,-0.632 10.732,-0.849 13.588,-2.363 6.498,-3.447 1.389,-14.053 0.886,-20.677 -0.491,-6.473 0.888,-12.902 3.25,-17.429 4.873,-9.345 13.085,-13.365 24.808,-14.473 z m 12.683,46.181 c 5.244,-4.976 12.22,-18.445 9.769,-28.162 -1.13,-4.471 -5.963,-9.977 -10.341,-12.407 -10.737,-5.961 -25.016,-1.179 -31.311,6.499 -3.713,4.529 -6.177,12.304 -5.317,20.383 0.583,5.471 4.116,11.546 1.772,17.723 -1.172,3.09 -3.935,4.496 -6.794,5.317 -7.92,2.277 -21.577,1.985 -26.29,6.794 -0.93,0.948 -2.03,3.583 -2.954,5.612 -3.042,6.681 -4.637,12.077 -6.794,20.382 -1.299,5.003 -4.049,10.938 -3.249,15.065 0.435,2.242 4.429,6.594 6.499,8.271 2.352,1.905 5.468,3.382 8.271,5.021 8.118,4.748 18.191,9.22 26.585,13.884 10.919,6.067 31.195,3.359 34.562,-6.202 -0.572,-3.586 -10.684,4.357 -16.784,2.382 -0.675,-1.012 2.209,-3.449 0.535,-3.741 -4.839,0.394 -9.897,2.899 -14.767,0.769 -5.1,-2.233 -8.736,-6.025 -14.18,-9.454 -3.791,-2.386 -10.939,-6.961 -12.997,-10.634 -2.752,-4.91 1.271,-13.38 2.659,-18.314 0.71,-2.526 1.501,-5.203 2.068,-7.68 0.549,-2.401 0.597,-5.576 2.954,-7.089 0.527,7.834 -1.55,12.955 -3.249,19.201 -0.994,3.65 -2.584,8.248 -2.068,11.225 0.536,3.091 5.615,7.431 7.976,9.157 5.203,3.807 11.206,7.031 16.542,9.748 3.453,-4.147 5.229,-10.907 7.975,-16.838 1.605,-3.466 4.117,-7.768 5.022,-10.929 -0.897,-4.338 -2.846,-9.908 -2.068,-14.475 7.666,9.726 5.006,31.145 6.499,46.082 4.791,0.36 7.061,-1.801 10.93,-2.363 2.037,-10.31 1.962,-26.63 2.659,-41.947 0.351,-7.759 0.886,-16.33 0,-22.745 -0.188,-1.359 -0.818,-3.278 -1.478,-4.135 -4.374,-5.684 -12.805,-0.391 -15.724,2.278 -1.662,1.52 -4.009,3.831 -5.545,4.811 -0.104,-3.254 1.893,-4.276 2.954,-6.499 -2.093,-1.254 -5.077,-1.618 -5.908,-4.136 3.275,0.366 5.063,2.351 8.566,2.068 1.374,-0.11 2.4,-1.218 3.842,-1.772 4.724,-1.819 9.797,-2.09 13.587,0.295 2.297,-0.416 3.945,-1.88 5.592,-3.445 z M 62.935,159.385 c -2.704,-1.933 -8.192,-6.522 -10.93,-7.385 -7.786,-2.454 -11.857,2.627 -12.702,7.976 -1.027,6.499 -0.935,14.62 -0.591,22.45 0.773,17.589 3.179,35.409 4.431,51.103 0.422,5.295 -0.31,11.988 0,17.429 0.22,3.872 0.812,5.979 -0.591,8.861 -1.463,3.011 -4.238,6.776 -6.203,9.749 -0.727,1.098 -1.8,2.513 -3.544,4.43 -1.485,1.634 -3.507,3.714 -3.25,4.432 0.491,1.364 3.901,2.114 6.794,1.772 5.682,-0.672 8.883,-3.961 13.588,-7.68 1.775,-1.403 7.331,-5.245 7.976,-7.09 1.083,-3.099 -0.794,-11.249 -1.182,-16.247 -0.503,-6.503 -0.023,-11.933 0.295,-17.429 0.72,-12.411 3.313,-23.248 3.841,-32.789 0.438,-7.904 -1.229,-14.259 -0.295,-19.199 3.312,4.662 3.005,12.944 3.249,20.677 3.283,3.508 6.576,6.524 10.93,9.748 3.333,2.469 7.104,7.11 11.469,7.912 2.883,-0.617 8.379,-3.282 12.163,-3.777 7.162,-0.936 15.127,-0.043 20.382,1.772 -2.553,1.598 -6.414,0.021 -10.043,0.296 -10.105,0.77 -18.597,2.893 -26.29,6.499 -7.661,3.592 -14.645,7.498 -22.154,10.634 -0.284,3.262 -0.366,6.725 -0.295,10.339 14.491,-3.886 36.58,-8.226 54.353,-10.634 6.847,-0.927 13.463,-1.207 18.314,-3.545 2.831,-1.364 7.166,-5.52 6.499,-9.748 -0.791,-5.018 -10.777,-9.801 -13.883,-12.702 -2.792,-2.608 -5.151,-5.264 -6.203,-9.452 1.474,0.596 1.829,1.089 3.25,2.362 2.851,-3.754 6.337,-8.422 7.976,-12.406 -8.059,-3.791 -14.698,-7.176 -21.859,-10.929 -3.732,-1.957 -7.955,-4.001 -10.93,-6.204 -2.366,-1.753 -4.279,-3.636 -6.203,-5.907 -1.688,3.518 -4.286,4.969 -5.612,8.271 2.341,3.493 7.523,5.827 9.452,8.567 -12.999,-4.677 -21.809,-14.729 -32.202,-22.156 z m 77.983,18.314 c 3.315,0.798 7.125,-0.198 10.614,-0.698 -0.266,-7.613 0.624,-15.659 -0.57,-22.343 -3.257,7.772 -5.556,16.5 -10.044,23.041 z m 12.998,14.475 c 1.744,11.608 1.998,25.839 -2.068,34.856 -0.675,1.496 -3.701,3.508 -1.772,4.135 4.772,0.287 6.328,-4.197 10.338,-5.611 5.896,-2.08 12.621,-0.178 18.61,0.886 4.111,0.729 12.236,3.119 12.407,0 0.196,-2.137 -6.703,-2.824 -10.415,-4.007 -4.775,-1.522 -11.355,-4.963 -14.103,-8.105 -4.618,-5.282 -1.13,-18.618 -1.477,-27.471 -3.282,2.331 -6.473,4.75 -11.52,5.317 z m -93.345,37.809 c 7.416,-2.923 15.059,-5.618 20.973,-10.043 -7.239,-4.085 -12.655,-9.992 -18.019,-15.951 -1.016,8.634 -2.797,16.502 -2.954,25.994 z m -29.835,6.499 c -7.016,3.423 -13.585,10.512 -22.192,13.422 -2.154,0.729 -3.793,0.135 -4.689,3.711 1.222,1.973 4.137,1.928 6.499,1.773 9.57,-0.63 20.393,-5.126 29.54,-6.5 0.225,-3.832 0.379,-7.422 0.197,-11.67 -2.731,-0.464 -7.309,-1.734 -9.355,-0.736 z"
id="path15"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 166.224,81.453 c 1.936,2.518 -0.793,5.734 -3.839,4.135 0.048,-0.344 -0.065,-0.526 -0.297,-0.591 0.29,-2.27 1.403,-3.718 4.136,-3.544 z"
id="path17"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 158.249,85.588 c -0.214,1.265 -0.908,2.045 -1.773,2.659 0.62,7.552 8.587,7.759 16.247,8.271 -3.025,6.303 -16.426,9.722 -19.792,1.772 -1.105,-2.613 -0.167,-5.767 0.297,-9.157 -1.041,-1.271 -5.233,-0.809 -4.728,-2.659 2.581,0.588 7.026,0.102 9.749,-0.886 z m 9.672,12.849 c -5.8,-0.6 -11.134,-2.033 -13.512,-6.054 -1.913,8.389 7.679,11.042 13.512,6.054 z"
id="path19"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 175.381,86.77 c 1.271,2.657 -2.075,5.457 -4.431,3.544 0.048,-0.344 -0.064,-0.526 -0.294,-0.59 0.035,-2.445 2.478,-4.557 4.725,-2.954 z"
id="path21"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</g>
</svg>
</div>
<div class="Box">
<img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>

How about using a simple percentage based margins and sizes to scale both svg images accordingly within the fixed containers?
Here's what I came up with:
<div class="box">
<img class="tile left" src="https://imgh.us/lay.svg" />
</div>
<div class="box">
<img class="tile right" src="https://imgh.us/heart_23.svg" />
</div>
And the CSS:
.left {
margin-top: 20%;
margin-left: 25%;
height: 80%;
width: 75%;
}
.right {
height: 100%;
margin-right: 25%;
width: 75%;
}
.box {
float: left;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
}
Of course, you can change the percentages to your liking. Cheers!

Categories

Resources