SVG基础知识之白话系列教程

SVG基础知识

svg实例写法：

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

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

SVG形状：

• 矩形 rect，常见属性有width、height、style、fill、stroke-width 、stroke（边框颜色）、x /y（距离浏览器左侧的距离）、fill-opacity 、stroke-opacity 、opacity、rx /ry (水平/垂直半径)
• 圆形 circle，常见的属性有：cx /cy（圆点的坐标）、r（圆的半径）、
• 椭圆 ellipse，一般就是水平半径和垂直半径长度不一样；
• 线 line

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

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

• 折线 polyline

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

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"     //points属性用来描述每个点的x/y坐标值
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

• 多边形 polygon

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

<polygon points="220,100 300,210 170,250 123,234"        //points属性用来描述每个点的x/y坐标值
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>

• 路径 path

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

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

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

• 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

SVG滤镜

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

<defs>                   //用filter标签定义一个滤镜，滤镜必须放在defs标签里面，用filter标签包裹
<filter id="Gaussian_Blur">                  //滤镜名为Gaussian_Blur
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />  //每个滤镜前都要加fe前缀，
</filter>         //in="SourceGraphic"表示定义了由整个图像创建效果，stdDeviation定义模糊的程度
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>         //这个svg图形引用上面定义的滤镜，注意要加#
</svg>

SVG渐变

线性渐变（linearGradient）：

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

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

</svg>

放射性渐变（ radialGradient）：

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

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>

</svg>