Question

SVG堆叠是一种将多个SVG图像（如图标）填充到单个文件中的技术，可以在单个HTTP请求中下载图标集。它类似于PNG精灵，除了更容易更改/维护。

使用SVG网址中的#片段标识符选择要显示的SVG。该技术是explained here。

虽然这种技术在浏览器支持方面可能存在争议，但（并且Chrome并不支持CSS background-image），但如果使用{{1}完成，它在大多数浏览器中效果都非常好}} 标签。它在IE9 +，Chrome和Firefox中作为<img>标记使用，因此只有在需要支持IE8等旧版浏览器时才需要回退到PNG。

除了...... Safari有点问题。尽管Safari支持SVG返回到版本5及更低版本，但SVG 堆叠在版本＆lt; 7.1。图标应显示在空白处。

因此，截至目前，可能需要回退。但是我们如何使用特征检测来确定是否需要回退到PNG精灵（或者至少隐藏SVG图标以便不显示空白区域。）

讨论SVG堆栈的各种文章谈论为不支持SVG的浏览器提供回退。从本质上讲，最常见的技术是简单地使用Modernizer来检测是否支持SVG，如果不支持，则使用PNG，demonstrated here。

但据我所知，没有人讨论浏览器支持SVG的情况，但不支持SVG堆叠。据我所知，至少Safari 5到7.0属于这一类：这些浏览器支持SVG，但显然不支持<img>伪选择器，使SVG堆叠能够正常工作。

那么如何检测这种情况呢？我们是否必须依赖用户代理嗅探？

Answer 1

有趣的问题！

通常，浏览器无法回答有关它不知道的功能。但是，我想到了一些技巧。

当图像正常时，表示其中的像素不同，对吧？如果我们看到一个空白区域就意味着，它的所有像素都是相同的，如果它们是白色的，透明的或其他什么都无关紧要。

因此，我们可以将图像加载到画布中，拍摄第一个像素并将其余像素与其进行比较。如果找到不同的东西，则支持该功能，否则不支持。类似下面的代码：

function isSVGLayersSupported(img)
{
    // create canvas and draw image to it
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext("2d").drawImage(img, 0, 0);

    // get cancas context and image data
    var ctx = canvas.getContext("2d");
    var imageData = ctx.getImageData(0, 0, img.width, img.height);

    // Processing image data
    var data = imageData.data;
    var firstR = data[0];
    var firstG = data[1];
    var firstB = data[2];
    var firstAlpha = data[3];

    for (var i = 4; i < data.length; i += 4) {
        if ((data[i] != firstR) ||
           (data[i+1] != firstG) ||
           (data[i+2] != firstB) ||
           (data[i+3] != firstAlpha))
               return true;
    }

    return false;
}

检测浏览器支持SVG堆叠

1 个答案: