Search code examples
csssvgbackground-imagespritefragment-identifier

How to use SVG fragment identifier for CSS background image on iOS?

I'm using SVG sprite and referencing fragment identifiers in it for CSS background image. The CSS code looks like this: background: url(sprite.svg#icon-1);.

It works on Firefox/Win7, Google Chrome/Win7, IE11/Win7, IE10/Win8, Firefox/Android 4.4.2, and Google Chrome/Android 4.4.2. However, it does not work on iOS 9.3.4.

Here is a demonstration on Plunker. (And here is a shorter url for easier accesses for mobile devices: goo.gl/P9xG4E)

Is it possible to get iOS working with this method?

== Update ==
On Android 4.4.2, unlike Firefox and Google Chrome, the built-in Android browser does not support the feature.

Solution

  • Can I Use tells us that this is not supported on Safari (Mac or iOS).

    Also note that it wasn't supported on Android browser up to 4.4.4, which are still quite common, and some other browsers have limitations.