我正在尝试将视频嵌入到 svg 中（该 svg 只能在网络上查看）。为此，我使用了 foreignObject 标签：
<svg version="1.1" class="center-block" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600"
style="border: 1px solid black;">
<g>
<g transform="translate(151,104) scale(1,1)">
<rect x="0" y="0" width="300" height="200"></rect>
<foreignObject x="0" y="0" width="300" height="200">
<video width="300" height="200" controls="" style="position: fixed; left: 151px; top: 104px;">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</foreignObject>
</g>
</g>
</svg>它在显示视频的意义上“有效”，但它相对于其父级有几个像素<g>。我尝试了几种组合：带样式的视频、不带样式、带命名空间的视频标签等。这在 Firefox 中效果更好，但在 Chrome（Mac 和 Linux）中完全中断。我不想在 svg 之外添加 html 标签，因为这会更麻烦（svg 是用 React 动态创建的）。
有没有人能够得到类似的工作？