Question

我正在尝试使用CSS clip-path属性将SVG剪辑路径应用于页面中的某些元素。例如，HTML（请注意，clipPathUnits =＆＃34; objectBoundingBox＆＃34;允许圆圈以包含元素大小的分数表示）：

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

使用此代码，第一个元素会正确剪裁成圆圈，但第二个元素会在Chrome和Safari中消失。在Firefox上出现两个元素，两个元素都被正确剪辑。

Here's another Fiddle实际上通过将剪辑应用于每个元素来实现它，在应用到第二个元素之前将其从第一个元素中移除，然后重新开启第一个元素。有趣的是，定时器可以动画＆＃34;一切正常。如果您只是在一个操作中添加和删除类，它就不起作用，就好像涉及竞争条件，或者需要在修复生效之前完成渲染。

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

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

0 个答案: