Donuts

Change class name on click in jQuery

by jrdiaz

HTML

<div>
  Mask (Breaks on radius change)<br/>
  https://stackoverflow.com/a/22581434/1680125</br>
  <svg id="svg1" width="250" height="250">
    <defs>
      <mask id="hole">
        <rect width="100%" height="100%" fill="white"/>
        <circle r="50" cx="100" cy="100" fill="black"/>
      </mask>
    </defs>

    <circle id="donut" r="100" cx="100" cy="100" mask="url(#hole)" />

  </svg>
  <br/><input type="range" min="1" max="100" value="50" class="slider" id="slider1" rel="svg1">
</div>

<div>
  ClipPath (Works on radius change because of "objectBoundingBox")<br/>
  https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/</br>
  <svg id="svg2" xmlns='http://www.w3.org/2000/svg' width='250' height='250'> 
    <clipPath id="doughnut-path" clipPathUnits="objectBoundingBox"> 
      <path d='M0,0.5 A0.5,0.5 0,1,1 1,0.5 A0.5,0.5 0,1,1 0,0.5 z 
             M0.25,0.5 A0.25,0.25 0,1,1 0.75,0.5 A0.25,0.25 0,1,1 0.25,0.5 z' 
             clip-rule='evenodd'/> 
    </clipPath>
    <circle id="donut" r="50" cx="100" cy="100" clip-path="url(#doughnut-path)" />
  </svg>
  <br/><input type="range" min="10" max="100" value="50" class="slider" id="slider2" rel="svg2">
</div>

CSS

svg {
  background: red;
}

circle {
  fill: blue;
}

JavaScript

$('input[type="range"]').on('change input', function(evt) {
	var slider = $(evt.target);
	var val = slider.val();
  $('#' + slider.attr('rel') + ' circle').attr('r', val);
});