ios - PhoneGap SVG 作为 iOS 上的 data-uri
<p><p>似乎是一个奇怪的问题，我可以在桌面上的 Chrome 上看到我的 SVG，但当我将它编译到手机时却不行。</p>
<p>如果我使用 Safari 检查元素，然后选择 iPhone 模拟器，我可以看到 Data-URI，然后当我在计算机上单击它时，我可以看到图像。 </p>
<p>我绝对可以看到具有正确高度和宽度的 div，但我看不到 SVG 背景图像。</p>
<p>据我所知，iOS 3.2 及更高版本完全支持此功能 - <a href="http://caniuse.com/svg" rel="noreferrer noopener nofollow">http://caniuse.com/svg</a>和 <a href="http://caniuse.com/datauri" rel="noreferrer noopener nofollow">http://caniuse.com/datauri</a> </p>
<p>代码是:</p>
<pre><code>span {
background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjcxIiBoZWlnaHQ9IjQ4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI1MCIgd2lkdGg9IjczIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxpbWFnZSB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUVjQUFBQXdDQVlBQUFCRGwyZG1BQUFBR1hSRldIUlRiMlowZDJGeVpRQkJaRzlpWlNCSmJXRm5aVkpsWVdSNWNjbGxQQUFBQTdwcFZGaDBXRTFNT21OdmJTNWhaRzlpWlM1NGJYQUFBQUFBQUR3L2VIQmhZMnRsZENCaVpXZHBiajBpNzd1L0lpQnBaRDBpVnpWTk1FMXdRMlZvYVVoNmNtVlRlazVVWTNwcll6bGtJajgrSUR4NE9uaHRjRzFsZEdFZ2VHMXNibk02ZUQwaVlXUnZZbVU2Ym5NNmJXVjBZUzhpSUhnNmVHMXdkR3M5SWtGa2IySmxJRmhOVUNCRGIzSmxJRFV1TlMxak1ERTBJRGM1TGpFMU1UUTRNU3dnTWpBeE15OHdNeTh4TXkweE1qb3dPVG94TlNBZ0lDQWdJQ0FnSWo0Z1BISmtaanBTUkVZZ2VHMXNibk02Y21SbVBTSm9kSFJ3T2k4dmQzZDNMbmN6TG05eVp5OHhPVGs1THpBeUx6SXlMWEprWmkxemVXNTBZWGd0Ym5NaklqNGdQSEprWmpwRVpYTmpjbWx3ZEdsdmJpQnlaR1k2WVdKdmRYUTlJaUlnZUcxc2JuTTZlRzF3VW1sbmFIUnpQU0pvZEhSd09pOHZibk11WVdSdlltVXVZMjl0TDNoaGNDOHhMakF2Y21sbmFIUnpMeUlnZUcxc2JuTTZlRzF3VFUwOUltaDBkSEE2THk5dWN5NWhaRzlpWlM1amIyMHZlR0Z3THpFdU1DOXRiUzhpSUhodGJHNXpPbk4wVW1WbVBTSm9kSFJ3T2k4dmJuTXVZV1J2WW1VdVkyOXRMM2hoY0M4eExqQXZjMVI1Y0dVdlVtVnpiM1Z5WTJWU1pXWWpJaUI0Yld4dWN6cDRiWEE5SW1oMGRIQTZMeTl1Y3k1aFpHOWlaUzVqYjIwdmVHRndMekV1TUM4aUlIaHRjRkpwWjJoMGN6cE5ZWEpyWldROUlrWmhiSE5sSWlCNGJYQk5UVHBQY21sbmFXNWhiRVJ2WTNWdFpXNTBTVVE5SW5odGNDNWthV1E2TVVGR1JrSTNSVGt3UlVaRVJURXhNVUZCT1VVNVFUVkNRekZDTmtRM09UVWlJSGh0Y0UxTk9rUnZZM1Z0Wlc1MFNVUTlJbmh0Y0M1a2FXUTZRemc0UWpnMVFVSTNOVVkzTVRGRk0wRkNPVUpDT1VWQ1FqaEJRVVEzUlRraUlIaHRjRTFOT2tsdWMzUmhibU5sU1VROUluaHRjQzVwYVdRNlF6ZzRRamcxUVVFM05VWTNNVEZGTTBGQ09VSkNPVVZDUWpoQlFVUTNSVGtpSUhodGNEcERjbVZoZEc5eVZHOXZiRDBpUVdSdlltVWdVR2h2ZEc5emFHOXdJRU5ESUNoTllXTnBiblJ2YzJncElqNGdQSGh0Y0UxTk9rUmxjbWwyWldSR2NtOXRJSE4wVW1WbU9tbHVjM1JoYm1ObFNVUTlJbmh0Y0M1cGFXUTZPV1EzWmpOa01EWXRNemM0WlMwME16Z3lMV0l4TWprdFltSmhOamcxTURBM1ltVXlJaUJ6ZEZKbFpqcGtiMk4xYldWdWRFbEVQU0o0YlhBdVpHbGtPakZCUmtaQ04wVTVNRVZHUkVVeE1URkJRVGxGT1VFMVFrTXhRalpFTnprMUlpOCtJRHd2Y21SbU9rUmxjMk55YVhCMGFXOXVQaUE4TDNKa1pqcFNSRVkrSUR3dmVEcDRiWEJ0WlhSaFBpQThQM2h3WVdOclpYUWdaVzVrUFNKeUlqOCtVdlZzM1FBQUFjVkpSRUZVZU5yc203RkxBbEVjeCs5VXNpVUlIQnFhSEp6OFY2S2dvQkNoSktFL29DaG9hV2d3TE93UENBd05SQXdzaXY2Q3hyWUdKd2VuaGdhbkppTzd2dDk2aW5mM3FyVzQ3d2UrZHo1eDhjTzdkNy8zN3AzcmVaNXpkSHlhY2h4bkMxbEY1aEhQSkNxNEprL0lKWEsydjdmZGQwdmx5aXdhVldUWkVTT3VrR0lDaHcySkNVRWY5ekVjY25KaEpVYzVhWG13a3FhY29UeFlHVkpPUng2c2RDaW5KZzlXYXBUVFJrN2t3Z2Q5dEYxVEJDYlJXRUlXSndibzl3akppSmx6RDdsRmJsQUVEajdsakRDU2txWVp0UXFaRENobC9PV2tIR0h2VGtKeUpFZHlKRWR5L2k2SnlRYnFuQ21jNW95MHFOVTVMSHFmVWVlOCt1b2NTSm5CNXlLeWdLVE1qNk1taC8rM2o5d2hWVWg2R1MyVFZwRDFZRStLS0cvSUJiSkRHV3ZJcHB6NGhocjZlT0RZa3BjUEszbkt5Y2lEbFl4dTViL1VPVjFwc05LbG5JWThXR2xRVGdzNU43Y3c4ZVdCUGxvcUFuOHFBZ1BMcEpvK0JLY1BRck55eVpFY3laRWN5Zm12QkpkSjlUZzQrRGhZR3dtKzJVaFFLbGVtMFRoRWRuVWhqZUVXbEFOZVZpc1NFNEkrSHRtZENuSmhwVUE1V1htd2txV2N1RHhZaWNmTUNDM0M5Q2luS1E5V21wUlRSNjdsd2dkOTFGMjlValN1a0VPdkZIMElNQUNpWFpXT2g4VGJiQUFBQUFCSlJVNUVya0pnZ2c9PSIgaWQ9InN2Z18xIiBoZWlnaHQ9IjQ4IiB3aWR0aD0iNzEiIHk9IjAiIHg9IjAiLz4KIDwvZz4KPC9zdmc+');
background-size:100%;
display:block;
width:31px;
height:20px;
}
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我在简短搜索中看到的唯一示例(<a href="http://jsfiddle.net/estelle/SJjJb/" rel="noreferrer noopener nofollow">here</a> 和 <a href="http://codepen.io/netsi1964/full/wCqbp" rel="noreferrer noopener nofollow">here</a>)不使用 base64 编码数据。可能值得一试？</p>
<pre class="lang-js prettyprint-override"><code>// some code so I can post a link to JS fiddle
</code></pre></p>
<p style="font-size: 20px;">关于ios - PhoneGap SVG 作为 iOS 上的 data-uri，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/21138790/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/21138790/
</a>
</p>
页:
[1]