javascript - jQuery 和 svg 文件

Question

我正在开发一个网站，想要实现 svg 文件来帮助视网膜显示，但想要后备 png 文件作为备份。这是 html/js/css；

<div id="band">
</div> <!--band--> 

<script>
        $(document).ready(function() {
                if (Modernizr.inlinesvg) {
                //SVG.
            $('#band').html('<img src="barbGradient.svg"  />');
                } else {
                //No SVG.
            $('#band').html('<img src="barbGradient.png"  />');
            }
         });
</script>

这是CSS；

}

.no-inlinesvg div#band {
 position: relative;
 top: -950px;
 background-repeat: repeat-x;
 background-image: url('../_images/barbGradient.png');
 z-index: -1;

}

.inlinesvg div#band {
 position: relative;
 top: -950px;
 background-repeat: repeat-x;
 background-image: url('../_images/barbGradient.svg');
 z-index: -1;
}

所有浏览器的渲染都非常糟糕!我知道我可以包含两个不同分辨率的 png，但我发现 js 方法更聪明!任何帮助将不胜感激!

Answer 1

我会坚持使用 png 解决方案。 99.5% 的用户不会注意到。 HTML spec还没有为此做好准备(编辑草案)，并且实现不当的成本超过了 IMO 带来的好处。如果您仍然想要这个，请查看 this solution .但再次引用 polyfill 开发人员的话:

"Note: Supporting this many breakpoints quickly adds size to the DOM and increases implementation and maintenance time, so use this technique sparingly."