扩展-svg

扩展-svg

svg: scalable vector grapics , 可缩放的矢量图

1. 该图片使用代码书写而成
2. 缩放不会失真
3. 内容轻量

怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件

xml语言，svg使用该语言定义

书写svg代码

rect ：矩形

<svg style="background-color:gray" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="100" y="100" fill="red" stroke="#000" stroke-width="6" />
</svg>

x : 距离svg左上角x轴的距离

y ：距离svg右上角y轴的距离

fill : 填充(背景颜色)

stroke : 边框颜色

stroke-width : 边框宽度

circle ：圆形

    <circle cx="200" cy="300" r="50" fill="transparent" stroke="#000" stroke-width="6" />

cx : 距离svg左上角x轴的距离

cy ：距离svg右上角y轴的距离

r : 圆的半径

fill : 填充(背景颜色)

stroke : 边框颜色

stroke-width : 边框宽度

ellipse : 椭圆

    <ellipse rx="100" ry="50" cx="100" cy="400" fill="#f00" stroke="#000" stroke-width="6" />

rx : 椭圆长的半径

ry ：椭圆宽的半径

cx : 距离svg左上角x轴的距离

cy ：距离svg右上角y轴的距离

fill : 填充(背景颜色)

stroke : 边框颜色

stroke-width : 边框宽度

line ：线条

    <line x1="10" x2="300" y1="20" y2="60" stroke="#000" stroke-width="6" />

x1 : 第一个点距离svg，x轴左上角的距离

x2 : 第二个点距离svg，x轴左上角的距离

y1 ：第一个点距离svg，y轴左上角的距离

y2 ：第二个点距离svg，y轴左上角的距离

polyline ：折线

    <polyline  points="400,20, 450,20, 450,50, 500,50, 500,80, 550,80, 550,110" fill="none" stroke="#000" stroke-width="6" />

polygon : 多边行

    <polygon points="300,300, 400,400, 300,500" fill="#f00" stroke="#000" stroke-width="6" />

path : 路径

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 (椭圆弧)

A
半径1
半径2
顺时针旋转角度
小弧（0）或大弧（1）
顺时针（1）逆时针（0）

Z = closepath (自动闭合)

    <path d="M150 600 L300 600 L300 800 Z" fill="#f00" style="stroke:#000; stroke-width:6" />

练习：太极图

<svg style="background-color:gray" width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
    <path fill="#000" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50" />
    <path fill="#fff" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50" />
    <circle cx="250" cy="150" r="30" fill="#fff" />
    <circle cx="250" cy="350" r="30" fill="#000" />
</svg>