图形化开发（三）02-D3.js之svg图形——矩形、圆形、椭圆、直线、多边形、曲线、路径、文本

图形化开发（三）02-D3.js之svg图形——矩形、圆形、椭圆、直线、多边形、曲线、路径、文本

SVG图形

SVG有一些预定义的形状元素，可被开发者使用和操作：

• 矩形
• 圆形
• 椭圆
• 线
• 折线
• 多边形
• 路径

矩形

效果

EX1:

标签可用来创建矩形，以及矩形的变种：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色

EX2:

让我们看看另一个例子，它包含一些新的属性：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

• x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
• y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）

圆形

效果

标签可用来创建一个圆：

<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>

• cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
• r属性定义圆的半径

椭圆

效果

元素是用来创建一个椭圆：

椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的：

<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>

直线

效果

元素是用来创建一个直线：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

多边形

标签用来创建含有不少于三个边的图形。

polygon来自希腊。 “Poly” 意味 “many” ， “gon” 意味 “angle”.

效果-三角形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

下面的示例创建一个四边的多边形：

效果-四边形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="220,10 300,210 170,250 123,234"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

曲线

效果

元素是用于创建任何只有直线的形状：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

只有直线的另一个例子：

效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>

路径

元素用于定义一个路径。

下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。

效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

文本

元素用于定义文本。

效果

EX:1

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>