I have a toggle switch through using input and hiding the checkbox. However, I couldn't hide a div element with svg as it's content, also tried appending the class to name to the svg it self but nothing happened.
Basically I'm trying to have an icon in the toggle switch that changes depending on on checkbox status. I tried doing it all in css here How to set custom stroke color when using svg background-image but I couldn't change the stroke so I'm doing that now
https://codepen.io/jam2020/pen/MWVVwvb?editors=1100
Any ideas, Thanks
$width: 80px;
$height: 44px;
$border-radius: 50px;
$circle-size: $height - 4px;
$icon-size: $circle-size - 2px;
$neutral: red;
$secondary: white;
$base-100: white;
$base-200: gray;
$base-300: black;
$base-content: white;
.ThemeToggler {
width: $width;
height: $height;
flex-shrink: 0;
border-radius: $border-radius;
background-color: $neutral;
border: 1px solid $base-100;
display: inline-block;
cursor: pointer;
&:hover {
border-color: $secondary;
}
}
.ThemeTogglerFill {
position: relative;
&:before {
content: "";
position: absolute;
top: 1px;
left: 1px;
height: $circle-size;
width: $circle-size;
background: $base-300;
box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: $border-radius;
transition: background-color 0.25s, transform 0.25s;
}
}
.ThemeTogglerInput {
display: none;
&:checked~.ThemeTogglerFill::before {
transform: translateX($circle-size);
}
&:checked~.SunIcon {
display: none;
}
}
#mixin icon {
position: relative;
display: block;
width: $icon-size;
height: $icon-size;
border-radius: 50%;
overflow: hidden;
fill: $base-content;
}
.SunIcon {
#include icon;
top: 1.8px;
left: 1.7px;
}
.MoonIcon {
#include icon;
top: -35px;
left: $circle-size + 2px;
}
<label class="ThemeToggler" for="ThemeTogglerID">
<input id="ThemeTogglerID" class="ThemeTogglerInput" type="checkbox" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS" checked />
<div class="ThemeTogglerFill" >
<div class="SunIcon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
<path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
<path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
<path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
<path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
<path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
<path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
<path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
<path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
<path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
</svg>
</div>
<div class="MoonIcon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
</svg>
</div>
</div>
</label>
Modify your scss code like this. Make use of visibility property.
$width: 80px;
$height: 44px;
$border-radius: 50px;
$circle-size: $height - 4px;
$icon-size: $circle-size - 2px;
$neutral: red;
$secondary: white;
$base-100: white;
$base-200: gray;
$base-300: black;
$base-content: white;
.ThemeToggler {
width: $width;
height: $height;
flex-shrink: 0;
border-radius: $border-radius;
background-color: $neutral;
border: 1px solid $base-100;
display: inline-block;
cursor: pointer;
&:hover {
border-color: $secondary;
}
}
.ThemeTogglerFill {
position: relative;
&:before {
content: "";
position: absolute;
top: 1px;
left: 1px;
height: $circle-size;
width: $circle-size;
background: $base-300;
box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: $border-radius;
transition: background-color 0.25s, transform 0.25s;
}
}
.ThemeTogglerInput {
display: none;
&:checked ~ .ThemeTogglerFill::before {
transform: translateX($circle-size);
}
& + .ThemeTogglerFill{
.MoonIcon{
visibility:hidden;
}
.SunIcon {
visibility: visible;
}
}
&:checked + .ThemeTogglerFill {
.SunIcon {
visibility: hidden;
}
.MoonIcon{
visibility:visible;
}
}
}
#mixin icon {
position: relative;
display: block;
width: $icon-size;
height: $icon-size;
border-radius: 50%;
overflow: hidden;
fill: $base-content;
}
.SunIcon {
#include icon;
top: 1.8px;
left: 1.7px;
}
.MoonIcon {
#include icon;
top: -35px;
left: $circle-size + 2px;
}
You can also check the implementation here https://codepen.io/abhay07/pen/QWmmjqq?editors=1100
I have a little script, that creates a line digram. The output is a SVG that is added to a div element. The problem is that the SVG is not displayed. If i copy the SVG and paste it to JS Fiddle it is displayed correctly.
The index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 14px;
height: 100vH;
}
</style>
</head>
<body>
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;"></div>
<script src="app.bundle.js"></script>
<script>
let a = new LiveLineAnno.default(
document.getElementById("app"),
[
{ x: 0, y: 0 },
{ x: 5, y: 40 },
{ x: 20, y: 30 },
{ x: 30, y: 80 },
{ x: 100, y: 0 }
]
);
</script>
</body>
</html>
The output after the script is done:
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;">
<div style="width: 100%; height: 100%; position: relative;"><svg width="500" height="300"
style="fill: none; stroke: rgb(170, 221, 255); width: 500px; height: 300px; stroke-width: 2px; display: block; border-left: 1px solid black; border-bottom: 1px solid black;">
<path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"></path>
</svg>
<div
style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;">
<div data-value="0">0</div>
<div data-value="25">25</div>
<div data-value="50">50</div>
<div data-value="75">75</div>
<div data-value="100">100</div>
</div>
<div
style="position: absolute; top: 0px; left: -40px; width: 40px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;">
<div data-value="80">80</div>
<div data-value="60">60</div>
<div data-value="40">40</div>
<div data-value="20">20</div>
<div data-value="0">0</div>
</div>
</div>
This is the output.
And here the Fiddle:
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;"><div style="width: 100%; height: 100%; position: relative;"><svg width="500" height="300" style="fill: none; stroke: rgb(170, 221, 255); width: 500px; height: 300px; stroke-width: 2px; display: block; border-left: 1px solid black; border-bottom: 1px solid black;"><path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"></path></svg><div style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;"><div data-value="0">0</div><div data-value="25">25</div><div data-value="50">50</div><div data-value="75">75</div><div data-value="100">100</div></div><div style="position: absolute; top: 0px; left: -40px; width: 40px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;"><div data-value="80">80</div><div data-value="60">60</div><div data-value="40">40</div><div data-value="20">20</div><div data-value="0">0</div></div></div></div>
Why the SVG is not displayed?
Ok, the problem was that I used the wrong createElement function.
I used
let svg = document.createElement("svg");
but the correct way is
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
I have been trying to figure out how to place an SVG play button instead of a png, but I can't seem to figure it out. That's basically all I'm trying to do here. I've been trying different things but nothing has been working.
All help would be greatly appreciated.
https://jsfiddle.net/f6gvesLx/
Play SVG
<svg width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path></svg>
Below is the code format I'm using:
<style>
html, body {
height: 100%;
background: #000;
color: #fff;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.wrap {
max-width: 400px;
position: relative;
margin: auto;
border: 0px solid #5CB378;
}
.inner {
position: relative;
height: 0;
padding-bottom: 100%;
cursor: pointer;
background-color: black;
}
#thevideo, .image {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
background-color: #000000;
cursor: pointer;
overflow: hidden;
}
#thevideo iframe {
width: 100%;
height: 100%;
border: 0px;
}
.image {
background: url('http://via.placeholder.com/400x400');
background-size: cover;
border-radius: 50px;
}
.image:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url(https://i.imgur.com/WSlJUPf.png);
background-repeat: no-repeat;
background-size: 24.5% Auto;
background-position: 50% 50%;
}
<div class='outer'>
<div class='tcell'>
<div class='wrap'>
<div class='inner'>
<div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"> </div>
<div id='thevideo' style='display: none;'>
<iframe frameborder='0'id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe></div>
</div>
</div>
</div>
</div>
You are on the right path:
Remove the background image code from your css.
Then place your svg into your div that has the image class.
Then give the svg the image class as well.
Please refer to this JSFiddle that I forked: https://jsfiddle.net/0xehdwe7/
<div class='outer'>
<div class='tcell'>
<div class='wrap'>
<div class='inner'>
<div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<svg class="image" width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
</svg>
</div>
<div id='thevideo' style='display: none;'>
<iframe frameborder='0' id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe>
</div>
</div>
</div>
</div>
</div>