عنصر <mask> لـ SVG

<svg　height="450"　width="450">
　<defs>
　　<mask　id="mask1"　x="0"　y="0"　width="100"　height="100"　>
　　　　<rect　x="0"　y="0"　width="100"　height="100"
　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　</mask>
</defs>
<rect　x="1"　y="1"　width="200"　height="200"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask1)"/>
</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">
　　　　　　　　　　　　أسود وابيض
　　　　　　　　</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>