### What problem does this feature solve?

For SVG renderer, it would be flexible and creative if allow adding DOM to the chart through [`foreignObject`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject).

### What does the proposed API look like?

Currently no good idea about how to design the API in ECharts. Here is the proposed usage in zrender.

**DOM string**

```ts
// DOM string
const dom = new zrender.ForeignObject({
style: {
x: 600,
y: 250,
width: 200,
height: 400
},
rotation: -60 * Math.PI / 180,
originX: 600 + 200 / 2,
originY: 250 + 400 / 2,
// scaleX: 2,
// scaleY: 2,
html: `

Apache ECharts

一个基于 JavaScript 的开源可视化图表库

`
});
zr.add(dom);
```

**DOM Array**

```ts
// DOM array
const h1 = document.createElement('h1');
h1.className = 'hover-change-color';
h1.innerText = 'Created Element';
const p = document.createElement('p');
p.innerText = new Date().toLocaleString();
setInterval(() => p.innerText = new Date().toLocaleString(), 1e3);

const dom2 = new zrender.ForeignObject({
style: {
x: 600,
y: 150,
width: 200,
height: 200
},
originX: 600 + 200 / 2,
originY: 150 + 200 / 2,
scaleX: 0.8,
scaleY: 0.8,
html: [h1, p]
});
zr.add(dom2);
```

**Video**

```ts
// video
const video = document.createElement('video');
video.src = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/v4/zh/video/index.mp4';
video.poster = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/v4/zh/video/index-4.jpg';
video.muted = true;
video.autoplay = true;
video.controls = true;
video.loop = true;
video.style.objectFit = 'contain';
video.style.maxWidth = '100%';

const videoDom = new zrender.ForeignObject({
style: {
x: 50,
y: 250,
width: 400,
height: 400
},
html: video
});
zr.add(videoDom);
```

### Screenshot