Chrome 中的 SVG 剪辑路径不适用于 foreignObject

Question

我正在尝试获取一些文本的视频遮罩，覆盖在另一个视频实例之上。我在FF中达到了预期的效果：

文本叠加层掩盖了它叠加在其上的同一视频的实例。我使用以下代码来执行此操作：

<video id="bkg" src="/locations.mp4" autoplay loop></video>

<svg class="svg" xmlns="http://www.w3.org/2000/svg">
<clippath id="cp-circle">
    <text
    text-anchor="middle"
    x="50%"
    y="98%"
    >TEXT TEXT</text>
</clippath>

<g clip-path="url(#cp-circle)">
    <foreignObject width="853" x="0"
                                 y="0" height="480">
        <body xmlns="http://www.w3.org/1999/xhtml">
        <video id="bkg2" src="/locations.mp4" autoplay loop></video>

        </body>
    </foreignObject>
</g>
</svg>
<script>
        document.getElementById("bkg").playbackRate = 0.8;
</script>

在 Chrome 中，这只是将两个视频叠加在一起，没有遮罩。知道为什么或是否有解决方法？

Answer 1

Chrome 不正确支持 SVG foreignObject。 WebKit 错误（已归档）。例如，参见 http://svgdesign.guru。

Chrome 中的 SVG 剪辑路径不适用于 foreignObject

SVG clippath not working with foreignObject in Chrome

google-chrome

svg

mask

clip-path