在不同版本的Chrome之間呈現不一致的SVG路徑元素

我已經使用D3創建了一個和絃圖。但是我遇到了一些輸出問題，導致某些版本的Chrome中路徑渲染效果不佳。

這裏是由D3產生的問題的路徑的一個例子：

<svg height="1000px" width="1000px"> 
 
    <g transform="translate(400,400)"> 
 
    <path d="M329.2336690603744,-46.49130195040491A332.5,332.5 0 0,1 329.2336694247276,-46.491299370194035Q 0,0 -25.421977592957564,-331.5267305290222A332.5,332.5 0 0,1 -25.42197499477598,-331.5267307282548Q 0,0 329.2336690603744,-46.49130195040491Z" class="chord" fill="#c8cfdc" stroke-width="1px" stroke="#000000"></path> 
 
    </g> 
 
</svg>

在大多數瀏覽器中，我看到了一個弧線，這是我的期望。但是在Ubuntu 14.04上運行Chrome版本36.0.1985.125的開發機上，我看到了一個灰色圓圈頂部的圓弧。這個大圓圈會破壞圖表的其餘部分。

這條路徑的d屬性有什麼特別的問題，可能導致它被瀏覽器不一致地繪製？

非常感謝。

這裏是我所看到的圖像時出現錯誤： enter image description here

來源

2014-10-10 Al R.

你是如何在d3中生成該路徑的？在路徑數據中還有很多事情要比你想要的輸出所需要的更多。圓弧段（路徑數據中的「A」）是不必要的，它們在某些瀏覽器中引起了巨大的圓圈（我猜這是因爲弧形掃描標誌在不同瀏覽器中被不同的解釋） – jshanley 2014-10-10 18:21:44

這是從D3和絃佈局中的和絃發生器（https://github.com/mbostock/d3/wiki/Chord-Layout）。當數據矩陣包括小數據值並且數據矩陣以大範圍（例如0.05至1500）爲特徵時，輸出有問題的路徑。我可以通過重新分配小值爲0來避開這個問題，因爲它們無論如何都不可見（數值相對於其他數據非常小），所以這不是一個大問題。 – 2014-10-10 20:51:05

擴大對@ jshanley的評論，路徑數據的細目如下（長小數修剪可讀性）：

d="M 329,-46 
    //Move the pen to the starting point (329,-46) 

    A 332.5,332.5 0 0,1 329,-46 
    //draw a circular arc (radius in both directions 332.5 with 0 degrees rotation), 
    //in a clockwise direction taking the shortest route (flags 0,1) 
    //ending at point (329,-46). 

    //In a normal chord diagram, this is the edge of the chord, which follows the 
    //arc of the large circle. 

    //However, in this case the start and end points are the same 
    //and nothing should be drawn 

    Q 0,0 -25,-331 
    //draw a quadratic curve to point (-25, -331) using control point (0,0) 
    //this is the curve you see, connecting different points on the large circle 

    A 332.5,332.5 0 0,1 -25,-331 
    //another arc with the same start and end points, which shouldn't be drawn 

    Q 0,0 329,-46 
    //Another quadratic curve, the exact same shape as the previous one 
    //but going back in the opposite direction; 
    //this is what causes the curve to look like a single line, no fill 

    Z" 
    //close the shape

這是您使用的Ubuntu Chrome版本中的一個明確錯誤。在同一點開始和結束的路徑弧段是supposed to be skipped，無論標記設置是什麼，因爲它們沒有明確定義。即使瀏覽器沒有自動跳過它，你也會認爲他們仍然會遵守「短弧」標誌並繪製一條長度爲零的弧線。

如果對特定瀏覽器版本的支持很重要，那麼您需要在代碼中添加錯誤檢查，以便在兩端的寬度爲零時不會繪製和絃，或者手動編輯路徑數據以刪除空的弧命令。

來源

2014-10-10 20:42:49 AmeliaBR

在不同版本的Chrome之間呈現不一致的SVG路徑元素

回答

相關問題