當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

从零开始学习SVG

發布時間：2023/12/2 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了从零开始学习SVG 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 什么是SVG？

MDN中的定義是：SVG即可縮放矢量圖形（Scalable Vector Graphics，SVG)，是一種用來描述二維矢量圖形的?XML?標記語言。簡單地說，SVG 面向圖形，HTML 面向文本。
SVG 與 Flash 類似，都是用于二維矢量圖形，二者的區別在于，SVG 是一個?W3C 標準，基于 XML，是開放的，而 Flash 是封閉的基于二進制格式的。因為都是 W3C 標準，SVG 與其他的?W3C?標準，比如?CSS、DOM?和?SMIL?等能夠協同工作。

2 SVG的坐標系統

對于所有元素，SVG使用的坐標系統或者說網格系統，和Canvas用的差不多（所有計算機繪圖都差不多）。這種坐標系統是：以頁面的左上角為(0,0)坐標點，坐標以像素為單位，x軸正方向是向右，y軸正方向是向下。注意，這和你小時候所教的繪圖方式是相反的。但是在HTML文檔中，元素都是用這種方式定位的。

3 畫圖形

畫矩形（rect）　　 <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> /*x 矩形左上角的x位置 y 矩形左上角的y位置 width 矩形的寬度 height 矩形的高度 rx 圓角的x方位的半徑 ry 圓角的y方位的半徑 */
?

畫橢圓（ellipse） <ellipse cx="75" cy="75" rx="20" ry="5"/> /*rx 橢圓的x半徑 ry 橢圓的y半徑 cx 橢圓中心的x位置 cy 橢圓中心的y位置*/
?

畫直線（line） <line x1="10" x2="50" y1="110" y2="150"/> /*x1 起點的x位置 y1 起點的y位置 x2 終點的x位置 y2 終點的y位置*/
?

畫折線（polyline） <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> /*points 點集數列。每個數字用空白、逗號、終止命令符或者換行符分隔開。每個點必須包含2個數字，一個是x坐標，一個是y坐標。所以點列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。*/
?

畫多邊形（polygon） <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/> /*points 點集數列。每個數字用空白符、逗號、終止命令或者換行符分隔開。每個點必須包含2個數字，一個是x坐標，一個是y坐標。所以點列表 (0,0), (1,1) 和(2,2)可以寫成這樣：“0 0, 1 1, 2 2”。路徑繪制完后閉合圖形，所以最終的直線將從位置(2,2)連接到位置(0,0)。*/
?

畫路徑（） <path d="M 20 230 Q 40 205, 50 230 T 90230"/> /**/

?指令及參數見下圖

指令	參數	說明
M	x y	將畫筆移動到點(x,y)
L	x y	畫筆從當前的點繪制線段到點(x,y)
H	x?	畫筆從當前的點繪制水平線段到點(x,y0)
V	y?	畫筆從當前的點繪制豎直線段到點(x0,y)
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	畫筆從當前的點繪制一段圓弧到點(x,y)
C	x1 y1, x2 y2, x y	畫筆從當前的點繪制一段三次貝塞爾曲線到點(x,y)
S	x2 y2, x y	特殊版本的三次貝塞爾曲線(省略第一個控制點)
Q	x1 y1, x y?	繪制二次貝塞爾曲線到點(x,y)
T	x y	特殊版本的二次貝塞爾曲線(省略控制點)
Z	無參數	繪制閉合圖形，如果d屬性不指定Z命令，則繪制線段，而不是封閉圖形。

4 待補充

更多專業前端知識，請上【猿2048】www.mk2048.com

以上是生活随笔為你收集整理的从零开始学习SVG的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。