SVGにテキストを含むマスクを作成します

Question

私は現在、以下のようなコメントアイコンをsvgに作成しようとしていますが、テキストの周りのスペースは吹き出しのカットホールとして（ボトムのアイコンのようにはなりません）。

私は反応で動的にsvgを生成するので、<text>要素が必要です。

可能かどうか誰かが知っていますか？

おかげ

Answer 1

このフィルタは、「グリーン・スクリーン」技術を使用しています：あなたは別の原色を区別したいコンテンツの部分に色を - そして生成するために、カラーマトリックスを使用します各特定の色のコンテンツだけを含むノードを分離する。コンテンツを処理した後、最後にもう1つのカラーマトリックスを使用して、コンテンツを最終的な（単一の）目的の色に再描画します。あなたがこれまで持っている何

<svg width='400px' height='400px' viewBox='0 0 258 229' > 
 
     <defs> 
 
      <filter id="cut-out"> 
 
      <feColorMatrix type="matrix" values="0 0 0 0 0 
 
               0 0 0 0 0 
 
               0 0 1 0 0 
 
               -1 0 0 1 0" 
 
          result="just-blue"/> 
 
      <feColorMatrix type="matrix" values="1 0 0 0 0 
 
               0 0 0 0 0 
 
               0 0 0 0 0 
 
               0 0 -1 1 0" 
 
     in="SourceGraphic" result="just-red"/> 
 
      
 
     <feMorphology in="just-blue" operator="dilate" radius="3"/> 
 
     
 
      <feComposite operator="out" in="just-red"/> 
 
      <feComposite operator="over" in2="just-blue"/> 
 
      
 
     <feColorMatrix type="matrix" values="0 0 0 0 .33 
 
               0 0 0 0 .33 
 
               0 0 0 0 .33 
 
               0 0 0 1 0"/> 
 
      
 
     </filter> 
 
     </defs> 
 
     
 
     <g filter="url(#cut-out"> 
 
     <circle r="50" fill="red" cx="100" cy="100"/> 
 
     <text x="110" y="140" stroke="none" fill="blue" font-size="70">3</text> 
 
     </g> 
 
      
 
    </svg>