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

Polymer FAQ显示模板可以在<svg>元素中使用:

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

https://www.polymer-project.org/0.5/resources/faq.html#templateinsvg

确实这适用于Polymer 0.5! 但它并没有在聚合物0.9或1.0的工作.

在更改的Polymer 1.0语法中,它看起来像这样:

<svg>
    <template is="dom-repeat" items="{{lights}}">
        <circle cx="100" cy$="{{item.cy}}" r="50" fill$="{{item.color}}"/>
    </template>
</svg>

该元素未呈现,浏览器控制台显示:

TypeError: node is undefined   in polymer.html:28

该错误指的是Polymer的_parseNodeAnnotations()功能.

FAQ示例在0.5中工作显然表明SVG原则上不应该在Web组件或Polymer中工作.这让我希望Polymer团队能尽快解决这个问题.

不幸的是,你不能这样做.SVG命名空间中的元素需要在其中<svg>.创建<my-element>创建继承自的自定义元素HTMLElement.

但是,您可以<svg>在自定义元素中包含:http://jsbin.com/EXOWUFu/2/edit

另外,不要忘记自定义元素不能自动关闭.所以在你的例子中,<my-element />- > <my-element></<my-element>.这是因为HTML规范只允许一些元素自动关闭.

更新

事实证明,您可以在<svg>使用中嵌入自定义元素<foreignObject>.

演示:http://jsbin.com/hareyowi/1/edit

<foreignObject  >
  <x-foo></x-foo>
</foreignObject>