#1 基本概念和标签

基本图形和属性

基本图形：

• <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 - 慕课网