SVG-簡(jiǎn)單示例

code

rect

circle

ellipse

line

polyline

polygon

填充、描邊雏蛮、變換

基本操作API

• 創(chuàng)建圖形

document.createElementNS(ns, tagName)

• 添加圖形

element.appendChild(childElement)

• 設(shè)置/獲取屬性

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

svg綜合運(yùn)用的小例子svg-editor

SVG的世界、視野阱州、視窗

定義

• 世界就是無(wú)限大的,無(wú)窮無(wú)盡
• 視野是coder編寫的所有的代碼
• 視窗瀏覽器開辟出來(lái)用于渲染SVG內(nèi)容的一個(gè)區(qū)域
• code中所設(shè)置的寬高都是設(shè)置在視窗上的

描述

• SVG代碼-定義世界
• width,height-控制視窗[看世界的一扇窗戶]挑秉，
• viewBox,preserveAspectRatio-控制視野[我們能看到世界大小的一種能力]
  視野越廣闊，看到的內(nèi)容越豐富苔货，單個(gè)物體的內(nèi)容越小犀概，跟屏幕分辨率一個(gè)道理
  理想情況下立哑，視野和視窗有一樣的尺寸
  不一樣的情況，就需要填充策略preserveAspectRatio

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

視窗

g演變過(guò)程

錘子-1

SVG中的圖形分組

• <g>標(biāo)簽來(lái)創(chuàng)建分組
• 屬性繼承
• transform屬性定義坐標(biāo)變換
• 可以嵌套使用
  
  
  錘子-2
  

svg坐標(biāo)系

4個(gè)坐標(biāo)系

• 用戶坐標(biāo)系(User Coordinate)
  世界的坐標(biāo)系

  
  

• 自身坐標(biāo)系(Current Coordinate)
  每個(gè)圖形元素或分組獨(dú)立與生俱來(lái)

  
  

• 前驅(qū)坐標(biāo)系(Previous Coordinate)
  父容器的坐標(biāo)系

  
  

• 參考坐標(biāo)系(Reference Coordinate)
  使用其它坐標(biāo)系來(lái)考究自身的情況時(shí)使用

  
  

坐標(biāo)變換

線性變換

旋轉(zhuǎn)

縮放

線性變換列表

transform屬性

• 前驅(qū)坐標(biāo)系：父容器坐標(biāo)系
• transform屬性：定義前驅(qū)坐標(biāo)系到自身坐標(biāo)系的線性變換
• 語(yǔ)法：

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

在SVG中應(yīng)用顏色

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

線性漸變

• <linearGradient>和<stop>
• 定義方向
• 關(guān)鍵點(diǎn)位置及顏色
• gradientUnits
  
  
  code
  
  
  使用自身的坐標(biāo)

<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>
• 定義方向
• 關(guān)鍵點(diǎn)位置及顏色
• gradientUnits
• 焦點(diǎn)位置
  
  
  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>標(biāo)簽
• 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