html - 使用文本在形状上创建蒙版

Question

我有一个svg形状和我有一些文字。我本质上希望形状在形状内具有文本的轮廓。

这是我的代码:

<g class="monogram">
    <mask id="rSquare" x="0" y="0" width="34" height="34">
        <text fill="#ffffff" x="0" y="0" font-family="verdana" font-size=
"26">LI</text>
    </mask>
    <rect mask="url(#rSquare)" height="34" rx="4" ry="4" width="34" fill="#fff"/>
</g>

所以，rect本质上是一个带有圆形边框的正方形。所以最好我想要 rSquare拥有 fill颜色和text在形状内透明，在其中创建轮廓。

我该如何解决这个问题？我以为上面的例子会起作用，但事实并非如此......

谢谢!

Answer 1

您遇到各种问题:

• 掩码单位默认为 objectBoundingBox，但从外观上看，您使用的是 userSpaceOnUse 单位
• 如果您想在某个形状上切一个洞，该洞应该是黑色的，这样 mask 就不会应用到那里。
• 文本超出了页面边缘，我增加了它的 y 位置，以便它出现在蒙版内(默认情况下，文本的原点是字形单元格的左下角)

毕竟我明白了......

<svg>
  <g class="monogram">
    <mask id="rSquare" x="0" y="0" width="34" height="34" maskUnits="userSpaceOnUse">
        <rect width="34" height="34" fill="white"/>
        <text fill="black" x="4" y="26" font-family="verdana" font-size="26">LI</text>
    </mask>
    <rect mask="url(#rSquare)" height="34" rx="4" ry="4" width="34" fill="blue"/>
</g>
</svg>