ターゲット要素の代わりにSVGクリップパスを原点に適用する方法

Question

SVG clipPathを、固定配置の別の背景divに適用しようとしています。 clip-pathは、元のSVG要素の正確な位置に留まり、それに応じてスクロール（または別の方法で変形）したときに動くようにしたいと思います。

代わりに、クリップパスがターゲット要素の原点を基準にして挿入され、すべての位置、スクロール、および変換が失われるということです。原点のプロパティを保持し、これらを別のdivに適用する方法はありますか？

以下の埋め込みスニペットでは、青い円はclip-pathを表示したい場所ですが、赤い円は表示されている場所です。

#container { 
 
    clip-path: url(#myClip); 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: red; 
 
} 
 

 
#offset-container { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 200px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-style: solid; 
 
    border-color: blue; 
 
}

<div id='container'> 
 

 
</div> 
 

 
<div id='offset-container'> 
 
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <clipPath id="myClip"> 
 
     <circle cx="50%" cy="50%" r="50%"/> 
 
    </clipPath> 
 
    </defs> 
 
    <circle cx="50%" cy="50%" r="50%" fill='blue' fill-opacity='0.5'/> 
 
</svg> 
 
</div>

JSFiddle：https://jsfiddle.net/shongololo/pa0qLs45/1/

Answer 1

これはFirefoxではなく、それは本当に奇妙なバグを示しクロム、で（ほぼ）動作します。

2つのdivが必要です：外側は相対的な位置にあり、クリップパスが移動するように定義されています。内側は固定されています。上/左/幅/高さの明示的な設定が必要であり、ビューポート座標を参照しているようです。

body { margin: 0 } 
 

 
#container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    top: 202px; /* border! */ 
 
    left: 202px; 
 
    clip-path: url(#myClip); 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
#fixed { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-color: red; 
 
} 
 

 
#offset-container { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 200px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid blue; 
 
}

<div id='container'> 
 
    <div id="fixed"></div> 
 
</div> 
 

 
<div id='offset-container'> 
 
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <clipPath id="myClip"> 
 
     <circle cx="50%" cy="50%" r="50%"/> 
 
    </clipPath> 
 
    </defs> 
 
    <circle cx="50%" cy="50%" r="50%" fill='blue' fill-opacity='0.5'/> 
 
</svg> 
 
</div>