Firefox在SVG中插入轉義符-XML聲明格式不正確

Question

我有CSS代碼，可將元素的背景設置為SVG圖像，它在Chrome中可以正常工作，但在Firefox中，到處都有轉義字符，並且我的圖形無法顯示。

為什么Firefox給了我所有這些\\ ？

background-image: url("data:image/svg+xml;utf8,<?xml version=\"1.0\" encoding=\"utf-8\"?> <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> <svg version=\"1.1\" id=\"Isolation_Mode\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"19.636px\" height=\"10.83px\" viewBox=\"0 0 19.636 10.83\" enable-background=\"new 0 0 19.636 10.83\" xml:space=\"preserve\"> <polyline fill=\"none\" stroke=\"#e6e5e1\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-miterlimit=\"10\" points=\"2.232,1.882 9.818,8.741 17.403,1.882 \"/> </svg>")

Answer 1

您正在對URL和URL中包含的數據使用雙引號。 通常的事情是對一個使用單引號，對另一個使用雙引號，例如

background-image: url("data:image/svg+xml;utf8,<?xml version='...

要么

background-image: url('data:image/svg+xml;utf8,<?xml version="...

Firefox在您的情況下轉義內部引號是正確的。

Firefox無法顯示任何內容的原因是，URL中保留了＃字符以指示片段標識符 ，如果不使用該字符，則必須將其轉義為％23。 所以

stroke=\"#e6e5e1\"

是無效的。 Chrome應該拒絕此操作，但目前不接受，因此不能正確處理片段標識符。