SVG clipPath不显示及视频与SVG解耦技术咨询

一、修复无法生效的SVG ClipPath #

你提供的替换SVG存在几个关键问题，导致裁剪失效：

1. 错误嵌套结构：将<clipPath>放在<mask>标签内完全多余，clipPath应直接置于<defs>下
2. ID不匹配：原代码引用的裁剪ID是mask，但替换SVG的clipPath ID是cut-video，导致无法关联
3. 路径缩放异常：路径的transform设置了scale(0.1)，会让路径缩小到几乎不可见，超出视频显示区域
4. 动态尺寸未定义：width={width}和height={height}如果未传入有效变量，会导致SVG尺寸异常

修改后的可用SVG代码 #

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="100%"
    height="100%"
    viewBox="0 0 300 208"
    preserveAspectRatio="xMidYMid meet"
    style={{ position: "absolute" }}
>
    <defs>
        <clipPath id="mask">
            <!-- 如需保留transform，可调整scale数值让路径匹配视频尺寸，比如改成scale(0.5) -->
            <g fill="red" stroke="none">
                <path
                    d="M513 2046 c-201 -51 -368 -226 -450 -471 -23 -70 -26 -96 -26 -210 0
                    -114 3 -140 26 -210 70 -212 223 -360 427 -411 112 -28 236 -16 405 40 77 26
                    174 52 215 58 69 10 78 10 117 -10 51 -26 79 -72 131 -209 111 -290 301 -489
                    547 -570 68 -22 98 -26 200 -27 131 0 202 14 311 64 253 114 463 380 536 679
                    31 124 30 323 -1 441 -75 282 -280 493 -557 572 -112 32 -305 32 -417 0 -106
                    -30 -142 -50 -279 -152 -172 -130 -259 -155 -364 -106 -59 27 -102 75 -173
                    191 -95 156 -214 261 -356 315 -74 28 -215 36 -292 16z m298 -45 c129 -49 228
                    -136 335 -297 112 -169 171 -214 278 -214 82 0 149 30 271 123 144 109 186
                    133 281 158 102 27 287 30 386 6 269 -66 480 -274 560 -553 32 -110 32 -340 0
                    -456 -52 -192 -146 -352 -284 -484 -99 -95 -194 -155 -316 -197 -78 -28 -99
                    -31 -207 -32 -106 0 -130 3 -210 29 -157 52 -311 172 -414 324 -49 73 -79 133
                    -125 254 -44 115 -95 180 -154 195 -56 14 -147 -1 -287 -47 -221 -73 -302 -83
                    -424 -55 -109 26 -188 71 -268 150 -248 247 -242 661 14 945 151 167 367 225
                    564 151z"
                    transform="translate(0.000000,208.000000) scale(0.100000,-0.100000)"
                />
            </g>
        </clipPath>
    </defs>
</svg>

如果路径仍显示异常，可直接移除transform属性，重新导出适配视频尺寸的路径。

二、视频与SVG解耦方案 #

可以通过CSS的clip-path属性实现视频独立，无需嵌套在SVG的<foreignObject>中：

方案1：CSS引用SVG ClipPath #

1. 保留定义ClipPath的SVG（可放在页面任意位置，甚至隐藏）
2. 视频作为独立HTML元素，通过CSS设置裁剪规则

<section id="home" style="height: 100svh">
    <!-- 隐藏的SVG，仅用于定义ClipPath -->
    <svg style="position: absolute; width: 0; height: 0;">
        <defs>
            <clipPath id="video-mask">
                <!-- 这里放置你的裁剪路径 -->
                <path d="M0,370.6c-0.5,35,29.5,68,60,82.8c40.8,19.7,82.2,6.8,99.3,1.4c76-23.8,83.3-81.4,130.3-79.9c43.9,1.4,53.2,52.1,102.2,52.5
                    c38.6,0.3,67.2-30.9,79.9-44.6c44.4-48.3,49.5-116.9,33.1-165.5c-6-17.7-11.5-34.1-27.4-45.3c-30.9-22-62.5,2.7-96.2-16.2 c-27.9-15.7-17.7-39-44.8-68c-44.9-47.9-125.5-40.2-155.5-37.3C145.6,53.7,101.3,58,66.5,92c-43.9,42.9-46.3,107.1-46.8,120.2 c-1.7,45.2,14.1,62.2,1.4,103.6C12.1,345.6,0.3,348.8,0,370.6z"/>
                <path d="M373.8,89.9c2.7-4.9,14.3-24.5,37.4-30.2c5.6-1.4,18.5-4.6,30.9,2.2c18.8,10.2,20,33.9,20.2,38.1c0.1,3.2,0.6,21.6-8.6,25.9 c-6.9,3.3-13-4.5-24.5-1.4c-7.4,1.9-7.1,5.7-13.7,7.9c-12.5,4.2-32-3.2-39.6-18.7C371.2,103.7,372.8,94,373.8,89.9z"/>
                <path d="M432.1,133.8c-4.2,1.6-9.3,6-8.6,10.8c0.7,5.5,8.7,9.2,15.1,7.9c6.7-1.4,12.4-8.5,10.8-13.7 C447.7,133.4,438.5,131.3,432.1,133.8z"/>
            </clipPath>
        </defs>
    </svg>

    <!-- 独立的视频元素 -->
    <div class="video-container" style="width: 100%; height: 100%; position: relative;">
        <video
            autoPlay
            loop
            muted
            controls
            style="
                width: 100%;
                height: 100%;
                object-fit: cover;
                clip-path: url(#video-mask);
            "
        >
            <source src="vids/sample.mp4" type="video/mp4" />
            Your browser does not support the video playback
        </video>
    </div>
</section>

方案2：完全脱离SVG，使用CSS路径 #

将SVG路径转换为CSS支持的path()格式，直接写在CSS中，彻底不需要SVG标签：

.video-container video {
    clip-path: path('M0,370.6c-0.5,35,29.5,68,60,82.8c40.8,19.7,82.2,6.8,99.3,1.4c76-23.8,83.3-81.4,130.3-79.9c43.9,1.4,53.2,52.1,102.2,52.5 c38.6,0.3,67.2-30.9,79.9-44.6c44.4-48.3,49.5-116.9,33.1-165.5c-6-17.7-11.5-34.1-27.4-45.3c-30.9-22-62.5,2.7-96.2-16.2 c-27.9-15.7-17.7-39-44.8-68c-44.9-47.9-125.5-40.2-155.5-37.3C145.6,53.7,101.3,58,66.5,92c-43.9,42.9-46.3,107.1-46.8,120.2 c-1.7,45.2,14.1,62.2,1.4,103.6C12.1,345.6,0.3,348.8,0,370.6z M373.8,89.9c2.7-4.9,14.3-24.5,37.4-30.2c5.6-1.4,18.5-4.6,30.9,2.2c18.8,10.2,20,33.9,20.2,38.1c0.1,3.2,0.6,21.6-8.6,25.9 c-6.9,3.3-13-4.5-24.5-1.4c-7.4,1.9-7.1,5.7-13.7,7.9c-12.5,4.2-32-3.2-39.6-18.7C371.2,103.7,372.8,94,373.8,89.9z M432.1,133.8c-4.2,1.6-9.3,6-8.6,10.8c0.7,5.5,8.7,9.2,15.1,7.9c6.7-1.4,12.4-8.5,10.8-13.7 C447.7,133.4,438.5,131.3,432.1,133.8z');
}

注：CSS path()的兼容性需注意，现代主流浏览器均支持，如需兼容旧版浏览器可使用polygon()（仅适用于多边形路径）。

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