Déplacement d'un tracé de clip SVG

Question

J'essaye de faire bouger le clip svg avec l'élément svg, mais les deux semblent être attachés. Je cherche essentiellement à faire un clip mobile de la souris, et il doit être mis en œuvre en JavaScript. Que se passe-t-il?

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

Je ne comprends pas exactement ce que vous essayez de faire, mais il semble que vous pensez que le déplacement du SVG, qui contient un <clipPath>, se déplace également la zone écrêtée du div vous êtes en train de couper avec.

Ce n'est pas le cas. Tout clipPath que vous utilisez de CSS est totalement indépendant de la position du SVG dont il fait partie. Vous ne faites qu'emprunter la définition de clipPath.

Si vous souhaitez modifier la zone tronquée, vous devez déplacer le clipPath lui-même. Malheureusement, cela ne semble pas être fiable pour le moment.

Par exemple, la démo suivante fonctionne presque.

Demo here