如何在浏览器中用clip-path实现SVG文字裁剪效果？解决空白显示问题

SVG的<clipPath>不支持直接使用<text>元素作为裁剪路径的组成部分，浏览器无法识别文本节点作为裁剪区域，导致整个裁剪规则失效，最终显示空白。

把文本转换为对应的路径（<path>），只有图形类元素（path、rect、circle等）能被SVG裁剪路径正确解析。可以通过矢量工具（比如Illustrator、Figma）将文字转曲，或者在线工具生成文字对应的path代码。

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" style="
    width: 200px;
    height:  200px;
">
    <defs>
        <clipPath id="text-path">
            <g clip-rule="evenodd" fill-rule="evenodd">
                <path d="M0 0H14V2H2V13H22V10H24V13H32V27H24V32H0V0ZM2 30V27H22V30H2Z"/>
                <path d="M16 0L24 8H16V0Z"/>
                <!-- 转换后的"PDF"文字路径 -->
                <path d="M7.5 23h2.6v1.2h-1.4v3.2h-1.2V23Zm3.8 0h2.8l1.4 4.4h-1.2l-0.4-1.4h-2.2l-0.4 1.4h-1.2L11.3 23Zm2.2 3l-0.8-2.4h1.6l-0.8 2.4Zm4.2-3h1.2v4.4h-1.2V23Z" fill="black"/>
            </g>
        </clipPath>
    </defs>
    <g clip-path="url(#text-path)" fill="red">
        <path d="M0 0H14V2H2V13H22V10H24V13H32V27H24V32H0V0ZM2 30V27H22V30H2Z"/>
        <path d="M16 0L24 8H16V0Z"/>
    </g>
</svg>

• 文字转path后，能保证在所有支持SVG的浏览器中正常渲染裁剪效果。
• 如果需要调整文字样式，直接修改path的尺寸或重新生成对应样式的文字路径即可。

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