如何实现SVG形状反转后方内容？当前代码仅反转内部矩形

要实现SVG形状区域反转后方任意内容的效果，核心是正确使用遮罩（mask）和混合模式（mix-blend-mode），以下是修正后的代码：

<svg width="800px" height="600px">
    <defs>
        <!-- 定义遮罩：创建圆角边框的形状（白色显示，黑色隐藏） -->
        <mask id="border-mask">
            <!-- 填充黑色的圆角矩形（中间区域隐藏） -->
            <rect width="700" height="80" rx="40" fill="black"/>
            <!-- 描边白色的圆角矩形（边框区域显示） -->
            <rect x="1.5" y="1.5" width="697" height="77" rx="38.5" fill="none" stroke="white" stroke-width="3"/>
        </mask>

        <!-- 可选：精准反色滤镜 -->
        <filter id="invert">
            <feComponentTransfer>
                <feFuncR type="table" tableValues="1 0"/>
                <feFuncG type="table" tableValues="1 0"/>
                <feFuncB type="table" tableValues="1 0"/>
            </feComponentTransfer>
        </filter>
    </defs>

    <!-- 后方内容：可替换为任意元素 -->
    <rect width="700" height="80" fill="yellow"/>

    <!-- 反转区域：白色矩形 + 遮罩 + 混合模式 -->
    <rect width="700" height="80" fill="white" mask="url(#border-mask)" mix-blend-mode="difference"/>

    <!-- 若用滤镜替代混合模式，可替换为：
    <rect width="700" height="80" fill="black" mask="url(#border-mask)" filter="url(#invert)" mix-blend-mode="multiply"/>
    -->
</svg>

关键修正点： #

• 修正遮罩逻辑：遮罩遵循「白色区域显示，黑色区域隐藏」规则，用黑色填充中间矩形隐藏内部，白色描边保留边框形状，确保只有目标区域生效。
• 简化SVG结构：移除冗余嵌套<svg>标签，用单个<rect>替代，减少代码复杂度。
• 混合模式精准应用：mix-blend-mode: difference让白色元素与后方颜色生成补色，直接实现反转效果，无需额外滤镜叠加。
• 清理冲突属性：移除原代码中重复的filter属性，避免样式冲突导致效果异常。

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