SVG知识难点

 

参考资料：http://www.w3cplus.com/css3/clip.html

 

1.clip:默认值是auto，为不裁剪

<img border="0" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" width="200" height="100">

当给img设置clip设置时，必须为img设置定位为绝对定位，为postion:absolute;

写样式时，

{

position:absolute;

clip:rect(0px 200px 100px 0px)

}

rect（top,right,bottom,left）

是裁剪图片的顶部，当是正值时，从图片的顶部开始裁剪。默认值是0

right:

是裁剪图片的右侧，默认值为图片的宽，当值开始逐渐减少时，图片从右侧开始一点一点的裁剪图片。

bottom:

是裁剪图片的底部，默认值为图片的高，当值逐渐减少时，图片从底部一点一点的裁剪图片。

left:

默认值是0，当值一点一点的增加时，开始从图片的左侧开始慢慢的裁剪图片。

当前的话，clip的形状函数只有rect()。clip属性只能在元素设置了‘position:absolute’或者'position:fixed'属性起作用。clip无法在设置'position:relative'和‘position:static’工作。

浏览器兼容性

你可能会很关注，这个属性的兼容性不知道如何？请放心，clip属性得到较好的支持，在chrome1.0+、firefox1.0+、opera7.0+、safari1.0+和ie8.0+都支持标准语法，但在ie4.0至ie7.0我们还是需要做一定的处理，需要把每个属性值之间的逗号去掉。

.my-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE4 to IE7 */ clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ }

需要特别的注意，ie4-ie7的要写在标准语句的前面，不然其他浏览器下将会无任何效果。

2.clip:rect(top,right,botttom,left)

在css2.1中，rect()中的<top>和<bottom>指定偏移量是从元素盒子顶部边缘算起;<left>和<right>指定的偏移量是从元素盒子的左边缘算起。<top>,<right>,<bottom>,<left>可以将值设置成为'auto'或者长度值<length>。而且还可以允许负的长度值。其中当<top>和<left>取值为‘auto’时，则默认为0，剪切区域的边缘和元素盒子边缘相同。当<right>和<bottom>设置为auto时，他们就相当于元素的宽度(这个宽度包括元素的border,padding和width),或者简单的理解为100%。

针对上面所言：

1.不显示剪切区域：当rect()中的bottom值小于top值，或者right值小于left值时，整个剪切区域不会显示。

二：clip-path

它是一个通过屏蔽和裁剪来隐藏元素的一部分的工具。尽管clip-path没有被主流的浏览器支持(包括IE和Firefox)，但是webkit(chrome, safri)浏览器中，它仍然是一个实现时尚效果的小工具。

注意，在现代浏览器中需要添加使用-webkit-前缀。

clip-path简单的工作原理是提供一系列的x和y值来创建路径。当使用这些值创建一条完整路径时，就会把图像按照路径内部的尺寸进行裁剪。

利用clip-path，我们可以创建圆形，椭圆和多边形等不同的形状，创造力是唯一的限制。

例如：

一个简单的三角形裁剪：

.clipClass {

-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);

}

分析：

x:0 和y:0表示从元素的左上角开始，并从左上角开始移动。x: 100%;表示元素右边，y:100%；表示的是元素底部。

这个简单路径开始与左下角，水平移动50%，并到达顶部位置，然后又水平移动到100%的位置，垂直向下回到底部，到达第三个坐标点，三角形就出来了。

 

形状：

在上面的实例中，我们使用polygon来创建一个图形，并通过多对用逗号(,)分开的x值和y值定义了一个路径。然后，我们可以通过取不同的值来创建不同的图形。

圆：

为了创建圆形，需要给circle传入三个值：圆心的坐标(X值和Y值)以及半径。当定义圆的半径时，我们可以用at关键字来定义圆心坐标：

.clipClass {

-webkit-clip-path: circle(50% at 50% 50%);

}

椭圆：

为了实现椭圆，需要给ellipse提供4个值：椭圆的x轴半径，y轴半径，定位椭圆位置的x坐标和y坐标，后面两个值用at关键字和前面的两个值分开。

.clipClass {

-webkit-clip-path:ellipse(30% 20% at 50% 50%);

}

插图：（在老版本的chrome中有错误）

因为多边形边缘锐利，所以他可能不是你想要的东西，你想创建的圆角矩形，所以我们来看看Inset的值。Insert使用四个值(对应“上 右 下 左”的顺序)来设置圆角半径。

.clipClass {

-webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);

}

上面的各个值分别对应为：

1. inset(<top><right><bottom><left>round<top-radius><right-radius><bottom-radius><left-radius>)

其简写形式：

.clipClass {

-webkit-clip-path: inset(25% 0 round 0 25%);

}

注：其中的round前的参数是图形距离边框的距离，而round后的参数是图形的四个角的radius。使用border-radius实现上图的方法命令是：border-radius: 0 25%;

快速参考

• Circle: circle(radius at x-axis y-axis)
• Ellipse: ellipse(x-rad y-rad at x-axis y-axis)
• Polygon: polygon(x-axis y-axis, x-axis y-axis, … )
• Inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)

创建图形：

正如你看到的，原型和圆角图形被少数几个值限制了，因而Polygons是创建复杂图形的最好选择，Polygons能定义多组点，运行我们用各种方式去裁图形。

Comic Textbox

.clipClass {

-webkit-clip- path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%,50% 75%, 0% 75%);

}

Star:

.clipClass {

-webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);

}

注意：

/* 引用一个内联的 SVG <clipPath> 路径*/ clip-path: url(#c1); /* 引用一个外部的 SVG 路径*/ clip-path: url(path.svg#c1);

动画：

给形状应用一个hover,并用过渡属性来创建平滑的效果，但是需要记住，我们创建的初始默认状态，必须同所有的hover状态都使用相同的坐标系。

.animateClass {

-webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50%100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);

}

.animateClass:hover {

-webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50%70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

}

资料引用：http://www.w3cplus.com/blog/tags/411.html?page=5