Polymer.js是否支持内部SVG元素? [英] Does Polymer.js support inner SVG elements?

问题描述

我看到了在自定义元素(例如

I see examples of using SVG elements within a custom element (such as here), but so far I haven't been able to figure out how to define a custom element to go inside an SVG element.

我尝试了以下操作，并且虽然模板内容确实出现在了Web检查器中，但是圆圈并没有直观地显示出来.

I've tried the following, and while the template content does appear in the web inspector, the circle doesn't appear visually.

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

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

让自定义元素在SVG元素中工作是否有用?

Is there a trick to getting custom elements to work within SVG elements?

推荐答案

不幸的是，您不能这样做. SVG名称空间中的元素必须在<svg>之内.创建<my-element>会创建一个继承自HTMLElement的自定义元素.

Unfortunately, you can't do this. Elements within the SVG namespace need to be within <svg>. Creating <my-element> creates a custom element that inherits from HTMLElement.

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

You can however, include <svg> in a custom element: http://jsbin.com/EXOWUFu/2/edit

此外，请不要忘记自定义元素不能自动关闭.因此，在您的示例中，<my-element />-> <my-element></<my-element>.这是因为HTML规范仅允许几个元素自动闭合.

Also, don't forget that custom elements cannot be self closing. So in your example, <my-element /> -> <my-element></<my-element>. This is because the HTML spec only allows a few elements to be self-closing.

更新

结果是您可以使用<foreignObject>在<svg>中嵌入自定义元素.

Turns out you can embed a custom element inside <svg> using <foreignObject>.

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

<foreignObject width="100" height="100">
  <x-foo></x-foo>
</foreignObject>

这篇关于Polymer.js是否支持内部SVG元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！