В соответствии со спецификациями SVG объекты должны отображаться в порядке их добавления в объект SVG. Таким образом, первый SVG-объект находится внизу, а затем поверх него и т. Д.
В моем примере ниже видео является первым объектом и должно отображаться за окружностью, но на Chrome оно все еще отображается на top.
Я предполагаю, что в Chrome есть ошибка. Есть ли обходной путь?
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200">
<foreignObject x="0" y="0" width="100" height="100">
<video autoplay="" loop="" x="0" y="0" width="100" height="100" src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
</video>
</foreignObject>
<circle cx="0" cy="0" r="100" fill="red" />
</svg>
Вот JSFiddle https://jsfiddle.net/ErlingM/05cf7nod/48/