进入SVG

SVG-简单示例

code

rect

code

circle

code

ellipse

code

line

code

polyline

code

polygon

code

填充、描边、变换

基本操作API

• 创建图形

document.createElementNS(ns, tagName)

• 添加图形

element.appendChild(childElement)

• 设置/获取属性

element.setAttribute(name, value)
element.getAttribute(name)

svg综合运用的小例子svg-editor

SVG的世界、视野、视窗

定义

• 世界就是无限大的,无穷无尽
• 视野是coder编写的所有的代码
• 视窗浏览器开辟出来用于渲染SVG内容的一个区域
• code中所设置的宽高都是设置在视窗上的

描述

• SVG代码-定义世界
• width,height-控制视窗[看世界的一扇窗户]，
• viewBox,preserveAspectRatio-控制视野[我们能看到世界大小的一种能力]
  视野越广阔，看到的内容越丰富，单个物体的内容越小，跟屏幕分辨率一个道理
  理想情况下，视野和视窗有一样的尺寸
  不一样的情况，就需要填充策略preserveAspectRatio

视窗

g演变过程

锤子-1

SVG中的图形分组

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

svg坐标系

4个坐标系

• 用户坐标系(User Coordinate)
  世界的坐标系

  
  

• 自身坐标系(Current Coordinate)
  每个图形元素或分组独立与生俱来

  
  

• 前驱坐标系(Previous Coordinate)
  父容器的坐标系

  
  

• 参考坐标系(Reference Coordinate)
  使用其它坐标系来考究自身的情况时使用

  
  

坐标变换

线性变换

旋转

缩放

线性变换列表

transform属性

• 前驱坐标系：父容器坐标系
• transform属性：定义前驱坐标系到自身坐标系的线性变换
• 语法：

rotate()
translate(,)
scale(,)
matrix(,,,,,)

调色面板

在SVG中应用颜色

线性渐变

• 和
• 定义方向
• 关键点位置及颜色
• gradientUnits
  
  
  code
  
  
  使用自身的坐标

code

径向渐变

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

笔刷

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

code

项目代码