SVG标签< use>在Firefox中的聚合物组件中不起作用 [英] SVG tag <use> doesn't work within polymer component in Firefox

问题描述

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

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.

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

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

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

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

推荐答案

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

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>

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

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 :)

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

You are done: FF is satisfied now.

这篇关于SVG标签< use>在Firefox中的聚合物组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！