Question

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

为此，我创建了两个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>

SVG 2：

<?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>

CSS：

#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);}

HTML：

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

提前感谢您的帮助！

Answer 1

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

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

我认为你可以为非firefox浏览器做的是将<div>嵌入到<svg><foreignObject></foreignObject></svg>包装器中并剪切<foreignObject>元素。

SVG剪辑路径只适用于firefox--而不是chrome或safari？

1 个答案: