在SVG中创建带有文本的“掩码”

Question

我目前正在尝试在svg中创建如下所示的评论图标，但文本周围的空间是语音气泡中的一个切口（不像底部的图标）。

我想要一个<text>元素因为我使用react生成动态svg。

有人知道是否有可能吗？

由于

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