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

【问题标题】：SVG clippath not working with foreignObject in ChromeSVG 剪辑路径不适用于 Chrome 中的 foreignObject
【发布时间】：2016-05-13 01:22:28
【问题描述】：

我正在尝试获取一些文本的视频掩码，覆盖在另一个视频实例之上。我在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 中，这只是将两个视频叠加在一起呈现，没有遮罩。知道为什么或是否有解决方法吗？

【问题讨论】：

标签： google-chrome svg mask clip-path

【解决方案1】：

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

【讨论】：