SVG-Platz beschnitten von Text um es

Question

Gibt es eine Möglichkeit, ein Svg-Quadrat, die hinter einem Text und dem Text um das Quadrat wie in der folgenden Abbildung geschnitten werden soll machen?

Bitte beachten Sie, dass es ein Hintergrundbild hinter und nicht eine Farbe sein.

Vielen Dank

Answer 1

Ja. Sie müssen nur den Text als Maske verwenden. Für die Version des Textes in der Maske geben wir ihm einen dicken Strich, so dass er mehr von dem umgebenden Rechteck ausblendet.

Ich habe das SVG in einem braunen <div> gewickelt, so dass Sie sehen können, dass dies mit jedem Hintergrund funktioniert.

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>