SVG clipPath文本剪裁示意实例页面

回到相关文章 »

代码：

SVG代码：

<svg>
    <defs>
        <clipPath id="clipPath">
            <text x="10" y="50" style="font-size: 20px;">一步之遥</text>
        </clipPath>
    </defs>
    <g style="clip-path: url(#clipPath);">
        <circle cx="60" cy="60" r="50" fill="#34538b" />
        <rect x="0" y="0" width="60" height="90" style="fill:#cd0000;"/>
    </g>
</svg>

效果：