3. svg学习笔记-基本形状和画笔属性

svg中可以绘制的基本图形有线段，矩形，多边形，圆，椭圆，分别来看一下这些基本图形：

线段

使用<line>元素创建一条线段，格式如下：

<line x1=" start-x " y1=" start-y " x2=" end-x " y2=" end-y " stroke="black">

其中start-x和start-y为线段起点的x，y坐标，end-x和end-y为线段结束点的x，y坐标。

示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000000">
        <line x1="10" y1="10" x2="200" y2="200" stroke="black">
        </line>
    </svg>
</body>
</html>

以上代码在浏览器中显示如下：

以上代码中<line>元素除了自身的基本属性之外还有个stroke属性，此属性用来指定基本图形的轮廓颜色，若不指定，默认为none，即在浏览器中无法看到所绘制的图形。除此之外，类似的属性还有stroke-width，stroke-opacity，stroke-dasharray，fill等，此类属性以后本文结尾时会详解，此处只是用来将图形显示出来

矩形

使用<rect>元素绘制一个矩形，格式如下：

<rect x="left-top-point-x" y="left-top-point-y" width="w" height="h"></rect>

其中x，y属性为矩形左上角顶点的x，y坐标，width和height分别指定矩形的宽高

示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <rect x="30" y="50" width="100" height="60" stroke="black" fill="none">
        </rect>
    </svg>
</body>
</html>

在浏览器中呈现如下：

圆角矩形

圆角矩形也使用<rect>元素创建，只不过额外指定了两个属性，格式如下：

<rect x="left-top-point-x" y="left-top-point-y" width="w" height="h" rx="rx" ry="ry">
</rect>

属性rx和ry分别指定了x方向和y方向的圆角半径，示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="200" height="120" rx="10" ry="60" stroke="black" fill="none">
        </rect>
    </svg>
</body>
</html>

在浏览器中呈现如下：

将以上代码中的svg部分代码改为下面的代码：

<svg width="300" height="300" style="border:1px solid black">
    <rect x="30" y="50" width="200" height="120" rx="10" ry="10" stroke="black" fill="none">
    </rect>
</svg>

在浏览器中呈现如下：

圆

在svg中使用<circle>元素创建一个圆，格式如下：

<circle cx="cx" cy="cy" r="radius" ></circle>

cx和cy分别指定了圆心坐标的x和y，r元素指定了圆的半径。示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <circle cx="100" cy="100" r="60" stroke="black" fill="none"> 
        </circle>
    </svg>
</body>
</html>

在浏览器中呈现如下：

椭圆

在svg中创建椭圆使用<ellipse>元素，只不过椭圆有两个半径，水平方向上的和垂直方向上的，格式如下：

<ellipse cx="circle-x" cy="circle-y" rx=" x-radius " ry="y-radius"></ellipse>

其中cx和cy为椭圆的圆心，rx和ry为水平方向和垂直方向上的半径。示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <ellipse cx="100" cy="100" rx="60" ry="90" stroke="black" fill="none"> 
        </ellipse>
    </svg>
</body>
</html>

在浏览器中呈现如下：

多边形

svg中最有魅力的就是多边形和路径了，CSS3再牛逼也没有办法像svg一样如此简单的创建一个任意的多边形，在svg中通过<polygon>元素创建一个多边形，格式如下：

<polygon points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polygon>

通过为points属性指定多个坐标点来创建一个多边形，坐标点之间以空格或者逗号隔开，指定坐标时不需要指定返回起始坐标，图形会自动闭合。

示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <polygon points="10,150 30,40 170,50 10,20" stroke="black" fill="none">        
        </polygon>
    </svg>
</body>
</html>

在浏览器中下呈现如下：

折线

绘制折线的时候可以通过一系列的<line>元素来创建，但是这样做会加大阅读的难度，不利于代码的维护，所以可以通过另一种方法来创建折线，那就是<polyline>元素，格式如下：

<polyline points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polyline >

其中的point元素指定的也是坐标点，点之间以空格或者逗号隔开，示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <polyline points="23.5,45 58.2,87.63 34,23.4 200,210" stroke="black" fill="none"></polyline>
    </svg>
</body>
</html>

浏览器中打开如下：

画笔属性

stroke：画笔的颜色，默认为none

stroke-width：画笔的宽度，默认为1

stroke-opacity：画笔颜色的透明度，取值为0到1之间的数值，0为完全透明，1为完全不透明，默认为1

stroke-dasharray：指定一个数值序列来表示虚线的长度和虚线中间空隙的长度

stroke-linecap：线头尾的形状，值为butt，round或者square

stroke-linejoin：图形的棱角或者一系列连线的形状，取值为miter（尖的，默认值），round或者bevel（平的）

stroke-miterlimit：相交处显示宽度与线宽的最大比例，默认值为4

fill：指定图形的填充颜色，默认值为black

fill-opacity：填充的透明度，取值范围为0~1之间的数值，0为完全透明，1为完全不透明，默认值为1

fill-rule：填充的规则，取值为nonzero（默认值）或者evenodd