自定义元素/WebComponents 是否与 SVG 一起使用？

Question

For CustomElements I can do this:

class MyElement extends HTMLElement {}

Can I do the same for SVG Elements? like

class MyOwnRectangle extends SVGRectElement {}

If it works, can I trouble someone for a jsbin?

If not, why not?

This has some very good use cases like being able to store model data in the element itself. SVG manipulation is basically used in 2 major areas:

1. Animations
2. Diagrams like ER, Organisation Charts, Process flows etc.

A library like JointJS has its own abstractions in the form of classes (which extends a Backbone View) to store model data associated with the view (SVG diagrams on screen).

Like WebComponents can eventually replace jQuery Plugins, Framework X's components in a standard way, why not do the same for SVG?

Finally ,

How is Polymer 0.5 able to do this?

Does Polymer.js support inner SVG elements?

How is this patch able to do this in Polymer 1.0?

https://github.com/Polymer/polymer/pull/3372

What is the alternative for now?

I guess we can extend HTMLElement . In our ShadowDOM use an <svg> element and then attach all the SVG tags we actually want to extend like <rect> , <polyline> etc? Perhaps a much cleaner way out of this?

Will this be implemented in the future?

Answer 1

According to the specification

If result's namespace is not the HTML namespace, then throw a NotSupportedError.

All SVG elements are in the SVG namespace. So the speification precludes support.

Ways to store data in SVG include the the <metadata> tag and data- attributes .

Answer 2

You can try including your component inside a foreignObject tag encapsulated inside your svg, which requires x,y,height and width properties. This is a way to include any html element inside an svg.