Créer un masque sur une forme en utilisant le texte

Question

J'ai une forme svg et j'ai du texte. Je veux essentiellement que la forme ait le contour du texte dans la forme.

Voici mon code:

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

Ainsi, le rect est essentiellement un carré avec une bordure arrondie. Donc de préférence, je veux que le rSquare ait une couleur fill et que le text soit transparent dans la forme en créant un contour à l'intérieur.

Comment procéder? Je pensais que l'exemple ci-dessus fonctionnerait, mais il n'a pas ...

Merci!

Answer 1

Vous avez plusieurs questions:

• unités masque par défaut à objectBoundingBox mais par les regards de celui-ci que vous utilisez des unités userSpaceOnUse
• Si vous voulez couper un trou en forme le trou doit être noir donc le masque ne s'applique pas là.
• le texte est le bord de la page, j'ai augmenté sa position y sorte qu'il apparaisse dans le masque (l'origine du texte est en bas à gauche de la cellule de glyphe par défaut)

Ainsi, après tout ce que je reçois ce ...

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