sng中的png/base64中的圖片在Safari中不顯示

Question

我在svg中嵌入了一個圖像，並試圖在Safari中繪製它。雖然它在Firefox中正常工作，但圖像不會在Safari中顯示。代碼很簡單，並顯示在下面。 現在奇怪的是，當我把這段代碼放到一個在線測試站點（http://www.rapidtables.com/web/tools/svg-viewer-editor.htm）時，它在Safari中正常工作......但是無論我把代碼放在我的網頁中，它都不起作用。 ？ 可能是與頁面其餘部分的不良交互，無法弄清楚在哪裏。

如果有人有建議，非常歡迎。

順便說一下，我試圖使用Blockly作爲項目，並生成此圖像並將其包含在Blockly SVG中。我幾乎成功地將一名編輯加入Blockly集團。

達米爾

<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="250px" height="50px"> 
    <image width="200px" height="40px" xlink:href="data:image/png;base64,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"> 
    </image> 
</svg> 

Answer 1

它不會在Chrome的工作，要麼。

問題是你的base64編碼是錯誤的。刪除這兩個在數據URI的末尾等號：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="250px" 
 
    height="50px"> 
 
    <image width="200px" height="40px" xlink:href="data:image/png;base64,iVBORw0KG 
 
    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"> 
 
    </image> 
 
</svg>