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

Question

我看到使用自定义元素(如内SVG元素的例子在这里),但到目前为止,我一直无法弄清楚如何定义自定义元素去里面的SVG元素.

我尝试了以下操作,虽然模板内容确实出现在Web检查器中,但圆圈看不到.

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

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

是否有一个技巧让自定义元素在SVG元素中工作？

Answer 1

不幸的是,你不能这样做.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 width="100" height="100">
  <x-foo></x-foo>
</foreignObject>

Answer 2

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团队能尽快解决这个问题.