在firefox中使用许多外部svg clippath

Question

问题

我正在尝试通过clippath将两个图像裁剪为某种三角形，但是当我尝试将内联svg代码移动到外部文件时，只有fp clippath应用于图像。 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>

工作小提琴

这个小提琴有效，因为它是内联SVG。尝试将其移动到单独的文件并在css中引用它。它不起作用。

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

Answer 1

我使用正确呈现所有剪辑路径的jQuery clip path plugin解决了这个问题。