title: how to use css clip-path with svg path to mask html element
body: <p>I want to use SVG to make a water drop with an animated wave. I use SVG <code>clipPath</code> to define the clip path and CSS <code>clip-path</code> to mask the inner div, and I need the water drop in the center of the page.
  <a href="http://jsfiddle.net/sigmadfzb/gbdj0k0q/" rel="nofollow">http://jsfiddle.net/sigmadfzb/gbdj0k0q/</a></p>
  
  <p>When I move the outer div (absolutely position) to the left or the top, the water drop will not display in the page (See <a href="http://jsfiddle.net/sigmadfzb/uz4mkzww/4/" rel="nofollow">http://jsfiddle.net/sigmadfzb/uz4mkzww/4/</a>). I want the water drop in the center position. If I remove the <code>ab</code> class and its CSS property, the water drop will show.</p>
  
  <p>I confuse that the clip-path just can be used in left-top of the page? Is some positioning wrong in my page?</p>