Question

以下是一个示例：http://miriti.ru/svgtest/ 如果您在任何浏览器中查看此示例，您将看到两个带有绿色圆圈（标有“符号”）的灰色方块。除了Firefox（我在Windows和Mac OS x上的Firefox 35.0.1上测试）。这些SVG绝对相同，但第二个SVG放在聚合物组件内。

GitHub上的代码：https://github.com/miriti/svgtest

有关这个问题可能原因的任何建议吗？

Answer 1

我似乎找到了解决问题的方法。首先，用<svg>包裹<div id="content">元素。这是必要的，因为稍后我们将重新初始化这个div的内部内容。

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

然后在脚本部分执行以下woodoo-magic：

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

请不要抱怨这招的奇怪之处：）

你完成了：现在FF很满意。

Answer 2

使用SVG精灵我遇到的问题与你描述的问题类似但不一样。所以我提出的建议并不是解决问题的方法，但是你可以通过使用iron-iconset-svg（https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg）完全避免这些问题，我认为这提供了一个更清洁/更简单的解决方案。它只是你的SVG精灵表的包装，所以你几乎以相同的方式定义你的图标，并使用铁图标。

定义自定义图标集（将其直接放入页面或将其包装在元素中+设置描述图标的名称，此处为：'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>

如果你把它们包起来，让我们说'你的自定义图标集'，你可以包含这样的图标集：

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

使用图标

当您需要一个图标时，您只需添加铁图标（https://elements.polymer-project.org/elements/iron-icons）并将其放置如下：

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

然后你可以给它一个类来应用样式，不需要使用'填充'作为颜色，只需使用'颜色'。

Answer 3

我将它固定在Polymer 1.0中，如下所示：

 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);
    }

但我不在我的组件中使用Bindings（还）

SVG标记<use>在Firefox </use>中的聚合物组件中不起作用

3 个答案: