在 firefox 中使用许多外部 svg 剪辑路径

Question

问题

我试图通过剪切路径将两个图像裁剪成某个三角形，但是当我尝试将内联 svg 代码移动到外部文件时，只有 fp 剪切路径适用于图像。 sp 路径的图像完全消失。

请注意，我使用的是 Firefox，因此不能使用纯 css 和 clip-path: polygon() 样式。

SVG代码

<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
    <defs>
        <clipPath id="fp">
            <polygon points="0 0, 100 0, 0 100"/>
        </clipPath>

        <clippath id="sp">
            <polygon points="100 0, 100 100, 0 100"/>
        </clippath>
    </defs>
</svg>

正在工作fiddle

这个 fiddle 之所以有效，是因为它是内联 SVG。尝试将其移动到单独的文件并在 css 中引用它。不行。

https://jsfiddle.net/qkqovjmq/4/

Answer 1

我使用 jQuery clip path plugin 解决了这个问题，它可以正确渲染所有剪辑路径。