Google chrome SVG clippath不使用Chrome中的foreignObject_Google Chrome_Svg_Mask_Clip Path

Google chrome SVG clippath不使用Chrome中的foreignObject

google-chrome svg

Google chrome SVG clippath不使用Chrome中的foreignObject,google-chrome,svg,mask,clip-path,Google Chrome,Svg,Mask,Clip Path,我试图得到一些文本的视频掩码，叠加在另一个视频实例上。我在FF中达到了预期效果：该文本覆盖覆盖了覆盖在其顶部的同一视频的一个实例。我使用以下代码来执行此操作： <video id="bkg" src="/locations.mp4" autoplay loop></video> <svg class="svg" xmlns="http://www.w3.org/2000/svg"> <clippath id="cp-circle">

我试图得到一些文本的视频掩码，叠加在另一个视频实例上。我在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>


文本
document.getElementById（“bkg”）.playbackRate=0.8；

在Chrome中，这只是将两个视频彼此叠加，而没有遮罩。知道为什么或者是否有解决办法吗？

Chrome不正确支持SVG foreignObject。WebKit错误（已存档）。例如，见