问固定SVG clippingPath

EN

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

.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%;
    }
}