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>