SVG在浏览器和ubuntu / gimp中呈现不同

Question

我一直在使用d3.js处理图表应用程序，并使用基于svg的渲染器生成下图所示的图表。这是图表如何在64位Ubuntu上的FireFox 29和Chrome 34中出现的屏幕截图。请注意，图表沿着刻度线有微弱的灰色网格线，沿轴有明显的黑色线条。

我想要的一个功能是能够将svg下载到磁盘，并且由于它只是svg格式，我从svg中取出所有内容并将其与正确的mimetype一起转储到文件中。当在Ubuntu图像查看器，GIMP 2.8或甚至默认的imagemagick查看器中查看时，问题不是桌面上出现单个网格线。其中每个看起来与

下面的图片相同

我的问题是，虽然在线图表非常重要，但同样重要的是图表也可以在桌面上查看。在我的计算机上渲染网格线的唯一桌面软件是Inkscape，但我不想让所有想要查看它的人使用inkscape。我的想法是找到一种更好的方法来渲染那些在桌面和浏览器之间跨平台工作的线。

相关的d3.js代码是

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis.ticks(10)
        .tickSize(-height, 0, 0)
    ).append("text")
        .attr("dx", ".71em")
        .style("text-anchor", "start")
        .attr("y", -6)
        .text("Hours");
svg.append("g")         
    .attr("class", "y axis")
    .call(yAxis.ticks(10)
        .tickSize(-width, 0, 0)
    ).append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Cores");

和轴线的css如下。 （这个css被内联到实际的svg中，我已经检查过以确保svg的所有相关css都是内联的。没有css影响图形的浏览器版本，也没有包含在内联svg中）

.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis line {
  fill: none;
  stroke: lightgrey;
  shape-rendering: crispEdges;
  opacity: 0.7;
}

最后一件事是svg uploaded to a github gist。总之，我想更改网格线，以便它们在桌面上正确呈现，但是一个，我不知道为什么它们在桌面上没有正确呈现，两个，我不知道知道适当的工作来绘制适用于桌面的网格线。