viewBox 属性的宽和高如果是一个HTML元素被剪切，可以使用
margin-box 、
border-box 、
padding-box 或
content-box 框盒模式；如果运用于一个SVG元素上，可以使用
fill-box 、
stroke-box 或
view-box 。先来看绘制基本函数的使用。
inset()
inset() 用来绘制矩形，或者带圆角的矩形。
clip-path: inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<length-percentage> 用来设置剪切区域距离上、右、下和左侧外边缘的距离；可以设置一个、两个、三个或四个值。如果设置一个值，表示上右下左四个值相等；如果设置两个值，表示上下取第一个值，左右取第二个值；如果取值三个值，表示上取第一个值，左右取第二值，下取值第三个值；
如果取值四个值，表示上取第一个值，右取第二个值，下取第三个值，左取第四个值。类似于
border 的取值
round 用来设置裁剪区域是否带圆角，未显式设置表示剪切区域没有圆角，如果设置表示剪切区域带有圆角
<border-radius> 用来设置
border-radius 的半径值，其使用和CSS的
border-radius 一样，也可以带
/用张图来表示：
来看个Demo：
circle()
circle() 用来绘制圆。
clip-path: circle(<shape-radius> at posX posY)
<shape-radius> ：圆的半径，其值可以是
<length-percentage> 、
closest-side 、
farthest-side
at ：显式的设置圆心的位置，如果未显式设置，默认的圆心在元素的正中间，即
center
