Using xlink:href for SVG in a <template> do not work

[asakurayoh]

Vue.js version

1.0.16

Reproduction Link

https://github.com/asakurayoh/vuejs-svg-bug/tree/master

Steps to reproduce

Only load the index.html in a webserver.

What is Expected?

The svg icon should be display event if in a .

What is actually happening?

The svg do not seam to be rendered in chrome, but work in Firefox and Safari. Bug of VueJS or Chrome?

[yyx990803]

Hmm, this is actually a Chrome bug! <svg> inside <template> are not created with proper namespace. This works as intended in Firefox.

I'd suggest open an issue at Chromium for this. In the meanwhile, you can use <script type="x/template"> instead.

[yyx990803]

Upon further investigation, this doesn't seem to be a namespace issue, still looking...

[yyx990803]

So, it is indeed a Chrome bug, but it only happens for <use xlink:href=""> inside <template> pointing to an external URL. It works outside of <template>, and works with defs in the same document.

Regardless, the bug would happen with or without Vue (you can simply append the template's content to body and it doesn't render)