检测浏览器支持SVG堆叠-Java 学习之路

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

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

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

除了...... Safari有点问题 . 即使Safari支持SVG返回到版本5及更低版本，SVG堆叠在版本<7.1中也不起作用 . 将显示图标所在的空白区域 .

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

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

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

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

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;
}

回复于 2024-04-28T16:01:21+08:00

检测浏览器支持SVG堆叠

1 回答

相关问题