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

<svg xmlns="..."
width="800" height="600" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
<!--SVG Content-->
</svg>

视窗

g演变过程

锤子-1

SVG中的图形分组

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

svg坐标系

4个坐标系

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

  
  

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

  
  

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

  
  

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

  
  

坐标变换

线性变换

旋转

缩放

线性变换列表

transform属性

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

rotate(<deg>)
translate(<x>,<y>)
scale(<sx>,<sy>)
matrix(<a>,<b>,<c>,<d>,<e>,<f>)

调色面板

在SVG中应用颜色

<rect fill="rgb(255,0,0)" opacity="0.5" />
<rect stroke="hsla(0,50%,60%,0.5) />"

线性渐变

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

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="350">
  <defs>
    <linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1497FC" />
      <stop offset="0.5" stop-color="#A469BE" />
      <stop offset="1" stop-color="#FF8C00" />
    </linearGradient>
  </defs>
  <rect x="100" y="100" fill="url(#grad1)" width="200" height="150" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="350">
  <defs>
    <linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="150" y2="150">
      <stop offset="0" stop-color="#1497FC" />
      <stop offset="0.5" stop-color="#A469BE" />
      <stop offset="1" stop-color="#FF8C00" />
    </linearGradient>
  </defs>
  <rect x="100" y="100" fill="url(#grad1)" width="200" height="150" />
</svg>

code

径向渐变

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

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="350">
  <defs>
    <radialGradient id="grad2" cx="0.5" cy="0.5" r="0.5" fx="0.6" fx="0.3">
      <stop offset="0" stop-color="rgb(20,151,252)" />
      <stop offset="0.5" stop-color="rgb(164,105,190)" />
      <stop offset="1" stop-color="rgb(255,140,0)" />
    </radialGradient>
  </defs>
  <rect x="100" y="100" fill="url(#grad2)" width="200" height="150" />
</svg>

笔刷

• 绘制纹理
• <pattern>标签
• patternUnits和patternContentUnits

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
  <defs>
    <pattern id="p1" x="0" y="0" width="0.2" height="0.2">
      <circle cx="10" cy="10" r="5" fill="red"></circle>
      <polygon points="30 10 60 50 0 50" fill="green"></polygon>
    </pattern>
  </defs>
  <rect x="100" y="100" fill="url(#p1)" width="800" height="300" stroke="blue" />
</svg>

code

项目代码