相鄰SVG：多邊形的邊不符合

Question

我畫使用多邊形條形圖彼此相鄰像這樣：

如果你仔細觀察，還有每個多邊形之間的白色空間（放大） ：

我試圖防止這種情況發生。我找到了SVG shape-rendering屬性並將其設置爲geometricPrecision。這解決了這個問題，但給了我非常清晰的邊緣：

我不想，要麼。我嘗試了其他可能的值shape-rendering，但都沒有效果。 （我在WebKit上試過這些）。我正在尋找一個解決方案。

對於有興趣的人，jsFiddle的圖表here。

Answer 1

真的問題是，您應該將圖形呈現爲單個多邊形而不是每個條形的一個多邊形，但我假設您有這樣做的原因。

一種可能的解決方案是設置筆畫屬性，以便繪製多邊形的輪廓，使它們稍微重疊。您可以在組元素上設置這些屬性，以將它們應用於所有封閉的多邊形。

<g stroke-width="0.5" stroke="black" stroke-linejoin="round"> 

Updated jsFiddle link

注意，這使得圖會略有biggger比它應該是，但我不認爲這是一個顯著的問題。

至於它發生的原因，那是因爲您的多邊形的偏移不完全對齊像素邊界（至少大部分時間）。如果您將svg寬度固定爲300px的倍數（因此將像素邊界上的所有內容對齊），間隔應該消失。

考慮一個4×4像素區域，在那裏你試圖呈現從（0,0）一廣場（2.5,2.5）這樣的：

你可以畫從像素（0 ，0）到（1,1），但是如何處理邊緣 - 它們既不是完全黑色也不是完全白色。抗鋸齒解決方案是使用與覆蓋多少像素成比例的灰度陰影。

但是當你試圖渲染另一個多邊形旁邊的第一個（即起始於2.5偏移量），你將有同樣的問題抗鋸齒左手邊緣。由於背景是灰色而不是白色，因此這次只會稍微變暗。

當你發現，你可以通過設置不同的形狀呈現選項禁用此效果，但你失去斜線抗鋸齒的利益，使這些邊緣呈鋸齒狀。

Answer 2

我發現了這個問題的明確和優雅的解決方案。 使用多個線段將您的多個多邊形到一個路徑：

<script src="http://d3js.org/d3.v3.min.js"></script> 
<svg width="100%" height="30%" viewBox="0 0 100 100" preserveAspectRatio="none"> 
     <path d="M0,100 0,70 3.3333333333333335,66 3.3333333333333335,100 M3.3333333333333335,100 3.3333333333333335,66 6.666666666666667,66 6.666666666666667,100 M6.666666666666667,100 6.666666666666667,66 10,62 10,100 M10,100 10,62 13.333333333333334,57.99999999999999 13.333333333333334,100 M13.333333333333334,100 13.333333333333334,57.99999999999999 16.666666666666664,56 16.666666666666664,100 M16.666666666666664,100 16.666666666666664,56 20,54 20,100 M20,100 20,54 23.333333333333332,40 23.333333333333332,100 M23.333333333333332,100 23.333333333333332,40 26.666666666666668,24 26.666666666666668,100 M26.666666666666668,100 26.666666666666668,24 30,15.999999999999998 30,100 M30,100 30,15.999999999999998 33.33333333333333,13.999999999999996 33.33333333333333,100 M33.33333333333333,100 33.33333333333333,13.999999999999996 36.666666666666664,11.999999999999996 36.666666666666664,100 M36.666666666666664,100 36.666666666666664,11.999999999999996 40,10.000000000000004 40,100 M40,100 40,10.000000000000004 43.333333333333336,10.000000000000004 43.333333333333336,100 M43.333333333333336,100 43.333333333333336,10.000000000000004 46.666666666666664,8.000000000000004 46.666666666666664,100 M46.666666666666664,100 46.666666666666664,8.000000000000004 50,8.000000000000004 50,100 M50,100 50,8.000000000000004 53.333333333333336,6.000000000000002 53.333333333333336,100 M53.333333333333336,100 53.333333333333336,6.000000000000002 56.666666666666664,6.000000000000002 56.666666666666664,100 M56.666666666666664,100 56.666666666666664,6.000000000000002 60,8.000000000000004 60,100 M60,100 60,8.000000000000004 63.33333333333333,10.000000000000004 63.33333333333333,100 M63.33333333333333,100 63.33333333333333,10.000000000000004 66.66666666666666,8.000000000000004 66.66666666666666,100 M66.66666666666666,100 66.66666666666666,8.000000000000004 70,11.999999999999996 70,100 M70,100 70,11.999999999999996 73.33333333333333,13.999999999999996 73.33333333333333,100 M73.33333333333333,100 73.33333333333333,13.999999999999996 76.66666666666667,11.999999999999996 76.66666666666667,100 M76.66666666666667,100 76.66666666666667,11.999999999999996 80,10.000000000000004 80,100 M80,100 80,10.000000000000004 83.33333333333334,11.999999999999996 83.33333333333334,100 M83.33333333333334,100 83.33333333333334,11.999999999999996 86.66666666666667,13.999999999999996 86.66666666666667,100 M86.66666666666667,100 86.66666666666667,13.999999999999996 90,11.999999999999996 90,100 M90,100 90,11.999999999999996 93.33333333333333,4.000000000000002 93.33333333333333,100 M93.33333333333333,100 93.33333333333333,4.000000000000002 96.66666666666667,0 96.66666666666667,100 M96.66666666666667,100 96.66666666666667,0 100,0 100,100 M100,100 100,0 100,0 100,100"/> 
</svg> 

http://jsfiddle.net/313xc6bg/

，如果你想，雖然不同的效果應用到每個段它不會然而工作。在這種情況下，我認爲解決方法是增加一個足夠寬的筆觸以覆蓋空白區域，同時保持AA位置。

另外，我仍然遇到Safari（僅限於）不同多邊形中點的順序問題。更改順序（即順時針到逆時針）解決了問題。