【问题标题】：Using many external svg clippaths in firefox在 Firefox 中使用许多外部 svg 剪辑路径
【发布时间】：2017-01-26 22:28:08
【问题描述】：

问题

我正在尝试通过剪辑路径将两个图像裁剪为某个三角形，但是当我尝试将内联 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>

工作小提琴

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

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

【问题讨论】：

标签： html css svg clip-path

【解决方案1】：

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

【讨论】：