固定SVG clippingPath

我試圖創建一個固定剪貼蒙版使用SVG。這個面具必須有position: fixed，因爲我希望它可以隨瀏覽器一起滾動。固定SVG clippingPath

我有以下的HTML/SVG和SCSS：

<div class="table"></div> 
<div class="clipping-mask"> 
    <svg> 
     <defs> 
      <clipPath id="clipping"> 
       <circle cx="50%" cy="15%" r="15%" /> 
      </clipPath> 
     </defs> 
    </svg> 
</div>

SCSS：

.table { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url("../images/table.jpg"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 

    clip-path: url(#clipping); 
} 
.clipping-mask { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 

    svg { 
     width: 100%; 
     height: 100%; 
    } 
}

上面的代碼正確剪輯的背景，只顯示了位於圓圈內。唯一的問題是它不是固定的（如CSS position: fixed），因此它不會在瀏覽器中滾動。

Preview