使用CSS clip-path只影响webkit浏览器中的第一个对象？

Question

我正在尝试使用CSS clip-path属性将SVG剪辑路径应用于页面中的某些元素.例如,HTML(请注意,clipPathUnits ="objectBoundingBox"允许圆圈以包含元素大小的分数表示):

setTimeout(function(){
    $('.circle:first div').addClass('clipped');
    setTimeout(function(){
        $('.circle:nth-of-type(2) div').addClass('clipped');
    }, 2000);    
}, 2000);

.circle {
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}

.circle div {
    width: 100%;
    height: 100%;
    background: red;
    position: relative;
}

.clipped {
    -webkit-clip-path: url(#circle_clip);
    -moz-clip-path: url(#circle_clip);
    -o-clip-path: url(#circle_clip);
    clip-path: url(#circle_clip);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
    <div></div>
</div>

<div class="circle">
    <div></div>
</div>

<svg>
    <defs>
        <clippath id="circle_clip" clipPathUnits="objectBoundingBox">
            <circle cx=".5" cy=".5" r=".5" />
        </clippath>
    </defs>
</svg>

使用此代码,第一个元素显示正确地剪切成圆形,但第二个元素在Chrome和Safari中消失.在Firefox上出现两个元素,两个元素都被正确剪裁.

这是另一个小提琴实际上通过将剪辑应用于每个元素来实现它,在应用于第二个元素之前将其从第一个元素中移除,然后将第一个元素重新打开.有趣的是,定时器"动画"它一切正常.如果您只是在一个操作中添加和删除类,它就不起作用,就好像涉及竞争条件或者需要在修复生效之前完成渲染.

我做错了什么或者Webkit浏览器有错误吗？有人可以让这些小提琴工作吗？