如何使用css剪辑路径和svg路径来屏蔽html元素

我想用SVG制作一个带有动画波浪的水滴。我使用SVG

clipPath

来定义剪辑路径，使用CSS

clip path

来屏蔽内部div，我需要在页面中心放置水滴。

当我将外部div（绝对位置）向左或向上移动时，水滴将不会显示在页面中（请参阅）。我要水滴在中间位置。如果我删除

ab

类及其CSS属性，水滴将显示出来

---

我搞混了剪辑路径只能在页面左上方使用？我的页面中有一些位置错误吗？

您可以将

边距：0 auto

添加到

中。水箱

水平居中，并在页面加载和调整窗口大小时使用JavaScript垂直定位

var main=document.getElementsByClassName（'main'）[0]；
函数位置（）{
main.style.transform='translateY（+（window.innerHeight/2）-40）+'px'；
main.style.webkitttransform='translateY（+（window.innerHeight/2）-40）+'px'；
}
位置（）；
window.onresize=位置
*{
保证金：0；
填充：0；
}
身体{
背景颜色：珊瑚；
}
梅因先生{
位置：相对位置；
}
.水箱{
位置：相对位置；
宽度：50px；
高度：80px；
-webkit剪辑路径：url（#waterMask）；
剪辑路径：url（#水印）；
背景色：白色；
保证金：0自动；
}
.内水{
位置：绝对位置；
底部：0px；
左：0px；
宽度：100%；
身高：50%；
背景图片：url(http://121.42.52.51/wave.svg);
背景重复：重复-x；
-webkit动画：wave_water 1s无限线性；
动画：波浪水1s无限线性；
}
关键帧波浪水{
从{
背景位置：左上；
}
到{
背景位置：160px顶部；
}
}
@-webkit关键帧wave_water{
从{
背景位置：左上；
}
到{
背景位置：160px顶部；
}
}
将此css用于居中元素

.water-box{
margin: 50% auto;}

如果要精确居中，应添加
display:table
至
。主
和
显示：表格单元格；垂直对齐：中间对齐
至
。水箱
移除宽度为0'和高度为0'，只留下

    <svg>

这在Firefox中有效

谢谢，但它在chrome中不起作用。chrome不支持吗？可能是
    <svg>

    'url(#waterMask)'