SVG全体をコンテナdiv内に完全にクリップしますか？

Question

私はそうのような容器内部のSVG要素を持っている：

<div class="container"> 
    <svg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2484.44 1971.36"> 
    <defs> 
    <style> 
    .cls-1 { 
     fill: none; 
    } 

    .cls-2 { 
     clip-path: url(#clip-path); 
    } 

    .orange { 
     fill: url(#radial-gradient); 
     transform: translate(0, -100vh); 
     fill: orange; 
    } 
    </style> 
    <clipPath id="clip-path"> 
     <rect class="cls-1" width="100%" height="100%" /> 
    </clipPath> 
    </defs> 
    <g class="cls-2"> 
     <circle cx="15.05" cy="1439.67" r="15.05" /> 
     <circle class="orange" cx="1498.76" cy="985.68" r="985.68" /> 
    </g> 
    </svg> 
</div> 

そしてそうのように私のCSS：

.container { 
    width: 100%; 
    height: 100vh; 
    background: lightgreen; 
} 

.svg { 
    background: pink; 
} 

私はそれをせずにアニメーションの周り私の要素を翻訳できるようにしたいと思いますコンテナボックスを越えて伸びる。具体的には、サークルをアニメーション化して、オフスクリーンからボックスにドロップします。 clipPathを作成しましたが、コンテナdivに一致するようにclipPathを取得できません。

Hereは私の問題を説明するフィドルです。この場合、緑色と一致するようにピンク色の領域が必要です。

これは可能ですか？ありがとうございました！

Answer 1

SVGでviewBoxを使用している場合は、コンテナと同期した状態になるように継続的に更新する必要があります。<div>幅と高さ。それ以外の場合は、常にスケーリングされます。あなたはjavascriptを使用してonresizeイベントを監視する必要があります。

また、viewBoxを削除して、SVGスケールが常に1：1になることを実感してください。

https://jsfiddle.net/3faz3vx6/5/