Question

我想用SVG用动画波制作水滴。我使用SVG clipPath来定义剪辑路径，使用CSS clip-path来掩盖内部div，我需要在页面中心放水。 http://jsfiddle.net/sigmadfzb/gbdj0k0q/

当我将外部div（绝对位置）移动到左侧或顶部时，水滴将不会显示在页面中（请参阅http://jsfiddle.net/sigmadfzb/uz4mkzww/4/）。我希望水滴在中心位置。如果我删除了ab类及其CSS属性，则会显示水滴。

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

Answer 1

删除width ='0'和height ='0'，只留下

    <svg>

在属性中，将'uri（waterMask）'更改为

    'url(#waterMask)'

这适用于Firefox。

http://jsfiddle.net/98tjgbw6/1/

Answer 2

您可以将margin: 0 auto添加到.water-box以使其水平居中，并在页面加载和窗口调整大小时使用JavaScript垂直定位。

Fiddle

var main = document.getElementsByClassName('main')[0];

function position() {
    main.style.transform = 'translateY(' + ((window.innerHeight / 2) - 40) + 'px)';
}

position();
window.onresize = position;

var main = document.getElementsByClassName('main')[0];

function position() {
  main.style.transform = 'translateY(' + ((window.innerHeight / 2) - 40) + 'px)';
  main.style.webkitTransform = 'translateY(' + ((window.innerHeight / 2) - 40) + 'px)';
}

position();
window.onresize = position;

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: coral;
}
.main {
  position: relative;
}
.water-box {
  position: relative;
  width: 50px;
  height: 80px;
  -webkit-clip-path: url(#waterMask);
  clip-path: url(#waterMask);
  background-color: white;
  margin: 0 auto;
}
.water-inner {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 50%;
  background-image: url(http://121.42.52.51/wave.svg);
  background-repeat: repeat-x;
  -webkit-animation: wave_water 1s infinite linear;
  animation: wave_water 1s infinite linear;
}
keyframes wave_water {
  from {
    background-position: left top;
  }
  to {
    background-position: 160px top;
  }
}
@-webkit-keyframes wave_water {
  from {
    background-position: left top;
  }
  to {
    background-position: 160px top;
  }
}

<div class="main">
  <div class="ab">
    <div class='water-box'>
      <div class="water-inner"></div>
    </div>
    <svg width="0px" height="0px">
      <defs>
        <clipPath id='waterMask'>
          <path fill="#008CA4" d="M25,0C25,22.911,0,31.225,0,56.387C0,69.419,11.194,80,25,80c13.799,0,25-10.581,25-23.613
		C50,32.448,30.113,22.911,25,0z" />
        </clipPath>
      </defs>
      <rect x='0' y='0' width='30' height='40' clip-path='uri(waterMask)' />
    </svg>
  </div>
</div>

Answer 3

使用此css作为居中元素。

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

如果您想要精确居中，则应将display: table;添加到.main，将display: table-cell; vertical-align:middle;添加到.water-box

如何使用带有svg路径的css clip-path来掩盖html元素

3 个答案:

Fiddle