SVG tag doesn't work within polymer comp

问题:

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?

回答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.

回答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'.

回答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)