Add a tick selected css - javascript

.showcase-components-colorlist color {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
<div class="showcase-components-colorlist color">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
How to add a check mark to one of the circles as generated by the code above.


One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.
.showcase-components-colorlist {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.showcase-components-colorlist.selected::before {
content: '✅';
position: absolute;
left: 11px;
top: 9px;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
</circle>
</svg>
</div>
<div class="showcase-components-colorlist selected">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>


Create your own <svg-option> Native JavaScript Web Component.
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
creates:
<script>
customElements.define("svg-option",class extends HTMLElement{
connectedCallback(){
this.style.display = "inline-block";
this.innerHTML=`<svg viewBox="0 0 50 50">
<circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
<circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
</svg>`;
this.select();
this.onclick = (evt) => this.toggle();
}
select(state = this.hasAttribute("selected")) {
this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
}
toggle(){
this.select( this.toggleAttribute("selected") );
}
})
</script>
<style>
svg-option {
--svg-option-size:180px;
width: var(--svg-option-size);
height: var(--svg-option-size);
cursor: pointer;
}
svg-option[selected]{
background:lightgreen;
}
svg-option:not([selected]){
background:pink;
}
</style>
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>

Related

Add border around svg sitemap

What do i have to do to get a border around my sitemap?
I have made a sitemap and i'd like to add a border around the elements just to give it a bit more character and less bland.
<style>
#svgJS g:hover polyline,
#svgJS g:hover line {
fill: none;
stroke-width: 2;
stroke: black;
}
#svgJS g:hover g text,
#svgJS g:hover text {
font-weight: bold;
}
#svgJS g:hover polygon,
#svgJS g:hover rect,
#svgJS g:focus polygon,
#svgJS g:focus rect {
fill: pink;
stroke: blue;
stroke-width: 2;
}
h1 {
font-family: sans-serif;
<!--text-align: centre;-->
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #0000FF;
}
a:hover {
color: grey;
}
a:
.container {
margin: auto;
}
header {
position: sticky;
top: 0;
}
</style>
<svg style="text-align:center" id="svgJS" height="1920" width="1280">
<g id="GROUPONE">
<rect x="375" y="10" height="50" width="150"
stroke="#0000FF" fill="none" stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="41"
font-family="Sans-Serif" text-anchor="middle">
Main Page</text>
</g>
<g id="groupId2">
<line id="shapeId2" stroke="#0000FF" stroke-width="2"
x1="450" y1="60" x2="450" y2="110"></line>
<polyline points="455, 105 450, 110 445, 105"
stroke="#0000FF" stroke-width="2" fill="none" />
</g>
<g id="groupId3" >
<rect x="375" y="110" height="50"
width="150" stroke="#0000FF" fill="none"
stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="141"
font-family="Sans-Serif" text-anchor="middle">
Query form</text></g>

you can wrap your svg with a div tag and give it a border with CSS
<div class='myClassName'>
<SVG/>
<div>
then on your CSS
.myClassName {
border: 2px solid black;
}

I'm not sure what you're really looking for but I hope this answers your question.
Simply apply border style to the svg. like so:
/* ADDED THIS LINE */
svg {
border: 1px solid #ff0000
}
#svgJS g:hover polyline,
#svgJS g:hover line {
fill: none;
stroke-width: 2;
stroke: black;
}
#svgJS g:hover g text,
#svgJS g:hover text {
font-weight: bold;
}
#svgJS g:hover polygon,
#svgJS g:hover rect,
#svgJS g:focus polygon,
#svgJS g:focus rect {
fill: pink;
stroke: blue;
stroke-width: 2;
}
h1 {
font-family: sans-serif;
<!--text-align: centre;
-->
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #0000FF;
}
a:hover {
color: grey;
}
a: .container {
margin: auto;
}
header {
position: sticky;
top: 0;
}
<svg style="text-align:center" id="svgJS" height="1920" width="1280">
<g id="GROUPONE">
<rect x="375" y="10" height="50" width="150"
stroke="#0000FF" fill="none" stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="41"
font-family="Sans-Serif" text-anchor="middle">
Main Page</text>
</g>
<g id="groupId2">
<line id="shapeId2" stroke="#0000FF" stroke-width="2"
x1="450" y1="60" x2="450" y2="110"></line>
<polyline points="455, 105 450, 110 445, 105"
stroke="#0000FF" stroke-width="2" fill="none" />
</g>
<g id="groupId3" >
<rect x="375" y="110" height="50"
width="150" stroke="#0000FF" fill="none"
stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="141"
font-family="Sans-Serif" text-anchor="middle">
Query form</text></g>

Start css animation only when button clicked for multiple div overlapping each other

I have a few different content(div) overlapping each other in one place. I wanted to have a fade in animation when i click the trigger to show the desired content. But the animation is only play when the page is onload and would never play again if i trigger another content.
HTML code:
<div id="content">
<div class="content1 sq" id="square"></div>
<div class="content2 sq" id="square"></div>
<div class="content3 sq" id="square"></div>
</div>
CSS code:
#square{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
Javascript:
var slideIndex = 1;
showDivs(slideIndex);
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("sq");
var dots = document.getElementsByClassName("click");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.visibility = "hidden";
}
x[slideIndex-1].style.visibility = "visible";
}
The code showed above is not the full code as the button to change to different content is through a SVG.
Please refer the link for the full code.
https://codepen.io/lemon55699/pen/bGVrMXz

If you only want to change the background color on click, then just get the fill color from clicked item and then apply the same background color on your square. like this.
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});
var slideIndex = 1;
// showDivs(slideIndex);
// function currentDiv() {
// var element = this,
// style = getComputedStyle(element),
// top = style.getPropertyValue('color');
// }
$(document).ready(function(){
$('.click').click(function(){
var bgColor = $(this).css('fill');
$('#square').css('background-color' , bgColor);
});
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.content1{
position: absolute;
top: 50px;
right: 10px;
width: 200px;
height: 200px;
border: 3px solid green;
fill: green;
background-color: green;
}
.content2{
position: absolute;
right: 10px;
top: 60px;
width: 180px;
height: 180px;
border: 3px solid yellow;
background-color: yellow;
}
.content3{
position: absolute;
right: 10px;
top: 70px;
width: 160px;
height: 160px;
border: 3px solid red;
background-color: red;
}
#square{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 click" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 click" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 click" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 click" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 click" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 click" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 click" cx="267.39" cy="61.66" r="50" >
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 click" cx="371.06" cy="121.51" r="50" />
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 click" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq" id="square"></div>
</div>
but as you mentined in comment, if you want to change the whole square with its properties and text and other stuff, then do it something like this, you need to create a relation between the clicked item and the square box, and show only reated item and not others. Like this,
let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
angleIncrement = 360 / circles.length;
circles.forEach(function(circle, index) {
circle.addEventListener("click", function() {
gsap.to(".wheel", {
rotation: (index * angleIncrement) + "_short",
duration: 1,
ease: "power1.inOut"
});
});
});
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});
$(document).ready(function(){
$('.circle').click(function(){
var relation = $(this).data('relation');
var squareReltedToClick = $("#content").find('#' + relation);
$('.sq').removeClass('active');
squareReltedToClick.addClass('active');
var bgColor = $(this).css('fill');
$('.sq').css('background-color', bgColor);
});
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.sq{
position: absolute;
top: 50px;
right: 90px;
width: 200px;
height: 200px;
border: 3px solid green;
fill: green;
background-color: #00FF00;
opacity: 0;
text-align:center;
color: #fff;
font-size: 40px;
}
.sq.active {opacity:1;}
.sq.active{
opacity: 1;
animation: fade 3s linear;
}
#keyframes fade{
0% {opacity: 0}
100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
<g class="wheel">
<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
<g id="stick9">
<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50"/>
</g>
<g id="stick8">
<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50"/>
</g>
<g id="stick7">
<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50"/>
</g>
<g id="stick6">
<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50"/>
</g>
<g id="stick5">
<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50"/>
</g>
<g>
<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50"/>
</g>
<g id="stick3">
<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50"/>
</g>
<g id="stick2">
<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50"/>
</g>
<g id="stick1">
<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50" />
</g>
</g>
</svg>
<div id="content">
<div class="content1 sq active" id="square1">I am number 1</div>
<div class="content2 sq" id="square2">I am number 2</div>
<div class="content3 sq" id="square3">I am number 3</div>
<div class="content4 sq" id="square4">I am number 4</div>
<div class="content5 sq" id="square5">I am number 5</div>
<div class="content6 sq" id="square6">I am number 6</div>
<div class="content7 sq" id="square7">I am number 7</div>
<div class="content8 sq" id="square8">I am number 8</div>
<div class="content9 sq" id="square9">I am number 9</div>
</div>
I have changed some CSS properties for demo purpose, change these as per your need.

With a SVG circle, how to position the starting point?

I'm working to create an SVG circle progress indicator in react... Here is my output:
CODEPEN
The problem is I need the red stroke to start at the top, not at the current 90% angle... Is there some CSS I can add to reposition the red stroke to start at the top?
FYI, I'm using the following component in react to render this HTML: https://github.com/wmartins/react-circular-progress/blob/gh-pages/src/js/components/CircularProgress.jsx.js
codepen source below
html
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>
css
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0 50%);
}

You could use transform, add transform="rotate(-90 25 25)" and it will start at the top
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0 50%);
}
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle transform="rotate(-90 25 25)" class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-startOffest: 50%;stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>
If to use CSS, you can rotate the svg element instead of the circle (which might or might not be possible based on its shape)
.CircularProgress {
transform: rotate(-90deg);
}
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0, 50%);
}
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>

is it possible to change color of png image in svg element by css or javascript?

codepen-mydemo
.icon {
display: inline-block;
width: 80px;
height: 80px;
overflow: hidden;
}
.icon-del {
background: url("http://i1.piimg.com/567571/220defbd8306acf8.png") no-repeat center;
}
.icon > .icon {
position: relative;
left: -80px;
border-right: 80px solid transparent;
-webkit-filter: drop-shadow(80px 0);
filter: drop-shadow(rgb(204, 51, 255) 80px 0);
}
.imgicon1 {
-webkit-filter: drop-shadow(80px 0);
filter: drop-shadow(rgb(204, 51, 255) 80px 0);
}
<p><strong>origin icon</strong>
</p>
<i class="icon icon-del"></i>
<p><strong>after change icon color</strong>
</p>
<i class="icon"><i class="icon icon-del"></i></i>
<br />
<br />
<p>can i use the same way to change the icon color in svg image below</p>
<svg x=200 y=200 width=500 height=500>
<defs>
<filter id="f1" x="0" y="0" width="100%" height="100%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
<filter id="f2" x="0" y="0" width="100%" height="100%">
<feImage result="sourc12eTwo" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" preserveAspectRatio="xMidYMid slice" />
<!-- <feOffset result="offO12ut" dx="0" dy="0" fill="red"/>
<feOffset in="SourceGraphic" dx="60" dy="60" color="red"/> -->
<!-- <feFlood flood-color="red" flood-opacity="1" result="offsetColor"/> -->
<!-- <feFlood flood-color="rgb(20, 0, 0)" result="color"/> -->
<!-- <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> -->
<!-- <feBlend in="SourceGraphic" in2="offOut" mode="normal" /> -->
<!-- <feComposite in="SourceGraphic" in2="sourceTwo" operator="arithmetic" k1="0" k2=".5" k3=".7" k4="0"/> -->
</filter>
</defs>
<image filter="url(#f1)" class="imgicon1" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" />
<!-- <image class="imgicon2" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" class="testicon" x=200 y=0 /> -->
<rect x=300 y=0 width="80" height="80" filter="url(#f2)" />
</svg>
we can change color of png in HTML by changing drop-shadow(css3 filter)'color of the element.
so i wonder if i can change the color of png referenced in svg(image tag) by the same way.
after reading the related svg filter API on MDN,i found there is no way to change color of drop-shadow like above.
is there any good solution to solve this problem?

You can change the color of an image by using an feColorMatrix filter.
.icon {
display: inline-block;
width: 80px;
height: 80px;
overflow: hidden;
}
.icon-del {
background: url("http://i1.piimg.com/567571/220defbd8306acf8.png") no-repeat center;
}
.icon > .icon {
position: relative;
left: -80px;
border-right: 80px solid transparent;
-webkit-filter: drop-shadow(80px 0);
filter: drop-shadow(rgb(204, 51, 255) 80px 0);
}
.imgicon1 {
-webkit-filter: drop-shadow(80px 0);
filter: drop-shadow(rgb(204, 51, 255) 80px 0);
}
.imgicon2 {
-webkit-filter: url(#f2);
filter: url(#f2);
}
<p><strong>origin icon</strong>
</p>
<i class="icon icon-del"></i>
<p><strong>after change icon color</strong>
</p>
<i class="icon"><i class="icon icon-del"></i></i>
<br />
<br />
<p>can i use the same way to change the icon color in svg image below</p>
<svg x=200 y=200 width=500 height=500 color-interpolation-filters="sRGB">
<defs>
<filter id="f1" x="0" y="0" width="100%" height="100%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
<filter id="f2" x="0" y="0" width="100%" height="100%">
<feColorMatrix type="matrix" values="0 0 0 0 0.82
0 0 0 0 0.21
0 0 0 0 1
0 0 0 1 0" />
</filter>
</defs>
<image filter="url(#f1)" class="imgicon1" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" x="0" y="0" height="100" width="100"/>
<image class="imgicon2" xlink:href="http://i1.piimg.com/567571/220defbd8306acf8.png" class="testicon" x="200" y="0" height="100" width="100" />
</svg>

How do i make a button that will keep changing the light each time i press it for a traffic light?

i need my code to keep changing the lights. each time i press the button i want the traffic light to display red then red and yellow together then green only and i want this process to repeat each time i press the button. i need help for this. so far i have got this code.
<!DOCTYPE html>
<html>
<head>
<title>Traffic Light</title>
</head>
<body>
<h1>Traffic Light</h1>
<p>Click the button for light to change.</p>
<div
style="width:100.5px;height:320px;border:3px solid #000;">
<button onclick=circle2.style.fill="yellow";><Change Lights
<button onclick=circle1.style.fill="transparent";><Change Lights
<button onclick=circle2.style.fill="transparent";><Change Lights
<button onclick=circle3.style.fill="green";>Change Lights
</button>
<svg id="svg1" style="width: 3.5in; height: 1in">
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg2" style="width: 3.5in; height: 1in">
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg3"style="width: 3.5in; height: 1in">
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</script>
</div>
</body>
</html>
can you please help me find the solution for my work
thank you.

Try this
<p>Click the button for light to change.</p>
<div
style="width:100.5px;height:420px;border:3px solid #000;">
<button onclick='circle2.style.fill="yellow"'>Change Lights</button>
<button onclick='circle1.style.fill="transparent"'>Change Lights</button>
<button onclick='circle2.style.fill="transparent"'>Change Lights</button>
<button onclick='circle3.style.fill="green"'>Change Lights</button>
<svg id="svg1" style="width: 3.5in; height: 1in">
<circle id="circle1" r="40" cx="50" cy="50" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg2" style="width: 3.5in; height: 1in">
<circle id="circle2" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
<svg id="svg3"style="width: 3.5in; height: 1in">
<circle id="circle3" r="40" cx="50" cy="50" style="fill: transparent; stroke: black; stroke-width: 2"/>
</svg>
</div>

Try this:
var circle = document.getElementById('circle');
var colors = ['red', 'yellow', 'green'];
var index = 0;
document.getElementById('traffic').onclick = function() {
index++;
if (index == colors.length) {
index = 0;
}
circle.style.fill = colors[index];
};
<button id="traffic">Change Lights</button>
<svg id="svg" style="width: 3.5in; height: 1in">
<circle id="circle" r="40" cx="50" cy="50" style="fill: red; stroke: black; stroke-width: 2"/>
</svg>

Categories

Resources