SVG

SVG

SVG(Scalable Vector Graphics)是一种矢量图格式

SVG可以用Illustrator生成
+ 文件体积小
+ 有矢量图的特征,放大缩小而不失真【视网膜屏显示效果好】

SVG样式

  • fill => background-color/color
  • fill-opacity (0-1)
  • opacity
  • stroke => border-color
  • stroke-width
  • stroke-opacity (0-1)
  • rx ry => border-radius

SVG形状元素

  • rect 矩形
  • circle 圆形
  • ellipse 椭圆
  • line 线
  • polyline 折线
  • polygon 多边形
  • path 路径

circle 圆

<circle cx="100" cy="100" r="40">

cx: 圆心x坐标
cy: 圆心y坐标
r: 圆形半径

ellipse 椭圆

<ellipse cx="100" cy="100" rx="200" ry="800">

cx: 圆心x坐标
cy: 圆心y坐标
rx: 水平半径
ry: 垂直半径

line 线

<line x1="0" y1="0" x2="300" y2="300">

x1: 线条在x轴的开始位置
y1: 线条在y轴的开始位置
x2: 线条在x轴的结束位置
y2: 线条在y轴的结束位置

polyline 折线

<polyline points="220,100 300,210 170,250">

polygon 多边形

<polygon points="220,100 300,210 170,250">

points: 多边形的每个角的x和y坐标

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
Z = closepath
大写表示绝对定位,小写表示相对定位

<path d="M250 150 L150 350 L350 350 Z" />
Comments
Write a Comment