Html SVG剪辑路径只能在firefox中使用，而不能在chrome或safari中使用？

我基本上有两个三角形，它们组合成一个矩形（浏览器屏幕的高度和宽度）

为此，我创建了两个SVG以应用于两个div

然而，由于某些原因，这只在firefox中起作用。当我尝试在safari和chrome中查看它时，div是隐藏的

请帮帮我！为什么会这样

SVG 1：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
    <filter id="blur" x="0%" y="0%" width="100%" height="100%">
        <feGaussianBlur stdDeviation="30" />
        <feColorMatrix type="saturate" values="2" />
    </filter>
    <filter id="unblur">
        <feGaussianBlur stdDeviation="0" />
        <feColorMatrix type="saturate" values="3" />
    </filter>
</defs>
<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
    <path id="svgPath" d="M0,0 L1,0 0,1z"/>
</clipPath>
<path id="svgMask" d="M0,0 L1,0 0,1z"  />
</svg>

HTML:

---

提前感谢您的帮助！

在Firefox中，SVG剪辑路径可以应用于html和SVG元素，这是SVG和html规范的扩展

Chrome/Safari和其他UAs目前只能将剪辑路径应用于SVG元素。我希望其他UAs在某个时候会支持剪辑非SVG内容，但我不知道什么时候

---

我想对于非firefox浏览器，您可以做的是将

嵌入

包装器中，并剪辑

元素。

可能相关：@TylerH是的，我已经看到了这一点，并尝试了建议的内容，随后将其标记为正确答案。但是，它仍然不起作用！那么为什么在chrome中起作用呢？它很好代码基本相同。不，不是！webkit clip path:polygon（）的语法与clip path:url（svgfile.svg#id）非常不同。显然，这正是Chrome支持所需要的。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
    <filter id="blur2" x="0%" y="0%" width="100%" height="100%">
        <feGaussianBlur stdDeviation="30" />
        <feColorMatrix type="saturate" values="2" />
    </filter>
    <filter id="unblur2">
        <feGaussianBlur stdDeviation="0" />
        <feColorMatrix type="saturate" values="3" />
    </filter>
    <clipPath id="svgClip2" clipPathUnits="objectBoundingBox">
    <polygon points="0 1 1 0 1 1"/>
</clipPath>
</defs>
</svg>

#top, #bottom{
    background: url(img/1.JPG) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index: 2;}
#top{
    -webkit-clip-path: url(clip.svg#svgClip);
    -moz-clip-path: url(clip.svg#svgClip);
    -o-clip-path: url(clip.svg#svgClip);
    clip-path: url(clip.svg#svgClip);
    filter: url(clip.svg#blur);}
#bottom{
    -webkit-clip-path: url(clip2.svg#svgClip2);
    -moz-clip-path: url(clip2.svg#svgClip2);
    -o-clip-path: url(clip2.svg#svgClip2);
    clip-path: url(clip2.svg#svgClip2);
    filter: url(clip2.svg#blur2);}

<div class="top"></div>
<div class="bottom"></div>