移动 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 也会移动 [=25] 的剪切区域=] 你正在用它剪辑。

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

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

例如，下面的演示几乎有效。

Demo here

移动 SVG 剪辑路径

Moving an SVG clip path

svg

transform

clip

clip-path