I have my css hover working correctly and I can hard code the css class and get the html to use .active but I cannot get my pie slices to switch to active state upon click. Additionally, after I get this working, I want to be able to select multiple pie slices and capture the id's. I'm not that great with javascript so... be gentle with me :) page header
<!DOCTYPE html>
<html >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<style>
</style>
<script language="javascript" type="text/javascript">
/* this is for selecting and deselecting svg pie pieces
$('group_path').click(function() {
$(this).addClass('active').siblings().removeClass('active');
}); */
/* This is the javascript to select pie pieces */
// Get the container element
var group_pathContainer = document.getElementById("4");
var group_paths = group_pathContainer.querySelectorAll(".group_path");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < group_paths.length; i ) {
group_paths[i].addEventListener("click", function(e) {
var current = e.currentTarget;
// toggle active class to the current/clicked button
current.classList.toggle('active');
getActive();
});
}
// list all active pie segemnts
function getActive(){
let actives = document.querySelectorAll('.active');
let idArray = [];
actives.forEach(function(el,i){
let id = el.id;
idArray.push(id)
})
console.log(idArray)
}
</script>
svg
<svg viewBox='-1 -1 2 2' style='transform: scale(1.0); rotate(-90deg)';>
<g id="4" >
<g id="4.01" fill='rgb(84,161,229)' >
<path stroke='white' stroke-width='.0125px' d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 '></path>
<text d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 ' fill="none" x="0.9">Project</text>
</g>
<g id="4.02" fill='rgb(242,162,84)'>
<path stroke='white' stroke-width='.0125px' d='M 0.873262 0.487250 A 1 1 0 0 1 -0.147119 0.989119 L 0 0 '></path>
</g>
<g id="4.03" fill='rgb(237,110,133)' >
<path stroke='white' stroke-width='.0125px' d='M -0.147119 0.989119 A 1 1 0 0 1 -0.689114 0.724653 L 0 0 '></path>
</g>
<g id="4.04" fill='rgb(173,205,225)' >
<path stroke='white' stroke-width='.0125px' d='M -0.689114 0.724653 A 1 1 0 0 1 -0.915241 0.402907 L 0 0 '></path>
</g>
<g id="4.05" fill='rgb(187,221,147)' >
<path stroke='white' stroke-width='.0125px' d='M -0.915241 0.402907 A 1 1 0 0 1 -0.946085 0.323917 L 0 0 '></path>
</g>
<g id="4.06" fill='rgb(238,158,155)' >
<path stroke='white' stroke-width='.0125px' d='M -0.946085 0.323917 A 1 1 0 0 1 -0.978581 -0.205863 L 0 0 '></path>
</g>
<g id="4.07" fill='rgb(84,161,229)' >
<path stroke='white' stroke-width='.0125px' d='M -0.978581 -0.205863 A 1 1 0 0 1 -0.879316 -0.476238 L 0 0 '></path>
</g>
<g id="4.08" fill='rgb(108,190,191)'>
<path stroke='white' stroke-width='.0125px' d='M -0.879316 -0.476238 A 1 1 0 0 1 -0.527846 -0.849340 L 0 0 '></path>
</g>
<g id="4.09" fill='rgb(242,162,84)' >
<path stroke='white' stroke-width='.0125px' d='M -0.527846 -0.849340 A 1 1 0 0 1 0.056518 -0.998402 L 0 0 '></path>
</g>
<g id="4.10" fill='rgb(237,110,133)'>
<path stroke='white' stroke-width='.0125px' d='M 0.056518 -0.998402 A 1 1 0 0 1 0.543760 -0.839241 L 0 0 '></path>
</g>
<g id="4.11" fill='rgb(173,205,225)'>
<path stroke='white' stroke-width='.0125px' d='M 0.543760 -0.839241 A 1 1 0 0 1 0.711535 -0.702650 L 0 0 '></path>
</g>
<g id="4.12" fill='rgb(187,221,147)'>
<path stroke='white' stroke-width='.0125px' d='M 0.711535 -0.702650 A 1 1 0 0 1 0.724653 -0.689114 L 0 0 '></path>
</g>
<g id="4.13" fill='rgb(42,228,229)'>
<path stroke='white' stroke-width='.00625px' d='M 0.724653 -0.689114 A 1 1 0 0 1 1.000000 -0.000000 L 0 0 '></path>
</g>
<circle fill='#fff' cx='0' cy='0' r='0.80'/>
</g>
css
.group_path:hover{
/* fill: purple; */
transform: scale(.95, .95);
}
.group_path.active {
fill: purple;
transform: scale(.92, .92);
}
CodePudding user response：
Your active class doesn't have any effect since your path's fill attribute has a higher specificity.
change you css like so:
.active path{
fill: purple;
transform: scale(.92, .92);
}
To set a pi segment active or non-active you could use a classList.toggle() approach:
/* This is the javascript to select pie pieces */
// Get the container element
var group_pathContainer = document.getElementById("4");
var group_paths = group_pathContainer.querySelectorAll(".group_path");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < group_paths.length; i ) {
group_paths[i].addEventListener("click", function(e) {
var current = e.currentTarget;
// toggle active class to the current/clicked button
current.classList.toggle('active');
getActive();
});
}
// list all active pie segemnts
function getActive(){
let actives = document.querySelectorAll('.active');
let idArray = [];
actives.forEach(function(el,i){
let id = el.id;
idArray.push(id)
})
console.log(idArray)
}svg{
display:inline-block;
width:20em;
border: 1px solid #ccc
}
.active path{
fill: purple;
transform: scale(.92, .92);
}<svg viewBox='-1 -1 2 2' style='transform: scale(1.0); rotate(-90deg)' >
<g id="4">
<g id="4.01" >
<path fill='rgb(84,161,229)' stroke='white' stroke-width='.0125px' d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 '></path>
<text d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 ' fill="none" x="0.9">Project</text>
</g>
<g id="4.02" >
<path fill='rgb(242,162,84)' stroke='white' stroke-width='.0125px' d='M 0.873262 0.487250 A 1 1 0 0 1 -0.147119 0.989119 L 0 0 '></path>
</g>
<g id="4.03" >
<path fill='rgb(237,110,133)' stroke='white' stroke-width='.0125px' d='M -0.147119 0.989119 A 1 1 0 0 1 -0.689114 0.724653 L 0 0 '></path>
</g>
<g id="4.04" >
<path fill='rgb(173,205,225)' stroke='white' stroke-width='.0125px' d='M -0.689114 0.724653 A 1 1 0 0 1 -0.915241 0.402907 L 0 0 '></path>
</g>
</svg>Example 2: fill defined by group
/* This is the javascript to select pie pieces */
// Get the container element
var group_pathContainer = document.getElementById("4");
var group_paths = group_pathContainer.querySelectorAll(".group_path");
// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < group_paths.length; i ) {
group_paths[i].addEventListener("click", function(e) {
var current = e.currentTarget;
// toggle active class to the current/clicked button
current.classList.toggle('active');
getActive();
});
}
// list all active pie segemnts
function getActive(){
let actives = document.querySelectorAll('.active');
let idArray = [];
actives.forEach(function(el,i){
let id = el.id;
idArray.push(id)
})
console.log(idArray)
}svg{
display:inline-block;
width:20em;
border: 1px solid #ccc
}
.group_path.active {
fill: purple;
transform: scale(.92, .92);
}<svg viewBox='-1 -1 2 2' style='transform: scale(1.0); rotate(-90deg)' >
<g id="4">
<g id="4.01" fill='rgb(84,161,229)'>
<path stroke='white' stroke-width='.0125px' d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 '></path>
<text d='M 1.000000 0.000000 A 1 1 0 0 1 0.873262 0.487250 L 0 0 ' fill="none" x="0.9">Project</text>
</g>
<g id="4.02" fill='rgb(242,162,84)'>
<path stroke='white' stroke-width='.0125px' d='M 0.873262 0.487250 A 1 1 0 0 1 -0.147119 0.989119 L 0 0 '></path>
</g>
<g id="4.03" fill='rgb(237,110,133)'>
<path stroke='white' stroke-width='.0125px' d='M -0.147119 0.989119 A 1 1 0 0 1 -0.689114 0.724653 L 0 0 '></path>
</g>
<g id="4.04" fill='rgb(173,205,225)'>
<path stroke='white' stroke-width='.0125px' d='M -0.689114 0.724653 A 1 1 0 0 1 -0.915241 0.402907 L 0 0 '></path>
</g>
</svg>CodePudding user response：
Both examples that @herrstrietzel provided work.
I have my javascript tags in the wrong location. Once I moved them just above everything worked perfect!