Chrome中的SVG有時不會渲染

第三次編輯：這是一個正在運行的測試用例。看起來它與緩存svg spritesheet有關。如果我在我的服務器上配置緩存控制，以避免SVG緩存，則會發生這種情況。隨意查看源代碼（全部在一個文件中，但我不想在這裏包含全部內容）。Chrome中的SVG有時不會渲染

https://stuff.spherical.fish/svgtest.html

SECOND編輯：下面列出（直接噴射在index.html中的元素，而不是用外部spritesheet）的修復程序剛剛停止在Chrome V49（其我的測試頻道瀏覽器剛剛更新到）工作。 v48有間歇性渲染問題，但v49相當穩定並不會渲染任何東西它的引用遵循<svg><use></use></svg>模式;但只在一個大的，複雜的角度頁面。一個無聊簡單的測試案例工作正常。爲任何能夠直接指出我知道的問題或任何可能來自哪裏的人添加了獎勵。它確實不是文件未找到，因爲它仍然是一個間歇性的錯誤，並且整個頁面在firefox和safari中呈現得很好。

編輯：這絕對有一些涉及到外部資源。當我將SVG直接嵌入到index.html中並使用<use xlink:href="#id"></use>引用它們時，它們工作正常，但如果我在<use>元素中引用外部文件，則它們只會有時加載。我在Chrome中有一些奇怪的行爲（只有 - 這不會發生在歌劇，火狐，野生動物園）;我不知道這是什麼。自從至少在40年代初以來，我一直在看版本。

我的行爲是在一個ng重複的角結構中。一切都是一樣的 - 有一堆divs flexboxed在一起。還有一個SVG元素，如下所示：

<svg class="icon-3"> 
    <use xlink:href="/assets/trellis-icons.svg#icon-users"></use> 
</svg>

非常簡單。

事情是，對於這些重複元素的一些，圖標不呈現。檢查chrome開發工具中的元素表明呈現的SVG的<use>元素具有高度和寬度，而非呈現的元素具有零高度和寬度。

這並不是說這裏有任何真正的區別;我甚至還手動編輯了DOM，使其中一個違規項完全匹配其中一個渲染項，但svg仍然不渲染。這是一個相關的截圖。

你可以看到下面的（而忽略我與按鈕填充問題）中的第一行不具備的小腦袋和泡沫字圖標。這是一個間歇性問題 - 如果我重新加載頁面，它可能沒問題，或者也許沒有任何圖標會加載。

我想知道：是否存在一些與使用精靈表相關的晦澀問題（所有展現此行爲的SVG都在同一個大SVG文件中，並且被#id引用）異步加載或其他內容？

如果這真的是未知的/新的行爲，我會努力設計一個測試用例，但是構建可能依賴某種併發錯誤的東西很難。所以我想我會先問一下。

編輯添加：如果我將單獨的svg作爲獨立導出並以<img src="icon.svg">的方式使用它，則不會發生此行爲。如果我在一個獨立文件的圖標上使用svg，它仍會失敗。

編輯：每@ kaiido的請求，這裏是相關的問題的SVG。

<svg xmlns="http://www.w3.org/2000/svg"> 
    <!-- thirty other symbols snipped --> 
    <symbol id="icon-users" viewBox="0 0 512 512"> 
    <path d="m352 397c-15-16-78-32-109-48c-21-11-32-33-32-53c0-10 7-19 13-26c5-6 9-14 13-24c8-4 18-12 18-31c0-12-2-19-5-24c1-11 2-22 3-34c4-45-42-90-89-90c-47 0-92 45-88 90c1 12 2 23 3 34c-4 5-5 12-5 24c0 19 9 27 18 31c4 10 8 18 13 24c6 7 13 16 13 26c0 20-11 42-32 53c-18 9-48 19-72 28l0 68l354 0c0 0 0-32-16-48z m146-7c-21-8-46-16-62-24c-17-8-25-27-25-43c0-8 5-15 10-21c4-5 8-12 11-20c7-3 15-10 15-25c0-10-2-16-5-20c1-9 2-18 3-27c3-37-34-76-73-76c-38 0-75 39-72 76c1 9 2 18 3 27c-3 4-5 10-5 20c0 16 8 22 15 25c3 8 7 15 11 20c4 6 10 13 10 21c0 10-4 22-11 31c30 11 43 22 53 33c19 19 19 58 19 58l103 0z"/> 
    </symbol> 
</svg>

來源

2016-01-27 pfooti

在控制檯中的任何錯誤或類似？像這樣的錯誤存在一段時間後，修復是使用而不是。嘗試使用絕對URI和標記格式來解決問題，雖然看起來像一個很奇怪的錯誤。也許提交一張票？你也測試本地機器或遠程服務器，它存在於Firefox/IE？ –

控制檯上沒有錯誤，我正在使用。在localhost和遠程服務器上測試，bug只發生在chrome中：ff，safari都可以工作（不在IE/edge/opera上測試）。感覺像一個併發錯誤 - 它通常只是列表中的第一個項目，它會渲染那些沒有的東西，比如如果你嘗試使用沒有加載的svg，你什麼也得不到。我會搗鼓嘗試絕對的URI。 – pfooti

小更新 - 絕對URL並沒有幫助，也沒有切出我的SVG精靈列表中的所有cruft。（我原本剛剛爲開發工作導入了一個大的ol文件，但實際上只使用了其中10％的符號）。仍然是間歇性的（在角度應用程序中以導致DOM樹變異的方式單擊，最終會突然顯示圖標）。 – pfooti

嗯，事實證明這是一個錯誤鉻畢竟，和幾乎什麼我以爲是：改變在某些情況下圍繞休息<use>元素。這些情況基本上是：當svg spritesheet沒有在瀏覽器中緩存時。

https://code.google.com/p/chromium/issues/detail?id=580809

在金絲雀固定（M50），可能會合併到M49。

解決方法是在SVG spritesheet上設置大於零的緩存控制標頭。這也有助於解釋爲什麼我只在我的測試服務器中看到這個錯誤，而不是在生產環境中 - 我的測試版框中有不同的緩存設置。

來源

2016-02-08 18:34:05 pfooti

任何人都可以證實，這仍然是一個錯誤？我似乎在Chrome v。50.0.2661.102 m中遇到了完全相同的情況。我有一個wordpress網站，我經常遇到這個問題。 htaccess的具有高速緩存標頭設置爲這樣：< 「\（SVG）$」 FilesMatch> 報頭中設置的Cache-Control 「最大年齡= 604800」奇怪的是，我也有一個。 NET使用SVG精靈的Umbraco網站完全相同的方式，但在這裏我沒有遇到任何問題。 –

在當前版本的Chrome（〜v54，v55）中，我自己和其他一些人仍然看到這個問題。它看起來並不是完全相同的錯誤，谷歌在上面提到的鏈接錯誤中指出，它們的測試沒有失敗（儘管這並不能保證它不是同一個錯誤，測試也不準確）。有點瘋狂。 – LocalPCGuy

這個問題在鉻63上仍然存在。 – zhoujy

我也有這個bug。通過緩存&，然後通過webkit更新，通過pfooti解決方案進行修復。

但後來它回來了：不是一回事，但稍後可能對其他人有用。

我打開SVG用Inkscape（但在Illustrator中相同的作品，太），選擇我的對象和應用path>union，並保存：

<path class="st0" d="M32 272l128 48 16 160 80-112 112 112L480 32 32 272zm318.7 145.4L256 320l128-176-192 153.8-82.6-31 322-172.5-80.7 323.1z"/>

成爲

<path d="M480 32L32 272l128 48 16 160 80-112 112 112L480 32zm-48.6 62.3l-80.7 323.1L256 320l128-176-192 153.8-82.6-31 322-172.5z"/>

現在它的工作原理！

我不知道爲什麼，但Chrome似乎有一些問題的第一個語法。希望它有幫助！

來源

2016-10-03 10:46:19

屬性xlink:href自SVG 2（proof link）以來已棄用。 Chrome的新版本對此屬性很陌生。

如果您使用xlink:href（用於古代瀏覽器）和href（用於新瀏覽器）任何地方都可以正常工作。

來源

2017-11-16 15:02:15

FWIW，這是一段時間之前（版本48）與chrome相關的鉻錯誤，它沒有正確使用沒有緩存控制頭的資源。 – pfooti

此錯誤有時會在Chrome 62和單頁應用程序（Angular 1.6）中複製。如果內容是動態加載的幷包含SVG圖像。 –

是的，我對鉻63有同樣的問題。一年前，這個錯誤就存在了。現在它仍然存在。 – zhoujy

Chrome中的SVG有時不會渲染

回答

相關問題