D3_01_图形元素

1 SVG

• 在html中添加一组 svg标签

<svg width="300" height="300" version="1.1"
	xmlns="http://www.w3.org/2000/svg">
</svg>

• SVG中预定义了七种形状的元素:
  • 1 矩形 rect
  • 2 圆形 circle
  • 3 椭圆形 ellipse
  • 4 线段 line
  • 5 折线 polyline
  • 6 多边形 polygon
  • 7 路径 path

2 矩形

2.1 矩形参数

• x: 矩形左上角的x坐标
• y: 矩形右上角的坐标
• width: 矩形的宽度
• height: 矩形的高度
• rx: 对于圆角矩形,指定椭圆在x方向的半径
• ry: 对于圆角矩形,指定椭圆在y方向的半径

2.2 绘制一个矩形 和 圆角矩形

 <rect x="250" y="2s0" width="200" ry="20" rx="30" height="100" style="fill:steelblue;stroke:blue;stroke-width:4;opacity:0.5" />
 
 <rect x="20" y="20" width="200" ry="20" rx="30" height="100"
 style=" fill:steelblue;stroke:blue;stroke-width:4;opacity:0.5" />

3 圆形和椭圆形

3.1 圆形的参数

• cx: 圆心的x坐标
• cy: 圆心的y坐标
• r: ⚪的半径

3.2 椭圆的参数

• cx: 圆心的x坐标
• cy: 圆心的y坐标
• rx: 椭圆的水平半径
• ry: 椭圆的垂直半径

3.3 绘制圆和椭圆

• 圆

   <svg width="300" height="300" style="text-align:center">
       <circle cx="150" cy="150" r="80" style=" fill:steelblue;stroke:blue;stroke-width:4;opacity:4.5" />
   </svg>

• 椭圆

    <svg width="300" height="300">
       <ellipse cx="150" cy="150" rx="100" ry="80" style=" fill:steelblue;stroke:blue;stroke-width:4;opacity:4" />
   </svg>

4 线段

线段的参数是起点和终点的坐标

• x1: 起点的x坐标
• x2 : 终点的x坐标
• y1 : 起点的y坐标
• y2 : 终点的y坐标

    <svg width="300" height="300">
        <line x1="20" y1="20" x2="300" y2="100" style=" fill:steelblue;stroke:black;stroke-width:4"/>
    </svg>

5 多边形和折线

• 多边形和折线的参数是一样的,都只有一个 points参数,这个参数是一系列的点的坐标
• 不同之处是多边形将终点和起点相连,而折线不连接.

    <svg width="300" height="300">
        <polygon points="100,20,20,90,60,160,140,160,180,90" style=" fill:LawnGreen;stroke:black;stroke-width:4"/>
    </svg>
    
    <svg width="300" height="300">
        <polyline points="100,20,20,90,60,160,140,160,180,90" style=" fill:white;stroke:black;stroke-width:4"/>
    </svg>

6 路径

• 给出一个坐标点,在坐标点前面添加一个英文字母,表示是如何运动到此坐标点的,英文字母按照功能可分为5类

  • 移动类
    • M = moveto : 将画笔移动到指定的坐标
  • 直线类
    • L = lineto : 画直线到制定坐标
    • H = horizontal lineto: 画水平直线到指定坐标
    • V = vaertical lineto : 画垂直直线到制定坐标
  • 曲线类
    • C = curveto: 画三次贝塞尔曲线经过两个指定控制点到达终点坐标
    • S = shortthand/smooth curveto : 与前一次贝塞尔曲线相连,第一个控制点为前一条曲线的第二个控制点的对称对象,只需输入第二个控制点和终点,即可绘制一个三次贝塞尔曲线
    • Q = quadratic Bezier curveto : 画二次贝塞尔曲线经过一个指定的控制点到达终点坐标
    • T = …: 与前一条贝塞尔曲线相连,控制点为前一条曲线的第二个控制点的对称点,只需输入终点,即可绘制一个二次贝塞尔曲线
  • 弧线类
    • A = elliptical arc: 画椭圆曲线到指定坐标
  • 闭合类
    • Z = closepath: 会一条直线连接终点和起点,用来封闭图形

• 上述命令都是使用大写字母,表示坐标系中的绝对坐标.也可以使用小写的英文字母,表示相对坐标(相对当前画笔所在点).

6.1 绘制直线

    <svg width="300" height="300">
        <path d="M30,100,L270,300
                M30,100,H270
                M30,100 V300"
         style=" fill:white;stroke:black;stroke-width:4"/>
    </svg>

• 上述代码画了3条直线,起点都是坐标(30,100). 第一条直线画到(270,300),第二条水平画到(270,100),第三条是垂直化到(30,300). H和V都只需要一个坐标值,如果输入两个,则使用最后一个.