SVG基礎教程(超級詳細)

張憲坤發布于2019-08-21 17:42 / 3760人閱讀

摘要：光滑三次貝塞爾曲線指令跟在指令或指令后面補刀，它會自動在基礎上生成一個對稱點，所以指令只需要兩個點就可以。二次貝塞爾曲線是控制點，表示的是曲線的終點。

一、內置圖形:

rect(矩形)    
circle(圓)  
ellipse(橢圓)   
line(直線)   
polyline(折線)  
polygon(多邊形)  
path(路徑)

二、內置圖形的html屬性或(css樣式):

fill(填充顏色)   
fill-opacity(填充透明度)
stroke(邊框顏色)   
stroke-width(邊框寬度)   
stroke-opacity(邊框透明度)   
stroke-dasharray(創建虛線)
transform(變換)
filter(濾鏡)(url[#濾鏡id)]

三、常見圖形用法 1、矩形

基本用法

擴展用法

2、圓

基本用法

擴展用法

3、橢圓

基本用法

擴展用法

4、直線

基本用法

擴展用法

5、多邊形

基本用法

擴展坐標

第一個點和最后一個點會連接起來，形成閉合的圖形

6、折線

基本用法

擴展用法

第一個點不會和最后一個點連起來，不會閉合

7、路徑

路徑是svg中最強大的圖形

路徑是由一系列命令所組成。

命令            名稱                        參數
 M           moveto ?移動到                (x y)+
 Z          closepath ?關閉路徑            (none)
 L           lineto ?畫線到                (x y)+
 H          horizontal lineto ?水平線到      x+
 V          vertical lineto ?垂直線到        y+
 A        elliptical arc橢圓弧             (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
 C        curveto 三次貝塞爾曲線到          (x1 y1 x2 y2 x y)+
 S     smooth curveto光滑三次貝塞爾曲線到   (x2 y2 x y)+
 Q        Bézier curveto二次貝塞爾曲線到    (x1 y1 x y)+
 T     smooth Bézier curveto光滑二次貝塞爾曲線到  (x y)+

如果指令字母是大寫的，例如M, 則表示坐標位置是絕對位置；如果指令字母小寫的，例如m, 則表示坐標位置是相對位置。

基本用法

擴展用法

圖片描述

7.1、貝塞爾曲線(CSQT簡稱“廁所切圖”)

(1)、三次貝塞爾曲線

Cx1 y1, x2 y2, x y

x1,y1 和x2，y2分別為控制點1和2，而x，y為曲線上的關鍵點
圖片描述
下面為曲線上的點隨著時間的變化而變化的過程。

(2)、光滑三次貝塞爾曲線

Sx2 y2, x y

S指令跟在C指令或S指令后面補刀，它會自動在C、S基礎上生成一個對稱點，所以S指令只需要兩個點就可以。

(3)、二次貝塞爾曲線

Qx1 y1, x y

(x1,y1)是控制點，(x,y)表示的是曲線的終點。

下面為曲線上的點隨著時間的變化而變化的過程。

(4)、光滑二次貝塞爾曲線

Tx y

T指令和S指令類似，是給Q、T指令補刀的，T指令只有一個曲線終點，沒有控制點(由Q的對稱點自動生成)；
也可以多帶帶使用，當多帶帶使用時，是一條直線；

7.2、圓弧

A rx ry x-deg large-arc sweep-flag x y

rx ry表示x軸半徑和y軸半徑，x-deg表示x軸旋轉角度，large-arc表示大于180度還是小于180度(0為小，1為大)，sweep-flag表示弧線方向(0為沿逆時針，1為沿順時針)，x y為最終坐標。

8、文本

基本用法

I love SVG

擴展用法

I love SVG


    I love SVG



    i LOVE d3
  



    I LOVE D3

沿path方向排列文本textPath



    
            Text travels along any path that you define for it.

9、漸變

分為線形漸變和徑向漸變

10、定義和分組

定義可重用部件

使用g分組，或定義統一的樣式。

使用引用在defs中定義的元素，還可在use上設置fill，stroke等屬性。

11、動畫和交互性

動畫被棄用，請使用css animations或者web animations代替

12、事件

最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。

四、好用的svg庫 1、svg.js

svg.js更加接近原生svg語法，可以直觀的操作svg。svg.js更快，兼容性好，上手更方便。

2、Snap.svg

Snap.svg更接近jquery的語法，來操作svg。Snap.svg更全，功能豐富。

GPU云服務器云服務器 python詳細教程綁定域名詳細教程 html詳細教程 hadoop詳細教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89899.html

2月份前端資源分享

摘要：月份前端資源分享更多資源請文章轉自前端生成好看的二維碼十大經典排序算法帶動圖演示為什么知乎前端圈普遍認為游戲和展示的個人整理和封裝的庫中文詳細注釋供新手學習使用擴展語法記錄掉坑初期工具漢字拼音轉換工具實現漢字轉拼音的插件下拉列表支持拼音簡 2月份前端資源分享更多資源請Star：https://github.com/maidishike... 文章轉自：https://github...

yanwei 2019-08-20 14:25 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

lily_wang 2019-06-27 16:28 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

chengjianhua 2019-08-29 12:35 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

Anonymous1 2019-08-20 16:31 評論0 收藏0