-webkit-clip-path不适用于Chrome吗? [英] -webkit-clip-path not working for Chrome?
本文介绍了-webkit-clip-path不适用于Chrome吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下代码在FireFox中可以正常工作，并且显示了一只蓝色的兔子:
The following code works fine in FireFox and it shows a blue bunny rabbit:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
#item1 {
display:block;
width:500px;
height:500px;
background:#369;
clip-path: path('m 29.937786,284.5542 c -5.893949,-2.10071 -16.137808,-1.46109 -20.6689304,-4.19599 c -30.9424776,-93.41773 40.1491104,-99.87798 39.9169904,-130.49916 c -4.155883,-11.91356 -1.37483,-24.01298 3.09354,-30.76224 c -8.719524,-8.5724 -13.651389,-22.766307 -12.09846,-33.358522 c 1.543697,-12.047112 12.084392,-3.353633 12.65133,-4.22669 c -1.80717,-4.26947 -1.33755,-7.49019 1.282784,-8.79738 c 12.780242,-1.845839 15.499482,18.964276 17.971662,29.907252 c 17.187,4.59876 36.431048,12.02357 44.555168,30.48952 c 0.0513,5.79697 3.28251,6.00908 3.12021,11.4242 c -2.6378,15.76105 -27.345338,10.04675 -20.137208,27.02235 c 10.993518,24.31925 -13.81309,43.57354 2.027808,76.88013 c 1.127,2.07114 0.9668,3.65716 -1.30438,4.51239 c -7.861908,1.59894 -13.930178,-5.3055 -16.538058,-10.32425 c 1.42688,12.55744 -1.54424,25.85645 -6.00534,32.78576 c 26.569178,3.44452 30.242508,14.30155 5.231,14.20239 c -17.56971,-4.74981 -36.54354,-3.32533 -53.098116,-5.05976 z');
-webkit-clip-path: path('m 29.937786,284.5542 c -5.893949,-2.10071 -16.137808,-1.46109 -20.6689304,-4.19599 c -30.9424776,-93.41773 40.1491104,-99.87798 39.9169904,-130.49916 c -4.155883,-11.91356 -1.37483,-24.01298 3.09354,-30.76224 c -8.719524,-8.5724 -13.651389,-22.766307 -12.09846,-33.358522 c 1.543697,-12.047112 12.084392,-3.353633 12.65133,-4.22669 c -1.80717,-4.26947 -1.33755,-7.49019 1.282784,-8.79738 c 12.780242,-1.845839 15.499482,18.964276 17.971662,29.907252 c 17.187,4.59876 36.431048,12.02357 44.555168,30.48952 c 0.0513,5.79697 3.28251,6.00908 3.12021,11.4242 c -2.6378,15.76105 -27.345338,10.04675 -20.137208,27.02235 c 10.993518,24.31925 -13.81309,43.57354 2.027808,76.88013 c 1.127,2.07114 0.9668,3.65716 -1.30438,4.51239 c -7.861908,1.59894 -13.930178,-5.3055 -16.538058,-10.32425 c 1.42688,12.55744 -1.54424,25.85645 -6.00534,32.78576 c 26.569178,3.44452 30.242508,14.30155 5.231,14.20239 c -17.56971,-4.74981 -36.54354,-3.32533 -53.098116,-5.05976 z');
}
</style>
</head>
<body>
<div id="item1"></div>
</body>
</html>
但是当我在Chrome中查看相同的代码时，我只会看到一个蓝色方块. caniuse dot com网站表示对clip-path的部分支持.我做错了什么，导致Chrome无法显示我的兔子剪辑路径?
But when I look at this same code in Chrome, I just see a blue square. The caniuse dot com website says that there is partial support for clip-path. Have I done something wrong that prevents Chrome from showing my bunny clip path?
推荐答案
这似乎可行
.svg-clipped {
clip-path: url(#svgRabbit);
-webkit-clip-path: url(#svgRabbit);
background:black;
width:200px;
height:500px;
}
<div class="svg-clipped"></div>
<svg height="0" width="0">
<defs>
<clipPath id="svgRabbit">
<path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="m 29.937786,284.5542 c -5.893949,-2.10071 -16.137808,-1.46109 -20.6689304,-4.19599 c -30.9424776,-93.41773 40.1491104,-99.87798 39.9169904,-130.49916 c -4.155883,-11.91356 -1.37483,-24.01298 3.09354,-30.76224 c -8.719524,-8.5724 -13.651389,-22.766307 -12.09846,-33.358522 c 1.543697,-12.047112 12.084392,-3.353633 12.65133,-4.22669 c -1.80717,-4.26947 -1.33755,-7.49019 1.282784,-8.79738 c 12.780242,-1.845839 15.499482,18.964276 17.971662,29.907252 c 17.187,4.59876 36.431048,12.02357 44.555168,30.48952 c 0.0513,5.79697 3.28251,6.00908 3.12021,11.4242 c -2.6378,15.76105 -27.345338,10.04675 -20.137208,27.02235 c 10.993518,24.31925 -13.81309,43.57354 2.027808,76.88013 c 1.127,2.07114 0.9668,3.65716 -1.30438,4.51239 c -7.861908,1.59894 -13.930178,-5.3055 -16.538058,-10.32425 c 1.42688,12.55744 -1.54424,25.85645 -6.00534,32.78576 c 26.569178,3.44452 30.242508,14.30155 5.231,14.20239 c -17.56971,-4.74981 -36.54354,-3.32533 -53.098116,-5.05976 z"/>
</clipPath>
</defs>
</svg>
这篇关于-webkit-clip-path不适用于Chrome吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
