搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
HTML/CSS
SVG 教程
SVG 元素
源代码
清空
点击运行
<svg width="200" height="80" viewBox="0 0 200 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <mask id="myMask" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="80"> <rect x="0" y="0" width="100" height="80" fill="white"/> </mask> <text id="Text" x="100" y="48" font-size="26" font-weight="bold" text-anchor="middle"> Black & White </text> </defs> <!-- 在背景上绘制黑色矩形 --> <rect x="100" y="10" width="95" height="60"></rect> <!-- 绘制文本字符串两次。首先，不带蒙版的白色文本。其次，应用蒙版的黑色文本--> <use xlink:href="#Text" fill="white"/></use> <use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use> </svg>
运行结果
