JSFiddle - React, Tailwind, and code Playground

by hughes

HTML

<p>
  <label for="v1"><input type="checkbox" id="v1" value="v1" name="v1" />v1</label>
  <label for="v2"><input type="checkbox" id="v2" value="v2" name="v2" />v2</label>
  <label for="intersection"><input type="checkbox" id="intersection" value="intersection" name="intersection" />intersection</label>
  <label for="diff"><input type="checkbox" id="diff" value="diff" name="diff" />diff</label>
</p>
<svg id="svg_v1" height="250" width="250" xmlns="http://www.w3.org/2000/svg">
  <g id="layer1">
    <path
       style="fill:#000000"
       d="m 201,119 c 0,39.21222 -32.2355,71 -72,71 -39.764502,0 -72,-31.78778 -72,-71 0,-39.212217 32.235498,-71 72,-71 39.7645,0 72,31.787783 72,71 z"
       id="path2985" />
  </g>
</svg>
<svg id="svg_v2" height="250" width="250" xmlns="http://www.w3.org/2000/svg">
  <g id="layer1">
    <path
      style="fill:#000000"
       d="m 201,119 c 0,39.21222 -32.2355,71 -72,71 -39.764502,0 -72,-31.78778 -72,-71 0,-39.212217 32.235498,-71 72,-71 8.30042,0 9.98707,20.813633 17.40666,23.362166 6.18205,2.12345 18.26606,-14.373953 23.55063,-10.763243 C 188.71485,73.415123 201,94.792812 201,119 z"
       id="path2985"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="sssssss" />
  </g>
</svg>
<svg id="svg_intersection" height="250" width="250" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="svg_exclude" height="250" width="250" xmlns="http://www.w3.org/2000/svg"></svg>

CSS

svg {
/*   position: absolute;
  left: 0; */
}

JavaScript

var v1 = $('#svg_v1')
var v2 = $('#svg_v2')
var v1_g = $('<g id="v1_g">')
var v2_g = $('<g id="v2_g">')
v1_g.append(v1.children().clone());
v2_g.append(v2.children().clone());
$('#svg_intersection').append(v1_g);
$('#svg_intersection').append(v2_g);
$('#svg_intersection').append("<use id='use1' xlink:href='#v1_g' x='25' y='-25' transform='scale(2)'></use>");
$('body').html($('body').html());