html的img标签,html使用svg

　　我们重点总结了各种形状，文字和图片。接下来像讨论画布一样，总结一下色彩处理，也就是填充和边框效果。你会发现这里的内容和canvas基本一致。这些属性可以作为属性写入元素，也可以保存为CSS(与canvas不同)。填充色 - fill属性该属性使用设置的颜色填充图形的内部。使用起来非常简单。直接给这个属性赋颜色值就行了。请看示例：复制如下代码：

　　rect x= 10 y= 10 width= 100 height= 100 stroke= blue fill= red

　　填充不透明度=0.5 笔画不透明度=0.8/

　　在上面的示例中，绘制了一个带有红色和蓝色边缘的矩形。注意几点：

　　1.如果没有提供fill属性，默认情况下将使用黑色填充。如果要取消填充，需要设置为无。

　　2.可以设置填充的透明度，范围是fill-opacity，取值范围是0到1。

　　3.稍微复杂一点的是fill-rule属性。该属性定义了判断一个点是否属于填充范围的算法；除了值inherit之外，还有两个值：

　　nonzero:该值使用的算法是：从待确定的点向任意方向发射一条直线，然后计算图形与线段相交的方向；计算结果从0开始，交点处每条线段从左到右，加1；如果每个路口的线段都是从右向左，减1；这样计算完所有交点后，如果这次计算的结果不等于0，则该点在图形中，需要填充；如果值等于0，则它在绘图之外，不需要填充。请看下面的例子：

　　evenodd:该值使用的算法是：从待确定的点向任意方向发射直线，然后计算图形与线段的相交数。如果是奇数，改变图形中的点，需要填充；如果数字是偶数，则该点在图形之外，因此不需要填充。请看下面的例子：

　　边框色 - stroke属性上面的示例中使用了stroke属性。这个属性使用设置的值来绘制图形的边框，使用起来也非常简单。给它分配颜色值就行了。注意：

　　1.如果未提供stroke属性，则默认情况下不会绘制图形边框。

　　2.可以设置边缘的透明度，范围是stroke-opacity。值的范围是0到1。

　　事实上，边缘的情况比图形内部要复杂一点，因为除了颜色之外，边缘还有“形状”要定义。

　　线条端点-笔划-线条端点属性该属性定义线条端点的样式。该属性可以使用butt,square,round的三个值。请看示例：复制如下代码：

　　svg宽度=160 高度=140

　　line x1= 40 x2= 120 y1= 20 y2= 20 stroke= black stroke-width= 20 stroke-line cap= butt /

　　line x1= 40 x2= 120 y1= 60 y2= 60 stroke= black stroke-width= 20 stroke-line cap= square /

　　line x1= 40 x2= 120 y1= 100 y2= 100 stroke= black stroke-width= 20 stroke-line cap= round /

　　/svg

　　这段代码绘制了3条具有不同样式线条端点的线条，

　　从左图中，我们很容易看出三种风格的区别。线的连接 - stroke-linejoin属性该属性定义线段连接的样式。该属性可以使用miter,round,bevel的三个值。请看示例：复制如下代码：

　　svg宽度=160 高度=280

　　折线点=40 60 80 20 120 60 笔划=黑色笔划宽度=20

　　stroke-line cap= butt fill= transparent stroke-line join= miter /

　　折线点=40 140 80 100 120 140 笔划=黑色笔划宽度=20

　　stroke-line cap= round fill= transparent stroke-line join= round /

　　折线点=40 220 80 180 120 220 笔划=黑色笔划宽度=20

　　stroke-line cap= square fill= transparent stroke-line join= bevel /

　　/svg从左图中，我们不难看出三者在风格上的差异。

　　虚拟和真实线条-笔划-dasharray属性可以设置线段使用的虚拟和真实线条。请看示例：复制如下代码：

　　svg宽度=200 高度=150

　　路径d=M 10 75 Q 50 10 100 75 T 190 75 笔画=黑色

　　stroke-line cap= round stroke-dash array= 5，10，5 fill=none/

　　路径d=M 10 75 L 190 75 笔画=红色

　　stroke-line cap= round stroke-width= 1 stroke-dash array= 5，5 fill=none/

　　/svg

　　这个属性是设置一些列号，但是这些列号必须用逗号隔开。

　　属性当然可以包含空格，但是空格不用做分隔符。每个数字

　　定义了实线线段的长度，按照画和不画的顺序循环。

　　所以左边例子中画的线是5个单位的实线，留下5个单位的空间，

　　再画5个单位的实线.就这样继续下去。

　　除了这些常用的属性，还可以设置以下属性：stroke-miterlimit:这个和canvas中的一样，处理什么时候画线和不画线交界处的斜接效果。stroke-dashoffset:该属性设置虚线开始的位置。

　　使用CSS展示数据HTML5强化了DIV CSS的思路，所以显示数据的部分也可以交给CSS处理。与普通的HTML元素相比，只有背景色和边框被填充和笔触所取代。其他的大部分都差不多。举一个简单的例子：复制如下代码：

　　#MyRect:hover {

　　笔画：黑色；

　　填充：蓝色；

　　}

　　不是很熟，就这么简单。

　　实用参考：

　　脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs . 85)。文件

　　开发中心：https://developer.mozilla.org/en/SVG

　　大众参考：http://www.chinasvg.com/

　　官方文件：http://www.w3.org/TR/SVG11/

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。