svg on mobile

[redom]

svg on mobile

[gblok]

fix

var use = s('use');  use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#menu');
var icon = h('i', { className: 'icon ' }, [s('svg', [use])]);

[pakastin]

I'm pretty sure there's no xlink attribute, so it should be safe to use..

[pakastin]

You can now use s('use', { xlink: { href: '#menu' } }) (since v3.8.3) 😉

[pakastin]

There's SVG inside HTML inside SVG, that might be the issue. Desktop somehow renders HTML inside SVG, but mobile doesn't.

[pakastin]

body
  svg <-- this shouldn't be here..
    #root
      main
      section
        svg

[pakastin]

If you really need HTML inside SVG, you should use <foreignObject>, but better just not..

[pakastin]

Oh sorry, my mistake – let's see now..

[pakastin]

Could this be the reason:

Safari doesn't support href yet, you need to use xlink:href instead.
href is a new feature of the upcoming SVG 2 specification. xlink:href is the SVG 1.1 version.

https://stackoverflow.com/a/43962207

[pakastin]

I was thinking should I add s('use', { xlink: { href: '#menu' } }) as a convenience..