css - 修复了 SVG clippingPath

Question

我正在尝试使用 SVG 创建一个固定的剪贴蒙版。此掩码必须具有 position: fixed，因为我希望它随浏览器滚动。

我有以下 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)，因此它不会在浏览器中滚动。

这有什么办法吗？我需要它是 SVG，因为我想在某个点将形状转换为矩形。

Answer 1

您是否尝试过修复 <img 的位置？ > 只是对其应用剪切路径或 mask ？应用于 HTML 元素的掩码和剪切路径通常在使用 objectBoundingBox 定义时效果最佳。坐标。