基本图形和属性
基本图形：
<rect><circle><ellipse><line><polyline><polygon>
基本属性：
-
fill: 填充 -
stroke: 描边 -
stroke-width: 描边宽度 -
transform: 变型 css3的transform属性一致
<rect>
包含属性：
-
x: x轴坐标 -
y: y轴坐标 -
width：矩形宽 -
height： 矩形高 -
rx：圆角 -
ry： 圆角
其中圆角的值如果只给一个值，另一个自动的等于已给的值
#1 rect.jpg
示例
<svg>
<rect x="10" y="10" width="100" height="50" fill="green" rx="10"></rect>
</svg>
<circle>
圆
包含属性：
-
cx: 圆心x的位置 -
cy: 圆心y的位置 -
r： 圆的半径
#2 circle.jpg
示例：
# 使用fill="transparent" 是因为svg会自动填充黑色
<svg>
<circle cx="100" cy="100" r="30" stroke="red" stroke-width="10" fill="transparent"></circle>
</svg>
<ellipse>
椭圆，在圆的基础上多一个半径
包含属性：
-
cx: 圆心x的位置 -
cy: 圆心y的位置 -
rx： 椭圆横轴方向的半径 -
ry: 椭圆纵轴方向的半径
#3 ellipse.jpg
示例：
<svg>
<ellipse cx="60" cy="60" rx="50" ry="25" fill="pink"/>
</svg>
<line>
直线：
包含属性：
-
x1: 第一点横坐标 -
y1: 第一个点纵坐标 -
x2：第二点横坐标 -
y2: 第二个点纵坐标
#4 line.jpg
示例：
<svg>
<line x1="10" y1="10" x2="100" y2="100" stroke="blue"></line>
</svg>
<polyline>
折线，含有多个点，不会自动闭合第一个点
包含属性：
-
points: 格式是(xi, yi)一次的描述点的位置， 使用空格或者逗号分隔开都可以
#5 polyline.jpg
示例：
<svg>
<polyline points="10 10 20 0 40 40 80 10" stroke="red" stroke-width="2" fill="transparent"></polyline>
</svg>
// 或者使用逗号分割
<svg>
<polyline points="10, 10, 20, 0, 40, 40, 80, 10" stroke="red" stroke-width="2" fill="transparent"></polyline>
</svg>
<polygon>
多边形和折线的唯一区别在于，多边形会把第一个点和最后一个点自动的闭合起来
包含属性：
-
points: 格式是(xi, yi)一次的描述点的位置， 使用空格或者逗号分隔开都可以
#6 polygon.jpg
示例：
<svg>
<polygon points="10 10 20 0 40 40 80 10" stroke="red" stroke-width="2" fill="transparent"></polygon>
</svg>
// 或者使用逗号分割
<svg>
<polygon points="10, 10, 20, 0, 40, 40, 80, 10" stroke="red" stroke-width="2" fill="transparent" />
</svg>
本文来自学习笔记svg - 慕课网
