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 - 錯誤行對齊 - 模糊行

回答

相關問題