svg - 应用过滤器之前的抗锯齿 SVG 文本？

Question

SVG 过滤器光栅化它们的源图像，这意味着过滤后的文本不会被消除锯齿，从而导致锯齿状边缘。

有解决办法吗？也许可以使用另一个过滤器来模拟抗锯齿，或者我可以在应用过滤器之前以某种方式对文本进行抗锯齿？

相关过滤器:

<filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blur" />
  <feColorMatrix
    in="blur"
    mode="matrix"
    values="1 0 0 0 0
    0 1 0 0 0
    1 0 1 0 0
    0 0 0 15 -8"
    result="goo"
  />
  <feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>

Answer 1

Is there a workaround for this? Perhaps another filter can be used toemulate anti-aliasing, or maybe I can somehow anti-alias the textbefore the filter is applied?

这answer详细介绍了这个问题。

作为折衷方案，你可以尝试:

1. 为字母和背景的颜色选择对比度较小的颜色
2. 将属性 shape-rendering ="crispEdges" 应用于字体
3. 选择边缘更清晰的字体

例如，您选择的字体 font-family ="cursive " 如下所示:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="600" viewBox="0 0 400 400" >  

<text  x="35" y="150" font-size="100px" fill="black" font-family="cursive"> HELLO </text>

</svg>

font-family = "Monotype Corsiva" 看起来更好

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="200" viewBox="0 0 400 200" >  

<rect width="100%" height="100%" fill="silver" />
<text  x="35" y="120" font-size="100px" fill="#444444" shape-rendering="crispEdges" font-family="Monotype Corsiva"  > HELLO </text>

</svg>  

应用 SVG 滤镜平滑锯齿状边缘

• 对于过滤器 feGaussianBlur 选择的参数(最后一个矩阵的行) 0 0 0 29 -1
• 对于过滤器 feComposite operator="atop"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="200" viewBox="0 0 400 200" >  
<defs>
  <filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" >
        
    </feGaussianBlur>   
            <feColorMatrix in="blur" type="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
</defs> 
<rect width="100%" height="100%" fill="silver" />
<text filter="url(#f)"  x="35" y="120" font-size="100px" fill="#444444" shape-rendering="crispEdges" font-family="Monotype Corsiva"  > HELLO </text>

</svg>  

过滤动画

I'm animating the stdDeviation of the feGaussianBlur

正如我从 @aleclarson 的评论中了解到的，您想为过滤器属性设置动画

<animate attributeName="stdDeviation" begin="0s" dur="8s"
  repeatCount="indefinite" values="1;6;12;12;6;1;1" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="200" viewBox="0 0 400 200" >  
<defs>
  <filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" >
   <animate attributeName="stdDeviation" begin="0s" dur="8s" repeatCount="indefinite" values="1;6;12;12;6;1;1" />
    </feGaussianBlur>       
            <feColorMatrix in="blur" type="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
</defs> 

<text filter="url(#f)"  x="35" y="120" font-size="100px" fill="#111111" shape-rendering="crispEdges" font-family="Monotype Corsiva"  > HELLO </text>

</svg>  

具有值和运算符 = "xor"的变体

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="200" viewBox="0 0 400 200" >  
<defs>
  <filter id="f">
  <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" >
   <animate attributeName="stdDeviation" begin="0s" dur="8s" repeatCount="indefinite" values="1;6;12;12;6;1;1" />
    </feGaussianBlur>       
            <feColorMatrix in="blur" type="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="xor"/>
        </filter>
</defs> 

<text filter="url(#f)"  x="35" y="120" font-size="100px" fill="#111111" shape-rendering="crispEdges" font-family="Monotype Corsiva"  > HELLO </text>

</svg>