Перемещение пути клипа SVG

Question

Я пытаюсь получить путь к клику svg для перемещения с элементом svg, но эти два, кажется, прикреплены. Я в основном ищут движок для перемещения мышью, и он должен быть реализован в javascript. Что происходит?

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

Я не ясно, что именно вы пытаетесь сделать, но это звучит, как вы думаете, что перемещение SVG, который содержит <clipPath>, также будет двигаться обрезанную область из div вы обрезаете его.

Это не так. Любой clipPath, который вы используете из CSS, полностью не зависит от положения SVG, частью которого он является. Вы просто заимствуете определение clipPath.

Если вы хотите изменить обрезаемую область, вам придется переместить сам клип. К сожалению, на данный момент это не кажется надежным.

Например, следующее демо практически работ.

Demo here