SVG Tag Doesn't Work Within Polymer Component In Firefox

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 Fi

Solution 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.

Solution 2:

Using SVG sprites I ran into issues that are similar to the one you describe but not the same. So what I propose is not exactly a solution to your problem, however you could avoid such issues altogether by using iron-iconset-svg (https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg), which in my opinion provides a cleaner/easier solution. Its simply a wrapper for your SVG sprite sheet, so you define your icons almost the same way and use them with iron-icon.

Defining a custom iconset (put it directly into the page or wrap it inside an element + set a name that describes the icons, here: 'your-iconset-name')

<iron-iconset-svg name="your-iconset-name" size="24">
  <svg>
    <defs>
      <g id="your-icon-name">
        <rect x="12" y="0" width="12" height="24" />
        <circle cx="12" cy="12" r="12" />
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

If you wrap them, lets say in 'your-custom-iconset', you can include the iconset like this:

<your-custom-iconset></your-custom-iconset>

Using icons

When you need an icon you just include iron-icons (https://elements.polymer-project.org/elements/iron-icons) and place it like this:

<iron-icon icon="your-iconset-name:your-icon-name"></iron-icon>

You can then give it a class to apply styling and don't need to use 'fill' for its color, just use 'color'.

Solution 3:

I fixed it in Polymer 1.0 like this:

 attached: function () {
        //Fix "svg-use" in Firefox!! -> Properly bad for Performance (Issue: https://github.com/Polymer/polymer/issues/1182)
        this.async(function () {
            this.$.content.innerHTML = this.$.content.innerHTML;
        }, this);
    }

but I don't use Bindings in my component (yet)