SVG 轮廓笔画渐变？

Question

我正在为我的网站制作一些 SVG 横幅，我想知道：是否可以使用渐变使笔画模仿下图中的像素艺术？

我在这里使用像素艺术来绘制每个字母的轮廓，从红色到橙色，再到黄色，我想知道 SVG 是否具有这种功能，或者其他方式来模仿结果。

Answer 1

以下是如何使用基于 feMorphology 的过滤器来获得该效果

body {
  background-color: black;
}

<svg width="800px" height="600px">
  <defs>
<filter id="colorize" color-interpolation-filters="sRGB">
  <feMorphology operator="dilate" radius="1"/>
  <feColorMatrix result="yellow" type="matrix" values="1 0 0 0 0 
                                       0 1 0 0 0
                                       0 0 0 0 0 
                                       0 0 0 1 0"/>
    <feMorphology operator="dilate" radius="1"/>
  <feColorMatrix result="orange" type="matrix" values="1 0 0 0 0 
                                       0 0.6 0 0 0
                                       0 0 0 0 0 
                                       0 0 0 1 0"/>
  <feMorphology operator="dilate" radius="1"/>
  <feColorMatrix result="red" type="matrix" values="1 0 0 0 0 
                                       0 0 0 0 0
                                       0 0 0 0 0 
                                       0 0 0 1 0"/>
  <feFlood flood-color="black"/>
  <feComposite result="black" operator="in" in2="SourceGraphic"/>
  
    <feMerge>
        <feMergeNode in= "red"/>
        <feMergeNode in= "orange"/>    
        <feMergeNode in= "yellow"/>
    <feMergeNode in="black"/>
   </feMerge>
  </filter>
    
  </defs>

<g filter="url(#colorize)">
  <text x="50" y="50" style="font-size:60px" fill="white">Sample Text</text>
  </g>
</svg>

如果您想让基础文本更加像素化，您可以在 Alpha 通道上使用 feComponentTransfer 来删除文本抗锯齿。在 feFuncA 的开头添加更多 0，以获得更清晰的效果。

body {
  background-color: black;
}

<svg width="800px" height="600px">
  <defs>
<filter id="colorize" color-interpolation-filters="sRGB">
  <feComponentTransfer result="crispyText">
    <feFuncA type="discrete" tableValues="0 0 0 1"/>
  </feComponentTransfer>
  
  <feMorphology operator="dilate" radius="1"/>
  <feColorMatrix result="yellow" type="matrix" values="1 0 0 0 0 
                                       0 1 0 0 0
                                       0 0 0 0 0 
                                       0 0 0 1 0"/>
    <feMorphology operator="dilate" radius="1"/>
  <feColorMatrix result="orange" type="matrix" values="1 0 0 0 0 
                                       0 0.6 0 0 0
                                       0 0 0 0 0 
                                       0 0 0 1 0"/>
  <feMorphology operator="dilate" radius="1"/>
  <feColorMatrix result="red" type="matrix" values="1 0 0 0 0 
                                       0 0 0 0 0
                                       0 0 0 0 0 
                                       0 0 0 1 0"/>
  <feFlood flood-color="black"/>
  <feComposite result="black" operator="in" in2="crispyText"/>
  
    <feMerge>
        <feMergeNode in= "red"/>
        <feMergeNode in= "orange"/>    
        <feMergeNode in= "yellow"/>
    <feMergeNode in="black"/>
   </feMerge>
  </filter>
    
  </defs>

<g filter="url(#colorize)">
  <text x="50" y="50" style="font-size:60px" fill="white">Sample Text</text>
  </g>
</svg>