SVG 2D入门4 - 笔画与填充
前面我们重点都在总结各类形状,文本和图片,接下来,我们还是和讨论canvas一样,总结一下颜色处理,也就是填充和边框效果;你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中,也可以以CSS的形式保存(这是与canvas不一样的地方)。
填充色 - fill属性
这个属性使用设置的颜色填充图形内部,使用很简单,直接把颜色值赋给这个属性就可以了。看例子:
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red"
fill-opacity="0.5" stroke-opacity="0.8"/>
上面例子中画了一个红色蓝边的矩形。注意几点:
1. 如果不提供fill属性,则默认会使用黑色填充,如果要取消填充,需要设置成none。
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。
实际上,边的情况比图形内部稍微复杂一点,因为边除了颜色,还有"形状"需要定义。
线的端点 - stroke-linecap属性
这个属性定义了线段端点的风格,这个属性可以使用butt,square,round三个值。看例子:
<svg width="160" height="140">
<line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
<line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
<line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>
这段代码绘制了3条使用不同风格线端点的线,
从左面的图中我们可以很容易看出3中风格的不同。
线的连接 - stroke-linejoin属性
这个属性定义了线段连接处的风格,这个属性可以使用miter,round,bevel三个值。看例子:
<svg width="160" height="280">
<polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/>
<polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>
<polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/>
</svg>
从左面的图中我们很容易看到3中风格的不同。
线的虚实 - stroke-dasharray属性
这个属性可以设置线段采用何种虚实线。看例子:
<svg width="200" height="150">
<path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
<path d="M 10 75 L 190 75" stroke="red"
stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
</svg>
这个属性是设置一些列数字,不过这些数字必须是逗号隔开的。
属性中当然可以包含空格,但是空格不作为分隔符。每个数字
定义了实线段的长度,分别是按照绘制、不绘制这个顺序循环下去。
所以左面的例子中绘制的线是画5单位的实线,留5单位的空格,
再画5单位的实线...这样一直下去。
除了这些常用的属性,还有下列属性可以设置:
stroke-miterlimit:这个和canvas中的一样,它处理什么时候画和不画线连接处的miter效果。
stroke-dashoffset:这个属性设置开始画虚线的位置。
使用CSS展示数据
HTML5强化了DIV+CSS的思想,所以展示数据的部分还可以交给CSS处理。与普通HTML元素相比,只不过是 background-color和border换成了fill和stroke。其他的大多都差不多。简单看个例子:
#MyRect:hover {
stroke: black;
fill: blue;
}
是不是很熟悉,就是这么简单的。
SVG 2D入门4 - 笔画与填充的更多相关文章
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- SVG 2D入门13 - svg对决canvas
到目前为止,SVG与Canvas的主要特性均已经总结完毕了.它们都是HTML5中支持的2D图形展示技术,而且均支持向量图形.现在,我们就来比对一下这两种技术,分析一下它们的长处和适用场景.首先分析一下 ...
- SVG 2D入门9 - 蒙板
SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果.至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧. ...
- SVG 2D入门6 - 坐标与变换
坐标系统 SVG存在两套坐标系统:视窗坐标系与用户坐标系.默认情况下,用户坐标系与视窗坐标系的点是一一对应的,都为原点在视窗的左上角,x轴水平向右,y轴竖直向下:如下图所示: SVG的视窗位置一般是由 ...
- SVG 2D入门5 - 颜色的表示
SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性.基本有下面这些定义颜色的方式:1. 颜色名字: 直接使用颜色名字red, ...
- SVG 2D入门3 - 文本与图像
SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度,而无须求助图像或其它插件.任何可以在形状或路径上执行的操作(如绘制或滤镜)都可以在文本上执行.尽管SVG的文本 ...
- SVG 2D入门2 - 图形绘制
基本形状 SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了.废话不说了,直接看例子,这个最直接: <svg width="200" heigh ...
- SVG 2D入门11 - 动画
交互性 SVG拥有良好的用户交互性,例如:1. SVG能响应大部分的DOM2事件.2. SVG能通过cursor良好的捕捉用户鼠标的移动.3. 用户可以很方便的通过设置svg元素的zoomA ...
- SVG 2D入门12 - SVG DOM
使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式.由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为 ...
随机推荐
- 鸟哥的linux私房菜勘误表
博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://github.com/jiangxincode 知乎地址: https://ww ...
- python读取指定内存的内容
import ctypes as ct t = ct.string_at(0x211000, 20) # (addr, size) print t 最好不要用解释性语言来开发底层,一般用C.
- hdu 3908 Triple(组合计数、容斥原理)
Triple Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 125536/65536 K (Java/Others) Total Su ...
- mint上部署lamp环境
不得不说现在在linux mint上部署lamp很方便,比windows服务器上的asp.net的部署升级都简单. 1 安装MySql sudo apt-get install mysql-serve ...
- js仿京东轮播图效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- WPF的Binding功能解析
1,Data Binding在WPF中的地位 程序的本质是数据+算法.数据会在存储.逻辑和界面三层之间流通,所以站在数据的角度上来看,这三层都很重要.但算法在3层中的分布是不均匀的,对于一个3层结构的 ...
- Octopus系列之HttpCustom2.0模板引擎的处理,一个bug的分析
实现的目标是: 1.实现手机和PC模板请求的区分:使得来自两种不同设备请求的时候,各自路由到不同的目录中去 2.保持只有一个引擎实例对象 最后发现一个bug就是,当我从PC访问时初始化了PC的目录,呈 ...
- mysql创建PATH快捷
1.使其临时生效 PATH=$PATH:/usr/local/mysql/bin 2.永久生效 编辑/etc/profile 添加第79列 然后source /etc/profile 3.输入命令m ...
- 回车键Enter
兼容IE与firefox火狐的回车事件(js与jquery) 原生Javascript写法: <script> document.onkeydown=function(event) { e ...
- 十大谷歌Google搜索技巧分享
前言:多数人在使用Google搜索的过程是非常低效和无谓的,如果你只是输入几个关键词,然后按搜索按钮,你将是那些无法得到Google全部信息的用户,在这篇文章中,Google搜索专家迈克尔.米勒将向您 ...