1

svg要素で移動するsvgクリップパスを取得しようとしていますが、2つが接続されているようです。私は基本的にマウスの可動クリップを作成しようとしていますが、すべて 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

何をしようとしているのか正確にはわかりませんが、 を含む SVG を移動すると、<clipPath>クリッピングしている div のクリッピング領域も移動すると思われるようです。

そうではありません。CSS から使用している clipPath は、それが属する SVG の位置から完全に独立しています。そこからclipPath定義を借りているだけです。

クリップされた領域を変更したい場合は、clipPath 自体を移動する必要があります。残念ながら、現時点では信頼できるものではないようです。

たとえば、次のデモはほとんど機能します。

デモはこちら

于 2015-04-10T17:35:27.787 に答える