3

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

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

IE10:

在此处输入图像描述

铬合金:

在此处输入图像描述

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

4

1 回答 1

0

IE 似乎并不关心形状渲染属性,但我发现您可以通过指定一个微小的旋转变换来强制它为抗锯齿形状:

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

在 IE11 上测试。

于 2015-06-26T13:21:57.827 回答