javascript - 自定义元素/Web 组件可以与 SVG 一起使用吗？

Question

对于 CustomElements 我可以这样做:

class MyElement extends HTMLElement {}

我可以对 SVG 元素做同样的事情吗？喜欢

class MyOwnRectangle extends SVGRectElement {}

如果可以，能麻烦谁给个jsbin吗？

如果不是，为什么不呢？

这有一些非常好的用例，例如能够在元素本身中存储 model 数据。 SVG 操作 主要用于 2 个主要领域:

1. 动画
2. 图表，如 ER、组织结构图、流程等。

类似JointJS 的图书馆有自己的类形式的抽象(它扩展了主干 View )来存储与 View (屏幕上的 SVG 图)关联的模型数据。

就像 WebComponents 最终可以以标准方式取代 jQuery 插件、Framework X 的组件一样，为什么不对 SVG 做同样的事情呢？

最后，

Polymer 0.5 是如何做到这一点的？

Does Polymer.js support inner SVG elements?

这个补丁如何在 Polymer 1.0 中做到这一点？

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

目前有什么替代方案？

我想我们可以扩展 HTMLElement .在我们的 ShadowDOM 中使用 <svg>元素，然后附加我们实际想要扩展的所有 SVG 标签，如 <rect> , <polyline> ETC!也许有更简洁的方法？

以后会实现吗？

Answer 1

根据specification

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

所有 SVG 元素都在 SVG 命名空间中。因此规范排除了支持。

在 SVG 中存储数据的方法包括 the <metadata> tag和 data- attributes .