D3.js学习笔记一:认识SVG图形

2015年02月11日 javascript, 前端技术, 网站建设 暂无评论 阅读 598 views 次

直线

使用line标签插入直线,它有4个基本属性:x1:起点横坐标、y1:起点纵坐标、x2:终点横坐标、y2:终点纵坐标,用以下代码可以画一条直线:

<svg> <line x1="0" y1="0" x2="100" y2="100" stroke="#F00"/> </svg>

矩形

使用rect标签插入矩形,它有4个基本属性:x:起点横坐标、y:起点纵坐标、width:宽度、height:长度,用以下代码可以画一个100×100的矩形:

<svg> <rect x="0" y="0" width="100" height="100"/> </svg>

SVG形状标签支持CSS样式,使用style来为它定义样式,例如:用以下代码可以画一个100×100的带有黄色边框的红色透明圆角矩形,为显示透明度,在底层加了一个黑色背景框。

<svg> <rect x="0" y="0" width="100" height="100" style="fill:#000;"/> <rect x="50" y="50" width="100" height="100" rx="10" ry="10" style="fill:#F00;stroke-width:1;stroke:#FF0;opacity:0.9;"/> </svg>

CSS样式说明

  • rx 和 ry 属性可使矩形产生圆角。
  • CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
  • CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)
  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)

圆形

使用circle标签插入圆形,它有3个基本属性:cx:圆点横坐标、cy:圆点纵坐标、r:半径,用以下代码可以画一个半径50的圆形:

<svg> <circle cx="100" cy="100" r="50"/> </svg>

同样可以为圆形设置CSS样式,方法和矩形差不多。

椭圆

使用ellipse标签插入椭圆,它有4个基本属性:cx:圆点横坐标、cy:圆点纵坐标、rx:横轴半径、ry:纵轴半径,用以下代码可以画一些椭圆:

<svg> <ellipse cx="100" cy="100" rx="100" ry="100" style="fill:#F00;stroke-width:1;stroke:#FF0;opacity:0.9;"/> <ellipse cx="100" cy="100" rx="100" ry="50"/> </svg>

可以看到,当长短轴一样的时候,就是圆形了(感觉说了句废话)。

多边形

使用polygon标签插入多边形,它使用一个数组来定义各个顶点,用以下代码可以画多边形:

<svg> <polygon points="0,0 100,0 100,100 0,100" style="fill:#F00;stroke-width:1;stroke:#FF0;opacity:0.5;"/> <polygon points="50,0 100,50 0,50" style="fill:#FF0;stroke-width:1;stroke:#FF0;opacity:0.5;"/> </svg>

折线

使用polyline标签插入折线,它使用一个数组来定义各个顶点,用以下代码可以画折线:

<svg> <polyline points="0,5 100,20 200,65 300,48 400,37" style="fill:#FFF;stroke:#F00;stroke-width:2"/> </svg>

路径

使用path标签描绘路径,它使用如下的句法描述路径:

  • M = moveto 将画笔移动到
  • L = lineto 从画笔处到此点画线
  • H = horizontal lineto 从画笔处到此点画线
  • V = vertical lineto 从画笔处到此点画线
  • C = curveto 从画笔处到此点画曲线
  • S = smooth curveto 从画笔处到此点画平滑线
  • Q = quadratic Belzier curve 从画笔处到此点画贝塞尔线
  • T = smooth quadratic Belzier curveto 从画笔处到此点画贝塞尔线
  • A = elliptical Arc
  • Z = closepath 结束描绘

下面的例子创建了一个二次贝塞尔曲线,A和C分别是起点和终点,B是控制点:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>

使用这些基本形状,我们就可以通过代码描绘一些图形,和Flash一样,SVG也提供了一系列的滤镜和补间效果,具体的可以查一下SVG的相关文章。

2015-02-11_132358

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: