SVG
SVG means Scalable Vector Graphics.
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
Hello World
- Use SVG in html
and you can see:
- Link to the SVG file You can use
<a>tag to link to the svg file, like this:
xml
<a href="rect.svg">rect.svg</a>
Shape
There some pre-shapes:
- 矩形
<rect> - 圆形
<circle> - 椭圆
<ellipse> - 线
<line> - 折线
<polyline> - 多边形
<polygon> - 路径
<path>
Rect
Line
Polygon
the fill-rule
Polyline
Path
Some Commands
所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
Text
- Common text
Hello SVG Hello SVG
rotate(<rotate-angle> [<cx> <cy>])
Hello SVG Hello SVG
- Text with path
I love SVG I love SVG
I love SVG I love SVG
<tspan>
元素可以安排任何分小组与<tspan>元素的数量
Several lines: First line Second line Several lines: First line Second line
Stroke
Stroke属性定义一条线，文本或元素轮廓颜色
g元素这样的将多个元素组织在一起的元素
-
stroke-width属性定义了一条线，文本或元素轮廓厚度 -
stroke-linecap属性定义不同类型的开放路径的终结 -
stroke-dasharray创建不同的虚线