javascript - jQuery和svg文件

我正在开发一个网站，并希望实现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方法更聪明！任何帮助，将不胜感激！

最佳答案

我会坚持使用png解决方案。 99.5％的用户不会注意到。 HTML spec尚未为此做好准备（编辑草稿），而且恶意实施的成本超过了IMO的收益。如果仍然需要，请签出this solution。但是这一次，再次引用了polyfill开发人员的话：


  “注意：支持这么多的断点会迅速增加DOM的大小，并增加实现和维护时间，因此请谨慎使用此技术。”

关于javascript - jQuery和svg文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12335070/