テキストを使用して図形上にマスクを作成します。

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位置を増加してきたので、

後（テキストの起源は、デフォルトでは、グリフのセルの左下にあります）すべての私はこれを取得すること...

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