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

Question

这是一个例子：http://miriti.ru/svgtest/ 如果您在任何浏览器中查看此示例，您会看到内部有两个带有绿色圆圈（标记为 "Symbol"）的灰色方块。除了 Firefox（我正在 windows 和 mac os x 上测试 Firefox 35.0.1。这些 SVG 完全相同，但第二个 SVG 位于聚合物组件内。

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

关于导致此问题的原因有什么建议吗？

Answer 1

我似乎找到了解决您的问题的方法。首先，用 <div id="content"> 包装你的 <svg> 元素。这是必须的，因为后面我们会重新初始化这个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) 来完全避免此类问题，我认为它提供了 cleaner/easier 解决方案。它只是 SVG sprite sheet 的包装器，因此您几乎可以用相同的方式定义图标并将它们与 iron-icon 一起使用。

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

使用图标

当您需要一个图标时，您只需包含 iron-icons (https://elements.polymer-project.org/elements/iron-icons) 并像这样放置它：

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

然后您可以给它一个 class 来应用样式并且不需要使用 'fill' 作为它的颜色，只需使用 'color'。

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

但我还没有在我的组件中使用绑定

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

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

html

svg

web-component

polymer