因为需要所以开始了,D3.js的学习之路。
在开始学的时候,发现的学习D3.js需要有一些SVG和canvas的知识,这些是我之前都没有接触过的,所以现在从svg开始学习了。
SVG可缩放矢量图,使用XML格式SVG文件必须使用.svg后缀来保存。先来一个例子:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
SVG 代码解析:
第一行包含了 XML 声明。请注意 standalone 属性!该属性规定此 SVG 文件是否是"独立的",或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里,是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C,含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽,黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。
注释:所有的开启标签必须有关闭标签!
SVG中预定义了七种形状元素:
分别为:矩形<rect>、圆形<circle>、椭圆形<ellipse>、线段<line>、折线<polyline>、多边线<polygon>、路径<path>。
一、矩形<rect>
六个参数:
x:矩形左上角的x坐标; y:矩形左上角的y坐标;
width:矩形的宽度;height:矩形的高度;
rx:对于圆角矩形,指定椭圆在x方向的半径;ry:对于圆角矩形,指定椭圆在y方向的半径。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="40" width="50" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
建议在菜鸟教程中实例操作一下,可以加深印象(自己修改参数的值,看效果)。
二、圆形<circle>
三个参数:
cx:圆心的x坐标;cy:圆心的y坐标;r:圆的半径。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
菜鸟教程实例操作
三、椭圆<ellipse>
四个参数:
cx:圆心的x坐标; cy:圆心的y坐标;
rx:椭圆的水平半径;ry:椭圆的垂直半径。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
菜鸟教程实例操作。
四、线段<line>
四个参数:
x1:起点的x坐标;y1:起点的y坐标;
x2:终点的x坐标;y2:终点的y坐标;
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> //实例
五、折线<polyline>
属性points:"x,y x1,y1 x2,y2";(x,y是坐标,x1,y1是下一个坐标)每一组都用空格分隔。
<ployline points="100,20 20,90 60,160 140,160 180,90" style="fill:white;stroke:black;stroke-width:3" transform="translate(200,0)" />
六、多边形<polygon>
多边形就是折线的最起始和最后的点连接,得到的图形。
<polygon points="100,20 20,90 60,160 140,160 180,90" style=" fill:LawnGreen; stroke:black; stroke-width:3 "/>
七、路径<path>
M=moveto:将笔画移动到指定坐标。
L=lineto:画直线到指定坐标。
H=horizontal lineto:画水平直线到指定坐标。
V=vertical lineto:画垂直直线到指定坐标。
C=curveto:画三次贝塞尔曲线经两个指定控制点到达终点坐标。
S=shorthand/smooth curveto:与前一条三次贝赛尔曲线相连,第一个控制点前一条曲线第二个控制点的对称点,只需输入第二个控制点和终点,即可绘制一个三次贝赛尔曲线。
Q=quadratic Bezier curveto:画二次贝赛尔曲线一个指定控制点到达终点坐标。
T=Shortand/smooth quadratic Bezier curveto:与前一条二次贝赛尔曲线相连,第一个控制点前一条曲线第二个控制点的对称点,只需输入第二个控制点和终点,即可绘制一个二次贝赛尔曲线。
A=elliptical arc:画椭圆曲线到指定坐标。
Z=closepath:绘制一条直线连接终点和起点,用来封闭图形。
上述命令都是用大写英文字母,表示坐标系中的绝对坐标(absolute)。也可以用小写英文字母,表示相对坐标(相对当前笔画所在点)。
弧线:A( rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)
rx:椭圆x方向半轴大小;ry:椭圆y方向半轴大小;x-axis-rotation:椭圆形的x轴与水平轴顺时针方向的夹角;large-arc-flag:有两个值(1:大角度弧线,0:小角度弧线);sweep-flag:有两个值(1:顺时针至终点,0:逆时针至终点);x:终点x坐标;y:终点y坐标。
八、文本<text>
六个参数:
x:文本位置的x坐标;y:文字位置的y坐标;
dx:相对于当前位置在x方向上平移的距离(值为正则往右,负则往左)。
dy:相当于当前位置在y方向上平移的距离(值为正则往下,负则往上)。
textLength:文字的显示长度(不足则拉长,足则压缩)。
totate:旋转角度(顺时针为正,逆时针为负)。
如果对多个文字中的部分文字单独定义样式可以用<tspan>标签。
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
I am <tspan fill="yellow">programmer</tspan>
</text>
SVG样式:
fill:填充色,改变文字<text>的颜色也用它。
stroke:轮廓线的颜色。
stroke-width:轮廓线的宽度。
stroke-linecap:线头端点的样式,圆角,直角等。
stroke-dashanray:虚线的样式。(实例) 第一个是虚线长度,第二个是间隔空白长度......
opacity:透明度,0.0为完全透明,1.0完全不透明。
font-family:字体。
font-size:字体大小。
font-weight:字体粗细。
font-style:字体的样式,斜体等。
text-decoration:上画线、下划线等。
SVG标记<marker>:
标记(marker),也就是给线段添加箭头。marker定义一组标记,defs定义可重复利用的图形。
marker的一些属性:
viewBox:坐标系的区域
refX,refY:在viewBox内的基准点,绘制时此点在直线端点上。
markerWidth,markerHeight:标识的大小。
orient:绘制方向,可设定为auto(自动确认方向)和角度值。
id:标识的id号。
给线段添加箭头,首先先定义一个箭头,在调用这个箭头。
<defs> <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refsX="6" refsY="6" orient="auto"> <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000" /> </marker> </defs>
这是一条带箭头的曲线:
<path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" />
marker-start:路径起点处。
marker-mid:路径中间端点处。(箭头将绘制在路径的节点处,so对直线无效)
marker-end:路径终点处。
SVG滤镜<filter>:
滤镜可使图形具有艺术效果,对源图形的数学参数不会改变,只是进行了渲染后传给显示器。
滤镜filter和标识marker使用方法是一样的。在<defs>中定义,设定一个id定义需要用到的滤镜,在调用。
可以通过W3C看一些需要的滤镜效果。
SVG渐变:
有线性渐变<linearGradient>、放射性渐变<radialGradient>。
渐变也是定义在<defs>标签中,定义一个id号,在调用这个id。例:
<defs> <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
//水平线性渐变 <stop offset="0%" stop-color="#F00" /> <stop offset="100%" stop-color="#0FF" /> </linearGradient> </defs> //offset定义渐变开始的位置 //stop-color定义此位置的颜色 <rect fill="url(#myGradient)" x="10" y="10" width="300" height="100">
//垂直线性渐变 就将x1、x2、y1、y2分别变成0%、0%、0%、100%