SVG 网格渲染 Chrome、Firefox、IE - 线对齐错误 - 线条模糊答案

【问题标题】：SVG Grid Rendering Chrome,Firefox,IE - Wrong Line Alignment - Blurred LinesSVG 网格渲染 Chrome、Firefox、IE - 线对齐错误 - 线条模糊
【发布时间】：2013-04-09 13:26:45
【问题描述】：

为了创建 SVG，我在 SVG 中绘制了几条线。问题是它在 Chrome 和 Firefox 中看起来不同。

Chrome：未绘制最后一行 Firefox：第一行未绘制

顺便说一句：Internet Explorer 版本看起来很模糊，但这不是主要问题。

那么现在是谁呢？

我做错了什么。

给你一些背景信息：我通常从 JavaScript 动态地绘制这个网格。我是否必须编写丑陋的 hack 来处理这些不同的 SVG 浏览器渲染行为？（我不想使用任何库，除了普通的 JavScript）

在此处查看此 codepen.io： http://codepen.io/mjost/full/kuaFH

代码如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" id="phoenix10_5" viewBox="0 0 960 768"> 
<defs>
<style type="text/css">
<![CDATA[
svg
{
    shape-rendering: crispEdges;
    stroke-linecap: butt;
}
text
{
    alignment-baseline: auto;
}
]]>
</style>
</defs>
<rect x="0" y="0" width="960" height="768" rx="0" ry="0" fill="rgb(255, 255, 255)"/>
<g>
<rect x="69" y="44" width="746" height="187" rx="0" ry="0" fill="rgb(255, 255, 255)"/>
<g>
<svg x="69" y="44" width="746" height="187" viewBox="0 0 746 187">
    <rect x="0" y="0" width="746" height="187" style="fill: #FFFFFF"/>
    <g>
        <line stroke="#000000" stroke-width="1" x1="0" y1="0" x2="746" y2="0"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="18" x2="746" y2="18"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="37" x2="746" y2="37"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="56" x2="746" y2="56"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="74" x2="746" y2="74"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="93" x2="746" y2="93"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="112" x2="746" y2="112"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="130" x2="746" y2="130"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="149" x2="746" y2="149"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="168" x2="746" y2="168"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="187" x2="746" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="0" y1="0" x2="0" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="74" y1="0" x2="74" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="149" y1="0" x2="149" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="223" y1="0" x2="223" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="298" y1="0" x2="298" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="373" y1="0" x2="373" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="447" y1="0" x2="447" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="522" y1="0" x2="522" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="596" y1="0" x2="596" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="671" y1="0" x2="671" y2="187"/>
        <line stroke="#000000" stroke-width="1" x1="746" y1="0" x2="746" y2="187"/>
    </g>
    </svg>
</g>
</g>
</svg>

【问题讨论】：

标签： javascript html google-chrome firefox svg

【解决方案1】：

您的 viewBox 是“0 0 960 768”，这就是您所看到的。当你画画时

<line stroke="#000000" stroke-width="1" x1="0" y1="0" x2="746" y2="0"/>

您是说您想要从 y=-0.5 到 y=0.5 的 1 像素宽的笔划，因为线条的每一侧都有 1/2 笔划。但是，由于 viewBox，从 -0.5 到 0 的所有笔划都被剪裁了，因此您要求查看 1/2 像素宽的清晰边缘笔划，这对于 UA 来说实际上是不可能的。有时 UA 会在 viewBox 内显示它，你会看到它，有时它会在 viewBox 外绘制它，然后你不会。

如果您想使用带有清晰边缘的笔触，最好以 0.5 个单位绘制它们，例如

<line stroke="#000000" stroke-width="1" x1="0.5" y1="0.5" x2="746" y2="0.5"/>

有一个fuller explanation here

【讨论】：

为什么有人说：“嘿，为什么不把简单的线画得复杂”。以及为什么他们在此之后编写规范。我可以理解这是一个矢量格式，但它是某种有线谈论半像素。
阅读链接。您可以很好地显示填充，也可以很好地绘制笔触，两者都做不到。