SVG网格渲染Chrome，Firefox，IE - 错误行对齐 - 模糊行

为了创建一个SVG，我在SVG中绘制了几行代码。问题在于，它在Chrome和Firefox中看起来不同。SVG网格渲染Chrome，Firefox，IE - 错误行对齐 - 模糊行

铬：最后一行没有画出火狐：Firts线不绘制

BTW：Internet Explorer版本看起来模糊，但这不是主要问题。

那么现在谁呢？

我在做什么错。

给你一些背景信息：我通常从JavaScript动态绘制这个网格。我是否必须编写难看的黑客来处理这些不同的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>

来源

2013-04-09 Matthias

你的视框“0 0 960 768“，这就是你所能看到的。当绘制

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

您是说要的行程1像素由Y = -0.5宽到y = 0.5 1/2行程上线的每一侧上。然而，由于viewBox的原因，所有从-0.5到0的笔划都会被裁剪掉，因此您要求看到1/2像素宽的清脆边缘笔画，这对于UA来说并不是真的可行。有时UA会在viewBox中显示它，你会看到它，有时它会在viewBox之外绘制它，然后你不会。

如果要使用带有crispEdges的笔划，最好以0.5个单位绘制它们，例如

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

即使世界一个fuller explanation here

来源

2013-04-09 14:52:57

为什么有人说：“哎，为什么不制作复杂画一条简单的线”。他们为什么在这之后写出规格。我可以理解，这是一种矢量格式，但它是某种有线连接可以谈论半像素。 – Matthias 2013-04-09 14:58:09

阅读链接。你可以很好地显示填充，或者你可以很好地做笔画，这两个都不可能。 – 2013-04-09 15:00:44

SVG网格渲染Chrome，Firefox，IE - 错误行对齐 - 模糊行

回答

相关问题