使用gif的img標籤內部的svg圖像不起作用

我想問一下，如果我將svg圖像的內部gif圖像作爲圖像標籤在網上使用。例如使用gif的img標籤內部的svg圖像不起作用

<img src="example.svg" />

所以我example.svg內部具有GIF，但是當我的圖像標籤放置在HTML中的GIF不玩了，而如果我在它扮演一個新標籤中打開該圖像。有什麼辦法可以玩嗎？

來源

2016-05-14 undefinedtoken

你的意思是，GIF可見，但不動畫或GIF不是可見的呢？ –

@RobertLongson GIF是可見的，但沒有動畫，我也試過數據URI方法，但仍然無法正常工作。 – undefinedtoken

如果你使用Firefox，它可能是[this]（https://bugzilla.mozilla.org/show_bug.cgi?id=1242256），我已經爲Firefox 48修復了這個問題。 –

嵌入<img>的SVG必須是自包含的。這是一個瀏覽器規則。如果你的SVG在第三個文件中引用了GIF，那麼它將不起作用。

您可以將GIF作爲數據URI嵌入到SVG中。或者您可以改爲使用<object>。

來源

2016-05-14 15:44:50

Convert and Image to data Uri using browser

這招工作在Chrome和Opera的新版本，因爲它們使用相同的渲染引擎。

加載包含圖像的頁面（直接加載圖像不起作用）並右鍵單擊它。選擇檢查元素。

鉻數據URI - 步驟1

你會看到控制檯顯示。現在點擊src屬性的值。

鉻數據URI - 步驟2

控制檯將切換到資源選項卡，並突出顯示圖像。右鍵單擊它，然後選擇將圖像複製爲數據URL。

Chrome瀏覽器數據的URI - 第3步

現在只需將其粘貼到您的HTML或CSS！

這是一個方法，另一種方法是貝羅給出

Using javascript and Canvas

function getDataUri(url, callback) { 
    var image = new Image(); 

    image.onload = function() { 
     var canvas = document.createElement('canvas'); 
     canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size 
     canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size 

     canvas.getContext('2d').drawImage(this, 0, 0); 

     // Get raw image data 
     callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '')); 

     // ... or get as Data URI 
     callback(canvas.toDataURL('image/png')); 
    }; 

    image.src = url; 
}

來源

2016-05-14 15:58:33

使用gif的img標籤內部的svg圖像不起作用

回答

相關問題