Moving an SVG clip path

Question

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?

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";
 }

https://jsfiddle.net/9n414sxs/

Answer 1

I'm not clear on exactly what you are trying to do, but it sounds like you think that moving the SVG, that contains a <clipPath>, will also move the clipped area of the div you are clipping with it.

That is not the case. Any clipPath that you are using from CSS is totally independent of the position of the SVG that it is a part of. You are just borrowing the clipPath definition from it.

If you want to change the area that's clipped, you would have to move the clipPath itself. Unfortunately, that doesn't seem to be reliable at the moment.

For example, the following demo almost works.

Demo here