# SVG学习笔记

# 1.1 svg简介-使用方式

• 浏览器直接打开
• 在HTML中使用img标签引用
• 直接在HTML中使用SVG标签
• 作为CSS背景

# 1.2 基本图形和属性

• 基本图形
  rect(矩形)、circle(圆形)、elipse(椭圆)、line(直线)、polyline(折线)、polygon(多边形)
• 基本属性
  fill、stroke、stroke-width、transform

# 1.2.1 rect属性

x、y、width、height、rx、ry

# 1.2.2 circle属性

cx、cy、r

# 1.2.2 elipse属性

cx、cy、rx、ry

# 1.2.3 line属性

x1、x2、y1、y2

# 1.2.4 填充、描边和变换

fill、stroke、stroke-width、transform

# 1.3 基本操作API

• 创建图形
  document.createElementNS(ns,tagName)
• 添加图形 element.appendChild(childElement)
• 设置/获取属性 element.setAttribute(name,value) element.getAttribute(name)

# 2.1 SVG的世界、视野、视窗的概念

• width,height-控制视窗
• svg代码-定义世界
• viewBox，preserveAspectRatio-控制视野

# 2.2 SVG中的图形分组

• 标签来创建分组
• 属性继承
• transform属性定义坐标变换
• 可以嵌套使用

# 2.3 坐标系统概述

• 笛卡尔直角坐标系
• 原点
• 互相垂直的两条数轴
• 角度定义

# 2.4 四个坐标系

• 用户坐标系
  • 世界的坐标系
• 自身坐标系
  • 每个图形元素或分组独立与生俱来
• 前驱坐标系
  • 父容器的坐标系
• 参考坐标系
  • 使用其他坐标系来考究自身的情况时使用

# 2.5 坐标变换

# 2.5.1 坐标变换定义

• svg中，[坐标变换]是对一个坐标系到另一个坐标系的变换的描述

# 3.1 认识RGB和HSL

# 3.2 渐变

• 让图形更丰满
• 线性渐变和径向渐变

# 3.2.1 线性渐变

• 和
• 定义方向
• 关键点位置及颜色
• gradientUnits

# 3.2.2 径向渐变

• 和
• 定义方向
• 关键点位置及颜色gradientUnits
• 焦点位置

# 3.3 笔刷

• 绘制纹理
• 标签
• patternUnits和patternContentUnits

# 4.1 Path概述

• 强大的绘图工具
• 规范 https://www.w3.org/TR/SVG11/paths.html

# 4.1.1 Path概述-Path字符串

<path d="M0,0L10,20C30-10,40,20,100,100" strole="red">

# 4.1.2 Path概述-命令基本规律

• 区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置
• 最后的参数表示最终要到达的位置
• 上一个命令结束的位置就是下一个命令开始的位置
• 命令可以重复参数表示重复执行同一条命令

# 4.2 移动和直线命令

• M(x,y)+ 移动画笔，后面如果有重复参数，会当做是L命令处理
• L(x,y)+ 绘制直线到指定位置
• H(x)+ 绘制水平线到指定的x位置
• V(y)+ 绘制竖直线到指定的y位置
• m、l、h、v使用相对位置绘制