SVG背景向下兼容优雅降级方法

网上有一种方法

background-image:url(fallback.png);
background-image:url(image.svg),none;

利用的技术是CSS3多背景，若是支持多背景，则使用svg，不然使用png。
实际上，支持多背景的浏览器并不是都支持svg背景，上面只对IE有效。IE从IE9开始同时支持多背景和svg背景，

通过测试，火狐和安卓浏览器中都是先支持多背景，后支持svg背景，
因此火狐和安卓安卓的低版本会没法显示图片，

我改一下

.twa-heart{ background-image:url(fallback.png);}
@media (-webkit-transform-3d),(min--moz-device-pixel-ratio:0),(-ms-high-contrast:active),(-ms-high-contrast:none),screen\0{
    :root .twa-heart{ background-image:url(image.svg);}
}

先保证有图显示，具备高版本浏览器特征的，使用svg背景，
我这里用-webkit-transform-3d区分安卓支持svg背景的版本，
能够保证都有图显示，只是chrome10如下浏览器即便支持svg背景的，也显示png。可是也过得去