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>