svg select/deselect

by Stalk

HTML

<form action="">
  <label><input type="checkbox" name="fig" value="ball">ball</label>
  <label><input type="checkbox" name="fig" value="square">square</label>
  <label><input type="checkbox" name="fig" value="star">star</label>
</form>

<svg viewBox="0 0 300 300" width="300" id="svg">
  <circle id="ball" />
  <rect width="40" height="40" id="square" />
  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" fill="red" id="star" />
</svg>

CSS

svg {
  background: white;
}
circle {
  fill: tomato;
  opacity: 0.5;
  r: 20;
  cx: 50;
  cy: 50;
}
rect {
  x: 150;
  y: 30;
  fill: lime;
}
.active, svg > *:hover {
  fill: orange;
  opacity: 0.9;
  stroke: black;
  stroke-width: 2;
}

JavaScript

$('input[name="fig"]').on('change', function(){
	$('#' + this.value).toggleClass('active', this.checked)
})

$('svg *').on('click', function(){
	$('input[value="'+this.id+'"]').click().change()
})