SVG行程stroke-dasharray打印不正確爲PDF

打印行與stroke-dasharray以PDF創建不同的行爲，請看看image這裏。SVG行程stroke-dasharray打印不正確爲PDF

圖片A，我直接從瀏覽器（Chrome）中截取的截圖。 圖片B，是從同一頁打印的PDF。

請注意圖片B中的差異，破折號之間存在細線，這發生在Chrome或PhantomJS（可能是webkit相關？），並且不會發生在Firefox中。

我想要做的是將這種chart導出爲PDF，但正如您所看到的strokoe-dasharray未正確打印。

上面那張圖片是我從這個MDN頁面拿出來的，有什麼我可以解決的嗎？

2015-05-26 damcedami

在我的系統（OS X /鍍鉻），我看到了外筆畫在打印預覽中，但不是在導出的PDF。你到目前爲止嘗試過哪些解決方法？ [您正在使用的SVG示例]（https://mdn.mozillademos.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray$samples/Example?revision=648037）包含[invalid markup] （http://validator.w3.org/check?uri=https%3A%2F%2Fmdn.mozillademos.org%2Fen-US%2Fdocs%2FWeb%2FSVG%2FAttribute%2Fstroke-dasharray%24samples%2FExample%3Frevision%3D648037&charset =％28detect +自動％29＆doctype =內聯＆組= 0），所以修復這可能會有所幫助。嘗試使用Inkscape？ –

啊，愚蠢的我。我忘了添加屬性'fill =「none」'，謝謝指出。現在它已經修復了。 – damcedami

看起來這是由fill屬性的一些默認值引起的。您可以通過設置fill="none"，這樣解決它：

<line x1="0" x2="100" y1="0" y2="0" 
    stroke="black" 
    stroke-dasharray="1, 2" 
    fill="none />

來源

2017-11-28 00:30:06 Wolfgang

這看起來像[Chrome bug＃123072]（https://bugs.chromium.org/p/chromium/issues/detail?id=123072），但是在2012年關閉了，所以我不確定我爲什麼現在看到這個問題。 – Wolfgang

SVG行程stroke-dasharray打印不正確爲PDF

回答

相關問題