Svg clipPath to clip a div doesn't work in Safari when i duplicate it

问题

I have created a clip path that I reuse on multiple divs in the page. I use the property clipPathUnits="objectBoundingBox" to make it apply to each div based on its position. It works great in Chrome and Firefox. When I tried it in safari it only works based on the first div. Meaning that it works well the first time than when i call it again the boudingbox is still based on the first Div. I realized this when i gave a negative margin to the second div until it overlaped with the first one partial then I could see it.

Here is an example of the issue:

.bar {
  height: 100px;
  width: 100px;
}
.block {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: white;
  z-index: 100;
  display: block;
  clip-path: url(#clipping);
  -webkit-clip-path: url(#clipping);
}

<svg style="background: blue; height: 0px; overflow: hidden;">
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
      <path fill="#FFFFFF" d="M0.501,0.971c-0.014,0-0.027-0.003-0.04-0.011l-0.34-0.194c-0.024-0.014-0.04-0.041-0.04-0.069L0.081,0.306
	c0-0.028,0.015-0.055,0.04-0.069L0.458,0.04c0.013-0.007,0.026-0.011,0.04-0.011s0.027,0.003,0.04,0.011l0.339,0.194
	c0.025,0.014,0.041,0.041,0.041,0.069l0.001,0.391c0,0.028-0.015,0.055-0.04,0.069L0.542,0.96C0.529,0.968,0.515,0.971,0.501,0.971z
	" />
    </clipPath>
  </defs>
</svg>

<div class="bar" style="background: blue;">
  <div class="block">
  </div>
</div>
<div class="bar" style="background: green;">
  <div class="block">
  </div>
</div>

http://codepen.io/appteamio/pen/WbdRgx

I'm I doing something wrong or is it a Safari issue.If sois there any work aroung. thanks

来源：https://stackoverflow.com/questions/28468314/svg-clippath-to-clip-a-div-doesnt-work-in-safari-when-i-duplicate-it

标签

html

css

svg

safari

clip-path