IE10 SVG 实现拒绝抗锯齿 <rect> 元素？答案

【问题标题】：IE10 SVG implementation refusing to antialias <rect> elements?IE10 SVG 实现拒绝抗锯齿 <rect> 元素？
【发布时间】：2013-09-20 21:42:46
【问题描述】：

我一直在开发一个使用 d3 和 SVG 来显示一系列矩形的图表库。数据集控制要在给定区域中显示的矩形数量，并且在大多数情况下，数学计算并不清晰，这意味着矩形不会以整数开始和结束。 Firefox、Chrome 和 Safari 都通过对矩形进行抗锯齿来解决这种意外情况。 IE 似乎只是四舍五入到最接近的像素值，并且拒绝对任何 rect 元素进行抗锯齿处理。我尝试过更改形状渲染等，但无济于事。

以下是 IE10 和最新 Chrome 版本中相同数据的并排比较：

IE10：

铬：

是否有人知道不涉及更改 SVG 标记结构的解决方法？设置 CSS 属性或标签属性比更改元素本身更可取。除此之外，有没有人看过任何微软文档来解释这个决定的理由？到目前为止我还没有出现。

【问题讨论】：

你的图片看起来一模一样。
它们显示相同的数据，但一个在 Chrome 中呈现，另一个在 IE10 中呈现。 Chrome 渲染中的所有条都应该看起来均匀粗细、均匀分布，并具有抗锯齿边缘。 IE 渲染中的那些应该有锐利的边缘，没有部分透明，列间隔不均匀，右数第四列只有其他列的一半厚度。如果知道这一点，他们仍然看起来完全一样，那么真的奇怪的事情正在发生......
哦，对了，现在我明白了。没有指定抗锯齿行为，因此这些决定非常特定于平台/浏览器，并且发生在底层本机图形库的级别（根据 GPU 与 CPU 渲染，它也可以产生不同的结果）。通常使用 crispEdges 会在每个平台上为您提供非抗锯齿结果。您有时可以通过添加过滤器来“手动消除锯齿”，但不能保证结果。

标签： svg internet-explorer-10 antialiasing

【解决方案1】：

IE 似乎并不关心 shape-rendering 属性，但我发现您可以通过指定一个微小的旋转变换来强制它使用抗锯齿形状：

svg {
    transform: rotate(.00001deg); /* hack to force anti-aliasing in IE */
}

在 IE11 上测试。

【讨论】：