移动 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

我不清楚您到底要做什么，但听起来您认为移动包含<clipPath> 的 SVG 也会移动您正在使用它进行剪辑的 div 的剪辑区域。

事实并非如此。您从 CSS 中使用的任何 clipPath 都完全独立于它所属的 SVG 的位置。您只是从中借用了 clipPath 定义。

如果你想改变被剪裁的区域，你必须移动 clipPath 本身。不幸的是，目前这似乎并不可靠。

例如，下面的演示几乎可以工作。

Demo here