SVG

SVG

一、介绍

1、认识

SVG 意为可缩放矢量图形（Scalable Vector Graphics），形状在xml中指定，作为一种xml格式，SVG很容易用Servlet、jsp等web应用程序来生成，这使得它非常适合计算机生成的图形和图表。 当我们需要根据数据库数据动态生成图形和图表时，我们更多的使用SVG，当我们更注重图形的动画效果时，我们更喜欢使用canvas，可以直接使用js来控制图形的动态效果。

2、使用

<svg style="border:1px solid red" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect height="100" width="100">
</svg>

定义了一个svg图片，该图片中有一个100*100的矩形，svg默认大小为 300*150，效果如下：

二、样式

1、描边

1）stroke

stroke属性定义描边的颜色。

<svg width="100" height="10">
    <line x1="0" y1="5" x2="100" y2="5" stroke="red"/>
</svg>

效果如下：

2）stroke-width

stroke-width属性定义描边的宽度。

<svg width="100" height="10">
    <line x1="0" y1="5" x2="100" y2="5" stroke="red" stroke-width="4"/>
</svg>

效果如下：

3）stroke-linecap

stroke-linecap属性控制描边终点的形状。

值	含义
butt	默认值，以直边结束线段
square	以直边结束线段，但会微微超出实际路径的范围
round	以圆角结束线段，会微微超出实际路径的范围

<svg width="300" height="100">
    <line x1="10" y1="30" x2="200" y2="30" stroke="red" stroke-width="10" stroke-linecap="butt"/>    
    <line x1="10" y1="60" x2="200" y2="60" stroke="red" stroke-width="10" stroke-linecap="square"/>   
    <line x1="10" y1="90" x2="200" y2="90" stroke="red" stroke-width="10" stroke-linecap="round"/>
    <line x1="10" y1="20" x2="10" y2="100" stroke="black" stroke-width="1"/>
    <line x1="200" y1="20" x2="200" y2="100" stroke="black" stroke-width="1"/>
</svg>

效果如下：

4）stroke-linejoin

stroke-linejoin属性控制两条线段怎么连接。

值	含义
miter	默认值，连接处形成尖角
round	用圆角连接，实现平滑效果
bevel	连接处形成斜接

<svg width="300" height="100">
    <path d="M0,20 L90,60 L10,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="miter"/>
    <path d="M50,20 L140,60 L60,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="round"/>
    <path d="M100,20 L190,60 L110,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="bevel"/>
</svg>

效果如下：

5）stroke-miterlimit

stroke-miterlimit属性在stroke-linejoin="miter"时有效，用于设置最大斜接长度。

<svg width="300" height="100">
    <path d="M0,20 L90,60 L10,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="miter"/>
    <path d="M100,20 L190,60 L110,90" stroke="red" stroke-width="10" fill="none" stroke-linejoin="miter" stroke-miterlimit="1"/>
</svg>

效果如下：

6）stroke-dasharray

stroke-dasharray属性用来创建虚线。

<svg height="80" width="300">
    <path stroke-dasharray="5,5" d="M5 20 l215 0"  stroke="red" stroke-width="4" fill="none"/>
    <path stroke-dasharray="10,10" d="M5 40 l215 0"  stroke="red" stroke-width="4" fill="none"/>
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0"  stroke="red" stroke-width="4" fill="none"/>
</svg>

效果如下：

7）stroke-dashoffset

stroke-dashoffset属性定义虚线开始的地方。

<svg height="50" width="300">
    <path stroke-dasharray="10,10" d="M5 20 l215 0"  stroke="red" stroke-width="4" fill="none"/>
    <path stroke-dasharray="10,10" stroke-dashoffset="5" d="M5 40 l215 0"  stroke="red" stroke-width="4" fill="none"/>
</svg>

效果如下：

8）stroke-opacity

stroke-opacity属性控制描边的透明度。

<svg width="100" height="35">
    <line x1="0" y1="5" x2="100" y2="5" stroke="red"/>
    <line x1="0" y1="30" x2="100" y2="30" stroke="red" stroke-opacity="0.5"/>
</svg>

效果如下：

2、填充

1）fill

fill属性用来定义填充的颜色。

<svg