Polymer.js是否支持内部SVG元素？

我看到了在自定义元素（如）中使用SVG元素的示例，但到目前为止，我还没有弄清楚如何定义自定义元素以进入SVG元素

我尝试了以下方法，虽然模板内容确实出现在web inspector中，但圆圈并没有出现在视觉上

<polymer-element name=my-element noscript>
  <template>
    <circle cx=10 cy=10 r=5 />
  </template>
</polymer-element>

<svg>
    <my-element />
</svg>

---

让自定义元素在SVG元素中工作有什么诀窍吗？

不幸的是，您不能这样做。SVG名称空间中的元素需要在

中。创建

创建从

HTMLElement

继承的自定义元素

但是，您可以在自定义元素中包含

：

---

另外，不要忘记自定义元素不能自动关闭。因此，在您的示例中，

->

聚合物常见问题解答显示，模板可以在
元素中使用：

<svg>
    <template repeat="{{l in lights}}">
        <circle cx="100" cy="{{l.cy}}" r="50" fill="{{l.color}}"/>
    </template>
</svg>

错误涉及Polymer的
\u parseNodeAnotations（）
函数

FAQ示例在0.5中工作，这显然表明SVG原则上没有理由不在Web组件或聚合中工作。这让我希望Polymer团队能很快解决这个问题。
根据这个开放的标签（），实际上可以在svg元素中嵌套一个模板元素。我将在下面链接到的修复程序是0.5中代码的一个端口。这个问题在这里和公开的票证中都有详细的描述，所以不需要再重复一遍

重要提示：

如果你想向Google和polymer团队表明这确实是一个重要的功能，请确保在标签上留下评论


它确实在polymer 1.0中提供了预期的功能
它需要包含在每个可能使用它的web组件的.js文件的顶部
它还假定一个特定的html结构（您将在下面看到）
它现在只在chrome中工作

片段：

foo svg.css

foo-svg svg {
    border: 2px solid yellowgreen;
    fill: transparent;
    height: 400px;
    width: 400px;
}

(function () {
  // START HACK
  var doc = document.currentScript.ownerDocument;
  var root = doc.querySelector('dom-module > template').content;
  var templates = root.querySelectorAll('svg template');
  var el, template, attribs, attrib, count, child, content;
  for (var i=0; i<templates.length; i++) {
    el = templates[i];
    template = el.ownerDocument.createElement('template');
    el.parentNode.insertBefore(template, el);
    attribs = el.attributes;
    count = attribs.length;
    while (count-- > 0) {
      attrib = attribs[count];
      template.setAttribute(attrib.name, attrib.value);
      el.removeAttribute(attrib.name);
    }
    el.parentNode.removeChild(el);
    content = template.content;
    while ((child = el.firstChild)) {
      content.appendChild(child);
    }
  }
  // END HACK

  Polymer({
    is: 'foo-svg',

    properties: {
      paths: {
        type: Array,
        value: []
      }
    },

    ready () {
      this.positions = [0, 100, 200, 300];
    }
  });
})();

foo svg.html




foo svg.js

foo-svg svg {
    border: 2px solid yellowgreen;
    fill: transparent;
    height: 400px;
    width: 400px;
}

(function () {
  // START HACK
  var doc = document.currentScript.ownerDocument;
  var root = doc.querySelector('dom-module > template').content;
  var templates = root.querySelectorAll('svg template');
  var el, template, attribs, attrib, count, child, content;
  for (var i=0; i<templates.length; i++) {
    el = templates[i];
    template = el.ownerDocument.createElement('template');
    el.parentNode.insertBefore(template, el);
    attribs = el.attributes;
    count = attribs.length;
    while (count-- > 0) {
      attrib = attribs[count];
      template.setAttribute(attrib.name, attrib.value);
      el.removeAttribute(attrib.name);
    }
    el.parentNode.removeChild(el);
    content = template.content;
    while ((child = el.firstChild)) {
      content.appendChild(child);
    }
  }
  // END HACK

  Polymer({
    is: 'foo-svg',

    properties: {
      paths: {
        type: Array,
        value: []
      }
    },

    ready () {
      this.positions = [0, 100, 200, 300];
    }
  });
})();

（函数（）{
//开始攻击
var doc=document.currentScript.ownerDocument；
var root=doc.querySelector（'dom-module>template'）。内容；
var templates=root.querySelectorAll（'svg模板'）；
变量el、模板、属性、属性、计数、子项、内容；
对于（变量i=0；i 0）{
attrib=attribs[count]；
setAttribute（attrib.name，attrib.value）；
删除属性（属性名称）；
}
el.parentNode.removeChild（el）；
content=template.content；
而（（孩子=第一个孩子））{
内容。追加子项（子项）；
}
}
//结束攻击
聚合物({
是：“foo svg”，
特性：{
路径：{
类型：数组，
值：[]
}
},
就绪（）{
这个位置=[0110020300]；
}
});
})();
所以我要明确一点：Polymer/Web组件不能用于创建内联SVG树？我的示例使用Polymer动态创建了一个svg树。您不能像现在这样在SVG中内联HTML。这通常是正确的，与web组件无关。如果polymer以某种方式支持这一点，那就太好了。请参阅我的更新
有点老套，但是关于更新的工作：这仍然不是大多数人所期望的。从技术上讲，该示例是4个不同的SVG文档，它们相互重叠。事实上，Web组件，以及随后的Polymer，目前还不能完全与其他名称空间配合使用。
SVG内部将无法在Polymer 1.0上工作，这是一个公开的bug
<dom-module id="foo-svg">
<link rel="stylesheet" href="foo-svg.css"/>

<template>
    <svg class="clock" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <template is="dom-repeat" items="{{positions}}" as="cx">
            <circle cx$="{{cx}}" cy="25" r="25" stroke="black" />
        </template>
    </svg>
</template>
<script src="foo-svg.js"></script>

(function () {
  // START HACK
  var doc = document.currentScript.ownerDocument;
  var root = doc.querySelector('dom-module > template').content;
  var templates = root.querySelectorAll('svg template');
  var el, template, attribs, attrib, count, child, content;
  for (var i=0; i<templates.length; i++) {
    el = templates[i];
    template = el.ownerDocument.createElement('template');
    el.parentNode.insertBefore(template, el);
    attribs = el.attributes;
    count = attribs.length;
    while (count-- > 0) {
      attrib = attribs[count];
      template.setAttribute(attrib.name, attrib.value);
      el.removeAttribute(attrib.name);
    }
    el.parentNode.removeChild(el);
    content = template.content;
    while ((child = el.firstChild)) {
      content.appendChild(child);
    }
  }
  // END HACK

  Polymer({
    is: 'foo-svg',

    properties: {
      paths: {
        type: Array,
        value: []
      }
    },

    ready () {
      this.positions = [0, 100, 200, 300];
    }
  });
})();