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 bug（提起）。例如，请参阅http://svgdesign.guru。

SVG clippath无法在Chrome中使用foreignObject

1 个答案: