SVG tag <use> doesn't work within polymer component in Firefox

Question

Here is an example: http://miriti.ru/svgtest/ If you'll look at this example in any browser you will see two grey squares with green circles (labled "Symbol") inside. Except for Firefox (I am testing on Firefox 35.0.1 on windows and mac os x). These SVGs are absolutely identical but the second one is placed inside the polymer component.

Code on GitHub: https://github.com/miriti/svgtest

Any suggestion about what can be the cause of this problem?

Answer 1

I seem to find a workaround for your problem. First of all, wrap your <svg> element with <div id="content">. This is necessary, because later we will reinitialize the inner content of this div.

<template>
  <div id="content">
    <svg width="400" viewBox="0 0 400 400">
      ...
    </svg>
  </div>
</template>

Then in the script section do the following woodoo-magic:

  domReady: function() {
    this.async(function() { 
      this.injectBoundHTML(this.$.content.innerHTML, this.$.content); 
    }, this);
  }

Please don’t complain about the weirdness of this trick :)

You are done: FF is satisfied now.