clip-path 和 <clip-path>

在转盘一文中我们说过显示扇形形状的图片，但是path标签中是没法放一个背景的，嵌套也不好用
想通过css的clip-path属性进行尝试，但是没有扇形的API，于是想到了用自定义点polygon去绘制
想法是用100个点去绘制一段圆弧，但是效果是锯齿太严重，简直不能看，增加到一万个点也是一样，于是只能换个思路。

要是clip-path属性可以搭配path标签会怎么样，于是找啊找，还真的有这个API
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

The <clipPath> SVG element defines a clipping path. A clipping path is used/referenced using the clip-path property.

就是说他可以创造一个可裁剪区域，看一下MDN的例子

image.png

我们实践一下，配合上一篇的path绘制扇形的套路：

<svg>
   <clipPath id="myPath">
       <path d="M82.44294954150537,38.19660112501052 A200 200 0 0 1 317.55705045849464 38.19660112501052 L200 200">
       </path>
   </clipPath>
</svg>

.sector {
   clip-path: url(#myPath);
   background-size: contain !important;
   background-repeat: no-repeat;
   background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531159465490&di=37465162ac858fa38b0f481c8c4a4e43&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0b55b319ebc4b745ccdfe17bc4fc1e178a821517.jpg')

image.png

clip-path 和 <clip-path>

推荐阅读更多精彩内容