如何获得"crispEdges" SVG文字?

问题描述

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

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.

但是文本仅受text-rendering影响.但是，这不提供crispEdges值( https ://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering ).为什么?还有另一种获取非抗锯齿的方法吗?

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?

推荐答案

对于真正清晰的边缘，您可以使用过滤器将其后代化.

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>

这篇关于如何获得"crispEdges" SVG文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！