Question

我想问一下，如果我带有一个内部带有gif的svg图像，可以在网上用作图像标签。例如

<img src="example.svg" />

所以我的example.svg里面有一个gif，但是当我将图片标记放在html中时，gif不会播放，而如果我在新标签中打开该图像则播放。有什么方法可以播放吗？

Answer 1

嵌入<object>的SVG必须是自包含的。这是一个浏览器规则。如果您的SVG在第三个文件中引用了GIF，那么它将无效。

您可以将GIF作为数据URI嵌入SVG。或者您可以切换到使用{{1}}代替。

Answer 2

Convert and Image to data Uri using browser

这个技巧适用于Chrome和较新版本的Opera，因为它们使用相同的渲染引擎。

加载包含图片的页面（直接加载图片，然后右键单击它）。选择Inspect Element。

Chrome数据URI - 第1步

您将看到控制台出现。现在单击src属性的值。

Chrome数据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;
}

img标签内的svg图像与gif不起作用

2 个答案: