SVG（带剪辑路径）在页面中显示为空白

Question

我正在尝试创建一个图片库，其中的图片被剪裁成各种形状。我用几个 svg 路径尝试了下面的代码，但我在所有浏览器中都得到了一个空白页面（在 chrome、firefox、IE 和 edge 中测试）

.arch{
      -webkit-clip-path:url(#clipArch);
       clip-path: url(#clipArch);
}

<div class="col-md-4">
                    <img class="arch" src="https://picsum.photos/200">
                    <svg width="100%" height="100%">
                        <defs>
                            <clipPath id="clipArch" clipPathUnits="objectBoundingBox">
                                <path class="st0" d="M920,917.48c0,11.63-9.43,21.05-21.05,21.05H183.18c-11.63,0-21.05-9.43-21.05-21.05V517.49
            c0-209.28,169.66-378.94,378.94-378.94S920,308.21,920,517.49V917.48z"/>
                            </clipPath>
                        </defs>
                    </svg> 
</div>

Answer 1

objectBoundingBox 单位从 0 到 1，但您的路径的 d 属性不是，所以这显然行不通。
当我们删除它（以便使用 userSpaceOnUse 单位）时，clipPath 仍然没有真正覆盖形状，所以我通过变换缩放和移动它，所以它主要适合你试图剪辑的图像.

.arch{
      -webkit-clip-path:url(#clipArch);
       clip-path: url(#clipArch);
}

<div class="col-md-4">
                    <img class="arch" src="https://picsum.photos/200">
                    <svg width="0" height="0">
                                                                            <defs>
                            <clipPath id="clipArch">
<path class="st0" transform="scale(0.25) translate(-160, -130)" d="M920,917.48c0,11.63-9.43,21.05-21.05,21.05H183.18c-11.63,0-21.05-9.43-21.05-21.05V517.49
            c0-209.28,169.66-378.94,378.94-378.94S920,308.21,920,517.49V917.48z"/>

                            </clipPath>
                        </defs>
                    </svg> 
</div>

SVG（带剪辑路径）在页面中显示为空白

SVG (with clip-path) appears blank in page

svg

clip-path