SVG 中的表情符号字符轮廓

Question

我正在尝试在 SVG 中创建表情符号字符的轮廓（意思是我只想绘制表情符号的外部形状）。到目前为止，我能想到的最好办法是使用两个蒙版矩形，缩放并相互叠加。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">  
  <defs>
    <filter id="filter">
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0" />
    </filter>
    <mask id="mask" x="0" y="0" width="100" height="100">  
      <text filter="url(#filter)" x="0" y="80" font-family="Helvetica" font-weight="bold" font-size="7em" fill="#000000"></text>
    </mask>  
  </defs>
  <path fill="#fff" d="M0 0 L0 100 L100 100 L100 0z"/>
  <path fill="#000000" d="M0 0 L0 100 L100 100 L100 0z" mask="url(#mask)"/>
  <g transform="translate(5, 5) scale(0.9)">
    <path d="M0 0 L100 0 L100 100 L0 100z" mask="url(#mask)" fill="#fff"/>
  </g>
</svg>

根据特定的表情符号，结果不是很令人满意，因为并非所有表情符号都平等地填充宽度和高度。

有没有更好的方法实现emoji字符的轮廓效果？

Answer 1

svg 元素需要一个 viewBox，我使用的 viewBox="0 -30 157 140" 比文本元素的边界框稍大。
我使用 clipPath 来剪辑白色矩形而不是蒙版
我使用的滤镜是 feMorphology operator="dilate"，我将滤镜应用于包裹剪裁矩形的组。

svg{border:solid}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" viewBox="0 -30 157 140">
<defs>
<filter id="outline-indigo">
<feMorphology in="SourceAlpha" result="expanded"
operator="dilate" radius="3"/>
<feFlood flood-color="indigo" result="indi" />
<feComposite in ="indi" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>

<clipPath id='emojiClipPath'> 
      <text filter="url(#filter)" x="0" y="80" font-family="Helvetica" font-weight="bold" font-size="7em" fill="#000000"></text>
</clipPath>
</defs>
  
<g filter="url(#outline-indigo)">
  <rect y="-30" width="157" height="140" fill="white" clip-path='url(#emojiClipPath)'/>
</g>
  
</svg>

SVG 中的表情符号字符轮廓

Emoji character outline in SVG

html

css

svg

image

emoji