似乎是一个奇怪的问题,我可以在桌面上的Chrome上看到我的SVG,但是当我将其编译到手机时却没有。
如果我使用Safari检查元素然后选择iPhone模拟器,我可以看到Data-URI,然后当我在计算机上点击它时,我可以看到图像。
我绝对可以看到那里的div有正确的高度和宽度,但我看不到SVG背景图片。
据我所知,iOS 3.2及以上版本完全支持此版本 - http://caniuse.com/svg和http://caniuse.com/datauri
代码是:
span {
background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjcxIiBoZWlnaHQ9IjQ4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI1MCIgd2lkdGg9IjczIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxpbWFnZSB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUVjQUFBQXdDQVlBQUFCRGwyZG1BQUFBR1hSRldIUlRiMlowZDJGeVpRQkJaRzlpWlNCSmJXRm5aVkpsWVdSNWNjbGxQQUFBQTdwcFZGaDBXRTFNT21OdmJTNWhaRzlpWlM1NGJYQUFBQUFBQUR3L2VIQmhZMnRsZENCaVpXZHBiajBpNzd1L0lpQnBaRDBpVnpWTk1FMXdRMlZvYVVoNmNtVlRlazVVWTNwcll6bGtJajgrSUR4NE9uaHRjRzFsZEdFZ2VHMXNibk02ZUQwaVlXUnZZbVU2Ym5NNmJXVjBZUzhpSUhnNmVHMXdkR3M5SWtGa2IySmxJRmhOVUNCRGIzSmxJRFV1TlMxak1ERTBJRGM1TGpFMU1UUTRNU3dnTWpBeE15OHdNeTh4TXkweE1qb3dPVG94TlNBZ0lDQWdJQ0FnSWo0Z1BISmtaanBTUkVZZ2VHMXNibk02Y21SbVBTSm9kSFJ3T2k4dmQzZDNMbmN6TG05eVp5OHhPVGs1THpBeUx6SXlMWEprWmkxemVXNTBZWGd0Ym5NaklqNGdQSEprWmpwRVpYTmpjbWx3ZEdsdmJpQnlaR1k2WVdKdmRYUTlJaUlnZUcxc2JuTTZlRzF3VW1sbmFIUnpQU0pvZEhSd09pOHZibk11WVdSdlltVXVZMjl0TDNoaGNDOHhMakF2Y21sbmFIUnpMeUlnZUcxc2JuTTZlRzF3VFUwOUltaDBkSEE2THk5dWN5NWhaRzlpWlM1amIyMHZlR0Z3THpFdU1DOXRiUzhpSUhodGJHNXpPbk4wVW1WbVBTSm9kSFJ3T2k4dmJuTXVZV1J2WW1VdVkyOXRMM2hoY0M4eExqQXZjMVI1Y0dVdlVtVnpiM1Z5WTJWU1pXWWpJaUI0Yld4dWN6cDRiWEE5SW1oMGRIQTZMeTl1Y3k1aFpHOWlaUzVqYjIwdmVHRndMekV1TUM4aUlIaHRjRkpwWjJoMGN6cE5ZWEpyWldROUlrWmhiSE5sSWlCNGJYQk5UVHBQY21sbmFXNWhiRVJ2WTNWdFpXNTBTVVE5SW5odGNDNWthV1E2TVVGR1JrSTNSVGt3UlVaRVJURXhNVUZCT1VVNVFUVkNRekZDTmtRM09UVWlJSGh0Y0UxTk9rUnZZM1Z0Wlc1MFNVUTlJbmh0Y0M1a2FXUTZRemc0UWpnMVFVSTNOVVkzTVRGRk0wRkNPVUpDT1VWQ1FqaEJRVVEzUlRraUlIaHRjRTFOT2tsdWMzUmhibU5sU1VROUluaHRjQzVwYVdRNlF6ZzRRamcxUVVFM05VWTNNVEZGTTBGQ09VSkNPVVZDUWpoQlFVUTNSVGtpSUhodGNEcERjbVZoZEc5eVZHOXZiRDBpUVdSdlltVWdVR2h2ZEc5emFHOXdJRU5ESUNoTllXTnBiblJ2YzJncElqNGdQSGh0Y0UxTk9rUmxjbWwyWldSR2NtOXRJSE4wVW1WbU9tbHVjM1JoYm1ObFNVUTlJbmh0Y0M1cGFXUTZPV1EzWmpOa01EWXRNemM0WlMwME16Z3lMV0l4TWprdFltSmhOamcxTURBM1ltVXlJaUJ6ZEZKbFpqcGtiMk4xYldWdWRFbEVQU0o0YlhBdVpHbGtPakZCUmtaQ04wVTVNRVZHUkVVeE1URkJRVGxGT1VFMVFrTXhRalpFTnprMUlpOCtJRHd2Y21SbU9rUmxjMk55YVhCMGFXOXVQaUE4TDNKa1pqcFNSRVkrSUR3dmVEcDRiWEJ0WlhSaFBpQThQM2h3WVdOclpYUWdaVzVrUFNKeUlqOCtVdlZzM1FBQUFjVkpSRUZVZU5yc203RkxBbEVjeCs5VXNpVUlIQnFhSEp6OFY2S2dvQkNoSktFL29DaG9hV2d3TE93UENBd05SQXdzaXY2Q3hyWUdKd2VuaGdhbkppTzd2dDk2aW5mM3FyVzQ3d2UrZHo1eDhjTzdkNy8zN3AzcmVaNXpkSHlhY2h4bkMxbEY1aEhQSkNxNEprL0lKWEsydjdmZGQwdmx5aXdhVldUWkVTT3VrR0lDaHcySkNVRWY5ekVjY25KaEpVYzVhWG13a3FhY29UeFlHVkpPUng2c2RDaW5KZzlXYXBUVFJrN2t3Z2Q5dEYxVEJDYlJXRUlXSndibzl3akppSmx6RDdsRmJsQUVEajdsakRDU2txWVp0UXFaRENobC9PV2tIR0h2VGtKeUpFZHlKRWR5L2k2SnlRYnFuQ21jNW95MHFOVTVMSHFmVWVlOCt1b2NTSm5CNXlLeWdLVE1qNk1taC8rM2o5d2hWVWg2R1MyVFZwRDFZRStLS0cvSUJiSkRHV3ZJcHB6NGhocjZlT0RZa3BjUEszbkt5Y2lEbFl4dTViL1VPVjFwc05LbG5JWThXR2xRVGdzNU43Y3c4ZVdCUGxvcUFuOHFBZ1BMcEpvK0JLY1BRck55eVpFY3laRWN5Zm12QkpkSjlUZzQrRGhZR3dtKzJVaFFLbGVtMFRoRWRuVWhqZUVXbEFOZVZpc1NFNEkrSHRtZENuSmhwVUE1V1htd2txV2N1RHhZaWNmTUNDM0M5Q2luS1E5V21wUlRSNjdsd2dkOTFGMjlValN1a0VPdkZIMElNQUNpWFpXT2g4VGJiQUFBQUFCSlJVNUVya0pnZ2c9PSIgaWQ9InN2Z18xIiBoZWlnaHQ9IjQ4IiB3aWR0aD0iNzEiIHk9IjAiIHg9IjAiLz4KIDwvZz4KPC9zdmc+');
background-size:100%;
display:block;
width:31px;
height:20px;
}