SVG百分比坐标不生效？响应式背景裁剪求助

核心问题修正 #

坐标不响应的根源是SVG clipPath 默认采用 userSpaceOnUse 单位（基于SVG自身坐标系），改为 objectBoundingBox 后，路径坐标会以被裁剪元素的边界框为基准（0对应0%，1对应100%），完美适配响应式需求。

复刻镂空效果的实现代码 #

1. 修改后的SVG代码

<svg viewBox="0 0 1 1" preserveAspectRatio="none" width="0" height="0">
    <defs>
        <clipPath id="bgClip" clipPathUnits="objectBoundingBox">
            <!-- 先绘制覆盖整个元素的矩形，再叠加三角区域实现镂空 -->
            <path d="M0,0 L1,0 L1,1 L0,1 L0,0 
                     M0.4385,0 L0.7755,0 L0.607,0.2995 Z" fill-rule="evenodd"/>
        </clipPath>
    </defs>
</svg>

• viewBox="0 0 1 1" 配合 clipPathUnits="objectBoundingBox"，让路径坐标直接对应元素的百分比比例
• fill-rule="evenodd" 规则会让矩形与三角的重叠区域（即三角部分）被镂空
• 设置 width="0" height="0" 隐藏SVG本身，仅复用其定义的裁剪路径

2. 调整后的CSS代码

.full_screen_slider_block .swiper .bg_image {
    width: 100%;
    height: 100%;
    clip-path: url(#bgClip);
    /* 确保背景图自适应容器 */
    background-size: cover;
    background-position: center center;
}

关键说明 #

• 所有路径坐标已转换为0-1区间的相对值，对应元素的百分比，完全适配不同尺寸的容器
• 通过矩形+三角的路径组合，精准复刻右上角镂空效果
• SVG无需额外占位，仅作为裁剪规则的载体存在

内容的提问来源于stack exchange，提问作者Lewis Hardisty