SVG弧渲染文物在Safari

我有一個非常簡單的SVG渲染：https://jsfiddle.net/091y7uyr/3/SVG弧渲染文物在Safari

有很多的數學代碼出現，但它的一點就是：

<svg style="position:fixed;top:0px;left:0px;width:100%;height:100%; 
pointer-events:none;"> 

<path d=" 
    M 65 51 
    A 434.180675278184 434.180675278184 
    0 0 0 
    275.01708984375 351.9502944946289 

    M 65 51 
    A 399.44622125592934 399.44622125592934 
    0 0 0 
    275.01708984375 351.9502944946289" 

    fill="black" fill-rule="evenodd"> 
</path> 

</svg>

這裏是結果：

但是，在Safari中，無論是在iOS（v9.3.4）和桌面（V9.1，構建11601.5.17.1），它看起來有點不同：

是否有人知道爲什麼會出現弧形邊緣之間的線，以及如何擺脫它？

來源

2016-08-23 jeron-diovis

您可以報告的webkit的bug [這裏]（https://webkit.org/reporting-bugs/） –

如何滾動頁面https://webkit.org/reporting-bugs到底部並閱讀一個突出顯示的文本「注意：Safari不是WebKit，Safari漏洞應該報告給Apple。」？ –

Webkit是一個渲染引擎，Safari是一個瀏覽器。如果你想使用瀏覽器chrome，那麼你需要Apple，如果它是你想要webkit的網頁的渲染。 –

您的SVG路徑構造有點奇怪。

<svg width="400px" height="400px"> 
 
    <path d="M 59 110 
 
      A 167.87197502859138 167.87197502859138 
 
      0 0 0 
 
      200 301 
 

 
      M 59 110 
 
      A 159.4783762771618 159.4783762771618 
 
      0 0 0 
 
      200 301" 
 
     fill="black" fill-rule="evenodd"></path> 
 
</svg>

您已經通過繪製2子路徑即開始在同一方向同一地點和曲線構成的形狀。所以你實際上有兩個circular segments重疊在一起。

如果我們分別繪製它們並且有點不透明，那麼可以看到實際發生的情況。

<svg width="400px" height="400px"> 
 
    <path d="M 59 110 
 
      A 167.87197502859138 167.87197502859138 
 
      0 0 0 
 
      200 301" fill="red" opacity="0.4"/> 
 
    <path d="M 59 110 
 
      A 159.4783762771618 159.4783762771618 
 
      0 0 0 
 
      200 301" fill="green" opacity="0.4"/> 
 
</svg>

你看到只有兩個（薄板半月型）之間的差異的原因是因爲你使用的是even-odd fill rule。當您使用偶數填充規則時，重疊子路徑通常會創建一個洞。

您在兩個端點之間看到的細線是由於兩個細分邊緣之間的反鋸齒的細微差異導致的僞影，這兩個細分邊緣完全位於彼此之上。消除鋸齒是使用色調來使線條邊緣看起來更平滑。這在所有瀏覽器上都可能發生。出於某種原因，它在Safari中更加引人注目。

幸運的是，在你的情況下，有一個簡單的修復。不要使用兩個子路徑，只需將它們組合到一個路徑中。有一個弧從矩形A到B，然後是一條弧返回到起點。如果你這樣做，你多餘的額外線將消失。

<svg width="400px" height="400px"> 
 
    <path d="M 59 110 
 
      A 167.87197502859138 167.87197502859138 
 
      0 0 0 
 
      200 301 
 
      A 159.4783762771618 159.4783762771618 
 
      0 0 1 
 
      59 110" 
 
     fill="black"></path> 
 
</svg>

來源

2016-08-23 12:07:08

多好的回答。這麼簡單。我絕對應該用圖紙練習更多...... 非常感謝！ –

SVG弧渲染文物在Safari

回答

相關問題