How to get “crispEdges” for SVG text?

问题

Svg shapes other than text are affected by the shape-rendering attribute which can be set to the crispEdges value (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). This value seems to turn anti-aliasing off.

But text is only affected by text-rendering. However, this does not provide the crispEdges value (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering). Why? Is there another way to get non-anti-alias?

回答1:

For really crisp edges, you can use a filter to posterize your text.

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

来源：https://stackoverflow.com/questions/35434315/how-to-get-crispedges-for-svg-text