Firefox在閱讀時拋出錯誤內聯SVG中的#hex顏色代碼

這不會發生在Chrome上，但至少在FF和MS Edge上會發生。在FF中，當您嘗試在CSS url()或object標記內繪製svg時，如果svg包含像#FF0000這樣的#hex顏色，它將會崩潰。讓我告訴你一個例子：Firefox在閱讀時拋出錯誤內聯SVG中的#hex顏色代碼

<p>Not using # colors</p> 
 
<object type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,<?xml version='1.0' encoding='utf-8'?><svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'><circle fill='red' cx='50' cy='54.7' r='15.72'/></svg>"> 
 
    No SVG UTF8 
 
</object> 
 

 
<p>Using #hex colors (won't show on FF)</p> 
 
<object type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,<?xml version='1.0' encoding='utf-8'?><svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'><circle fill='#FF0000' cx='50' cy='54.7' r='15.72'/></svg>"> 
 
    No SVG UTF8 
 
</object>

它爲什麼會發生？ SVG中有沒有其他方法可以編寫這些顏色？

來源

2016-07-19 Vandervals

這是因爲'＃'是URI方案中的一個特殊字符，它需要進行編碼。爲此，在JavaScript中，可以使用'encodeURIComponent（yourString）'方法。 – Kaiido

@Kaiido其實修復了這個問題，但這很奇怪，因爲例如空格不需要編碼......爲什麼＃會這樣做？只在非webkit瀏覽器上...？奇怪！ – Vandervals

不，這並不奇怪，''用作URI方案中的分片分隔符，空格不是。 – Kaiido

在URL中的哈希字符被保留，以指示fragment identifier的開始。

您需要將＃編碼爲％23。

這是一個Chrome的錯誤，它不強制執行此規則或確實解析URLs正確。

來源

2016-07-19 12:54:32

我甚至會建議編碼任何特殊字符：如果我確實沒有記錯，IE也有'''字符的問題。 – Kaiido

我堅信，你正在做一些與object標記屬性有關的問題。我只是刪除了一些屬性並簡化了它。

<object type="image/svg+xml"> 
 
    <svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'> 
 
    <circle fill='#FF0000' cx='50' cy='54.7' r='15.72' /> 
 
    </svg> 
 
    No SVG UTF8 
 
</object>

在這種情況下，它的工作沒有任何問題。

此外，嵌入svg代碼沒有必要有object。你可以簡單地把它寫在HTML文件中。

<svg version='1.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='70px' height='70px' viewBox='0 0 100 100' xml:space='preserve'> 
 
    <circle fill='#FF0000' cx='50' cy='54.7' r='15.72' /> 
 
</svg>

你可以參考MDN瞭解更多詳細信息。

如果你要使用SVG圖像作爲 data url，首先你需要使用像 mobilefish網站代管的一些工具來編碼您的圖像。

<object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 
 
sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHg9JzBweCcgeT0nMHB4Jy 
 
B3aWR0aD0nNzBweCcgaGVpZ2h0PSc3MHB4JyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sOnNwY 
 
WNlPSdwcmVzZXJ2ZSc+CiAgICA8Y2lyY2xlIGZpbGw9JyNGRjAwMDAnIGN4PSc1MCcgY3k9JzU0 
 
LjcnIHI9JzE1LjcyJyAvPgogIDwvc3ZnPg=="> 
 
    fallback 
 
</object>

來源

2016-07-19 12:47:01 niyasc

這個問題是當你嘗試使用它作爲'data：image/...'嘗試使用'url（data：image/...）'像在本文底部解釋的那樣在背景中加載它： https://css-tricks.com/using-svg/ – Vandervals

爲什麼不使用瀏覽器提供的工具？你可能有一個控制檯，它將授予你訪問全局'encodeURIComponent'和它的小妹妹'encodeURI'方法的權限。 – Kaiido

@Kaiido。謝謝，我不知道這個功能。 – niyasc

Firefox在閱讀時拋出錯誤內聯SVG中的#hex顏色代碼

回答

相關問題