svg - 如何获得 SVG 文本的“crispEdges”？

Question

除文本外的 Svg 形状受shape-rendering可以设置为crispEdges值的属性的影响（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering）。该值似乎关闭了抗锯齿功能。

但文本仅受text-rendering. 但是，这不提供crispEdges值（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering）。为什么？有没有另一种方法来获得非抗锯齿？

Answer 1

对于非常清晰的边缘，您可以使用过滤器对文本进行分色。

<svg width="400px" height="400px">
<defs>
<filter id="crispify">
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 1"/>
</feComponentTransfer>
</filter>
</defs>

<text filter="url(#crispify)" font-size="60"  y="60" >Some crispy text</text>
</svg>