1

我试图让 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/

4

1 回答 1

2

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

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

如果要更改被剪切的区域，则必须移动 clipPath 本身。不幸的是，目前这似乎并不可靠。

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

演示在这里

于 2015-04-10T17:35:27.787 回答