如何为SVG clip-path裁剪的元素添加保留透明效果的边框？

方案1：纯CSS多重投影模拟边框（无额外DOM改动） #

该方案完全不需要修改现有SVG结构，也不会破坏元素透明效果，仅需给目标类新增filter属性即可：

.btn_b {
    -webkit-clip-path: url(#myClip);
    clip-path: url(#myClip);
    /* 按需调整边框粗细（偏移值）和边框颜色 */
    filter: 
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff)
        drop-shadow(1px 1px 0 #ffffff)
        drop-shadow(-1px -1px 0 #ffffff)
        drop-shadow(1px -1px 0 #ffffff)
        drop-shadow(-1px 1px 0 #ffffff);
}

如果需要更粗的边框，把所有偏移值1px替换为对应粗细即可，比如要2px边框就全部换成2px。

方案2：SVG路径配合伪元素实现平滑边框 #

如果对边框平滑度要求更高，可复用现有裁剪路径生成边框，无需额外叠加裁剪层：

1. 先修改现有SVG结构，新增复用路径：

<svg 
    height="0" 
    width="0"
    viewBox="0 0 198.6 51.6"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Assets" fill="none">
        <defs>
            <clipPath id="myClip" clipPathUnits="objectBoundingBox" transform="scale(0.00503524672, 0.01937984496)">
                <path class="st0" d="M176.9,51.1H7.7c-4,0-7.2-3.2-7.2-7.2V7.7c0-4,3.2-7.2,7.2-7.2h183.1c4,0,7.2,3.2,7.2,7.2v22.2c0,1.9-0.8,3.8-2.1,5.1L182,49C180.7,50.4,178.8,51.1,176.9,51.1z"></path>
            </clipPath>
            <!-- 新增复用路径，和裁剪路径完全一致 -->
            <path id="clipBorder" d="M176.9,51.1H7.7c-4,0-7.2-3.2-7.2-7.2V7.7c0-4,3.2-7.2,7.2-7.2h183.1c4,0,7.2,3.2,7.2,7.2v22.2c0,1.9-0.8,3.8-2.1,5.1L182,49C180.7,50.4,178.8,51.1,176.9,51.1z" />
        </defs>
    </g>
</svg>

2. 新增伪元素样式渲染边框：

.btn_b {
    position: relative;
    -webkit-clip-path: url(#myClip);
    clip-path: url(#myClip);
}
.btn_b::before {
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    /* 按需调整边框粗细和颜色 */
    border: 2px solid #ffffff;
    -webkit-mask: url(#clipBorder) contain / 100% 100% no-repeat;
    mask: url(#clipBorder) contain / 100% 100% no-repeat;
}

内容的提问来源于stack exchange，提问作者Ross Anderson