title: Moving an SVG clip path
body: <p>I'm trying to get the svg clip path to move with the svg element, but the two seem to be attached. I'm basically looking to make a mouse moveable clip, and it needs to all be implemented in javascript. What's going on?</p>
  
  <pre><code>var clip = document.getElementById('svgPath');
  var goggles = document.getElementById('gogglesMain');
  var blur = document.getElementById('blur');
  var mouse = {x:100, y:100};
  
  //mouse listener to move goggles
  document.addEventListener('mousemove', mouseListen, false);
  
  function mouseListen(e){ 
     mouse.x = e.clientX || e.pageX; 
     mouse.y = e.clientY || e.pageY;
     gogglesMain.style.left = mouse.x - 300 + "px";
     gogglesMain.style.top = mouse.y - 100 + "px";
   }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/9n414sxs/" rel="nofollow">https://jsfiddle.net/9n414sxs/</a></p>