如何获得 SVG 文本的“crispEdges”？答案

【问题标题】：How to get "crispEdges" for SVG text?如何获得 SVG 文本的“crispEdges”？
【发布时间】：2016-05-27 20:03:34
【问题描述】：

除文本之外的 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)。为什么？有没有其他方法可以获得非抗锯齿？

【问题讨论】：

optimizeSpeed 是最接近的。不过，这可能有效，也可能无效。
谢谢罗伯特。我无法区分 optimizeSpeed 与其他有关文本渲染的选项的任何区别。我不知道为什么文本没有抗锯齿（或清晰边缘）选项。但我已经看到 W3C 文档即使在crisperEdges 上也相当模糊“为了实现清晰的边缘，用户代理可能关闭所有直线和曲线的抗锯齿，或者可能只关闭接近的直线垂直或水平。此外，用户代理可能调整线条位置和线条宽度以将边缘与设备像素对齐”。我想非抗锯齿选项并不是真正的目标。
我不确定我是否在这里误解了你，但在 non-text svg 元素上，Firefox 似乎关闭了 crispEdges: codepen.io/anon/pen/mVgmmO 的反锯齿功能。同样适用于 Chrome。
我专门讨论了我的 cmets 中的文本元素（因为这就是问题所在）。大多数 UA 忽略所有文本渲染选项。例如，Firefox 与 geometryPrecision 略有不同，但将所有其他选项与 auto 相同。希望这更清楚。
我已经想知道了。我想当然地认为文本元素不支持crispEdges，因为它甚至不在规范中。

标签： svg text antialiasing text-rendering shape-rendering

【解决方案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>

【讨论】：

太棒了。谢谢迈克尔。似乎按预期工作。我认为这应该作为某种“抗锯齿”选项默认在 SVG 上可用。