SVG广场周围的文字裁剪

Question

有没有办法制作一个svg正方形，它将位于文本的后面，并且该文本可以像下图一样在正方形周围进行裁剪？

请注意，背后会有背景图片，而不是纯色。

谢谢

Answer 1

是。您只需要将文本用作掩码。对于蒙版中文本的版本，我们给它一个粗线条，以便遮盖它周围更多的矩形。

我已将SVG包裹在棕色<div>中，以便您可以看到这适用于任何背景。

div {
  background-color: sandybrown;
}

<div>

  <svg width="300" height="100">
    <defs>
      <g id="text" font-family="sans-serif" font-size="20" text-anchor="middle">
        <text x="150" y="48">This text will vertically</text>
        <text x="150" y="70">crop this square</text>
      </g>

      <mask id="textmask" maskUnits="userSpaceOnUse"
            x="0" y="0" width="300" height="100">
        <rect width="300" height="100" fill="white"/>
        <use xlink:href="#text" stroke="black" stroke-width="10"/>
      </mask>
    </defs>
  
    <rect x="101" y="1" width="98" height="98"
          fill="none" stroke="black" stroke-width="2"
          mask="url(#textmask)"/>

    <use xlink:href="#text"/>
    
  </svg>
  
</div>