当前位置: 动力学知识库 > 问答 > 编程问答 >

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?

网友答案:

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: