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单位
如果你想在一个形状上切一个洞，那么洞应该是黑色的，所以面具不适用于那里。
文字不在页面边缘，我已经增加了它的y位置，因此它出现在掩码内（文本的原点是默认情况下字形单元格的左下角）

毕竟我得到了这个......

＆＃13;

<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>

＆＃13;

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

1 个答案: