Question

我正在使用SVG.js来渲染SVG图形。它需要像素完美，没有模糊线等。

var draw = SVG(wrapper).size(560, 360)
draw.attr('shape-rendering', 'crispEdges');
draw.fixSubPixelOffset();

现在我没有奇怪的模糊线条，一切都很好 - 但是：

显然，crispEdges在Chrome浏览器中向上舍入，在Firefox中向上，所以最后，我有清晰的图形，但这一切都没有，因为firefox渲染了一些像素的东西。

铬

Chrome - correct rendering

火狐

Firefox - broken rendering

请注意，两者都不是完美的，但是自从我针对Chrome进行了优化后，它在Firefox中被破坏了 - 如果我将其修复为Firefox，它将在Chrome中被破坏。特别是，“我”栏和小时线打扰了我 - 他们需要完美定位。此外，工具提示还有几个像素。

我确信有些人会要求更多的代码 - 我可以提供它，但它与问题无关，即这里是I栏的渲染方式：

if(data.now.day == index) {
    var mx = sl_BAR_HOFFSET + (sl_BAR_WIDTH / 1440)*data.now.time;
    var my = sl_BAR_VOFFSET-2;

    group.line(0,0,0,sl_BAR_HEIGHT+4)
        .stroke({ width: 1, color: sl_COLOR_NOW })
        .move(mx, my);

    group.line(0,0,3,0)
        .stroke({ width: 1, color: sl_COLOR_NOW })
        .move(mx-1.5, my);

    group.line(0,0,3,0)
        .stroke({ width: 1, color: sl_COLOR_NOW })
        .move(mx-1.5, my+sl_BAR_HEIGHT+3);
}

我很感激如何修复这种跨浏览器不兼容性的一些建议。有些垫片还是其他东西？

Answer 1

Oke所以我自己解决了; D

我摆脱了draw.attr('shape-rendering', 'crispEdges');和draw.fixSubPixelOffset();（后者显然根本没有效果），然后在某些地方增加了0.5 px偏移量。

有趣的是，有些rects不需要偏移，有些则确实如此。

另外值得一提的是，您可以使用~~number将其转换为整数而不是繁琐的Math.floor()。

Answer 2

我打开了crispEdges并开始编写一些strokeAdjust（）和browserAdjust（）函数，以使Firefox和Chrome中的内容看起来相同。在阅读@ MightyPork的评论后，crispEdges似乎是一个好主意，但是很麻烦，我把它关掉了，我的矩形在Firefox和Chrome中变得相同（但是抗锯齿）。我开始尝试定位，大小和笔画，看看我可以推导出什么规则来创建一个crispEdges（）函数。

我创建了一个示例svg来演示定位，尺寸和笔划对边缘清晰度的影响。

http://jsfiddle.net/jt6sj7hj/

要获得矩形的清晰边缘，看起来宽度和高度必须始终为整数（有意义）。如果笔划是偶数，则坐标必须是整数。如果笔划是奇数，则坐标必须在半整数上。

<body>
<svg id="svgHeader" style="width:300px; height: 200px; background: #f8f8f8;">

<rect class="none" x="10" y="8" width="8" height="28" style=""></rect>
<rect class="none" x="26.5" y="8.5" width="8" height="28" style=""></rect>
<rect class="none" x="42.5" y="8" width="7" height="28" style=""></rect>
<rect class="none" x="58" y="8" width="7" height="28" style=""></rect>
<rect class="none" x="74.5" y="8" width="9" height="28" style=""></rect>
<rect class="none" x="90.5" y="8.5" width="10" height="28" style=""></rect>
<rect class="none" x="106" y="8.5" width="10" height="28" style=""></rect>

<rect class="first" x="10" y="48" width="8" height="28" style=""></rect>
<rect class="first" x="26.5" y="48.5" width="8" height="28" style=""></rect>
<rect class="first" x="42.5" y="48" width="7" height="28" style=""></rect>
<rect class="first" x="58" y="48" width="7" height="28" style=""></rect>
<rect class="first" x="74.5" y="48" width="9" height="28" style=""></rect>
<rect class="first" x="90.5" y="48.5" width="10" height="28" style=""></rect>
<rect class="first" x="106" y="48.5" width="10" height="28" style=""></rect>

<rect class="second" x="10" y="88" width="8" height="28" style=""></rect>
<rect class="second" x="26.5" y="88.5" width="8" height="28" style=""></rect>
<rect class="second" x="42.5" y="88" width="7" height="28" style=""></rect>
<rect class="second" x="58" y="88" width="7" height="28" style=""></rect>
<rect class="second" x="74.5" y="88" width="9" height="28" style=""></rect>
<rect class="second" x="90.5" y="88.5" width="10" height="28" style=""></rect>
<rect class="second" x="106" y="88.5" width="10" height="28" style=""></rect>

<rect class="third" x="10" y="128" width="8" height="28" style=""></rect>
<rect class="third" x="26.5" y="128.5" width="8" height="28" style=""></rect>
<rect class="third" x="42.5" y="128" width="7" height="28" style=""></rect>
<rect class="third" x="58" y="128" width="7" height="28" style=""></rect>
<rect class="third" x="74.5" y="128" width="9" height="28" style=""></rect>
<rect class="third" x="90.5" y="128.5" width="10" height="28" style=""></rect>
<rect class="third" x="106" y="128.5" width="10" height="28" style=""></rect>

<rect class="fourth" x="10" y="168" width="8" height="28" style=""></rect>
<rect class="fourth" x="26.5" y="168.5" width="8" height="28" style=""></rect>
<rect class="fourth" x="42.5" y="168" width="7" height="28" style=""></rect>
<rect class="fourth" x="58" y="168" width="7" height="28" style=""></rect>
<rect class="fourth" x="74.5" y="168" width="9" height="28" style=""></rect>
<rect class="fourth" x="90.5" y="168.5" width="10" height="28" style=""></rect>
<rect class="fourth" x="106" y="168.5" width="10" height="28" style=""></rect>

</svg>
</body>

一些css：

rect {
    stroke-width: 0px;
    stroke: #222;
    fill: #ddd;
}

rect.none {
    fill: #222;
}

rect.first {
    stroke-width: 1px;
}

rect.second {
    stroke-width: 2px;
}

rect.third {
    stroke-width: 3px;
}

rect.fourth {
    stroke-width: 4px;
}

修复Firefox / Chrome中的SVG渲染差异

2 个答案: