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定义。

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

例如，以下演示几乎有效。

Demo here

移动SVG剪辑路径

1 个答案: