-webkit-clip-path 不适用于 Chrome？答案

【问题标题】：-webkit-clip-path not working for Chrome?-webkit-clip-path 不适用于 Chrome？
【发布时间】：2019-12-22 08:35:17
【问题描述】：

以下代码在 FireFox 中运行良好，它显示了一只蓝色的兔子：

<!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 无法显示我的兔子剪辑路径？

【问题讨论】：

这不是剪辑路径的正确语法 .. 您正在剪辑路径中添加路径的 SVG 语法。不是这样的
@TemaniAfif 我在下面写了我自己问题的答案，但我不相信这是正确的解决方案，因为它会在此处导致此动画问题：stackoverflow.com/questions/59440805/…。您对这些问题有任何反馈吗？谢谢

标签： css google-chrome clip-path

【解决方案1】：

这似乎有效

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

【讨论】：