SVG (Scalable Vector Graphics) Graphiques vectoriels évolutifs
Un format graphique utilisé pour décrire les graphiques vectoriels bidimensionnels
SVG est apparu il y a longtemps
Comparé au canevas , il est plus adapté à la création de petites ic?nes, etc.
HTML5 prend en charge le SVG en ligne
Ses avantages sont les suivants?:

• évolutif

• Peut être créé et modifié via un éditeur de texte

• Peut être recherché, indexé, scripté ou compressé

• Peut imprimer avec une haute résolution qualité à n'importe quelle résolution

• Peut être agrandie sans perte de qualité de l'image

la toile est un dessin dynamique js, et svg est un document XML pour décrire dessin
svg-icon URL?: Portail
Voyons comment utiliser le dessin svg

pour créer du svg

est similaire à la toile, vous devez d'abord créer des balises

<svg width=300 height=300></svg>

dans le document html. Vous pouvez également spécifier les attributs de largeur et de hauteur
(si canevas et svg ne spécifient pas la largeur et la hauteur, la valeur par défaut est 300×150)
Mais ?a en a un autre Pour une forme d'utilisation (attribut viewbox), vous pouvez lire mon autre article : Portail
Le dessin graphique suivant est très similaire au canevas, je vais donc vous en expliquer plus
La différence se présente sous la forme de balises XML écrit à l'intérieur de la balise svg
et spécifiant la largeur et la hauteur pour le style CSS de svg ne le fera pas évoluer proportionnellement

Dessin graphique de base

Ligne droite

<svg width=300 height=300>
    <line x1=100 y1=100 x2=200 y2=200></line></svg>

Coordonnée de départ x1, y1
Coordonnée de fin x2, y2

Vous devez également spécifier le style CSS pour le dessiner

line {    stroke: #000;}

(les attributs de style font référence aux attributs dans le objet d'environnement de toile)

Rectangle

<svg width=300 height=300>
    <rect x=100 y=100 width=100 height=100 rx=10 ry=10></rect></svg>

x,y coordonnées de départ du rectangle
largeur, hauteur largeur et hauteur du rectangle
rx, ry rectangle coins arrondis

rect {    stroke: #000;    fill: transparent;}

Notez ici que le rectangle a un style par défautfill: #000;
Les éléments suivants sont également les mêmes

Cercle

<svg width=300 height=300>
    <circle r=100 cx=150 cy=150></circle></svg>

r rayon
cx,cy coordonnée du centre du cercle

circle {    stroke: #000;    fill: transparent;}

ellipse

<svg width=300 height=300>
    <ellipse rx=100 ry=60 cx=150 cy=150></ellipse></svg>

rx, ry rayon long/rayon court
cx,cy coordonnées du centre du cercle

circle {    stroke: #000;    fill: transparent;}

Polyligne

<svg width=300 height=300>
    <polyline points="100 100, 100 150, 150 150, 150 200, 200 200"></polyline></svg>

points spécifie les points que la polyligne passe par
Les coordonnées horizontales et verticales sont séparées par des espaces
Séparez plusieurs coordonnées par des virgules

polyline {    stroke: #000;    fill: transparent;}

Polygone

<svg width=300 height=300>
    <polygon points="100 100, 100 150, 150 150, 150 200, 200 200"></polygon></svg>

Elle est similaire à la polyligne ci-dessus
sauf que son point final reliera le point de départ
pour former un effet fermé
similaire à closePath() dans le canevas

polygon {    stroke: #000;    fill: transparent;}

Texte

<svg width=300 height=300>
    <text x=100 y=100>hello world!</text></svg>

Coordonnée de départ du texte x, y (en bas à gauche)

text {    font-size: 30px;}

Commande Chemin

Le chemin doit utiliser la balise path
Il a un attribut d, nous pouvons ajouter des instructions pour terminer le dessin
C'est beaucoup plus simple que notre méthode de dessin ci-dessus

Commande M/m et Commande L/l

<!-- M/L指令 --><svg width=300 height=300>
    <path d="M 100 100 L 200 200"></path></svg>

<!-- m/l指令 --><svg width=300 height=300>
    <path d="m 100 100 l 100 100"></path></svg>

Dans ces deux instructions, les chemins générés sont les mêmes
L'instruction M est équivalente à moveTo() dans canvas pour spécifier les coordonnées du point de départ
L'instruction L est équivalente à lineTo() dans canvas pour spécifier les coordonnées du point milieu/fin
La différence est que la commande M/L est une coordonnée absolue (positionnée par rapport à l'origine des coordonnées svg)
while la commande m/l est une coordonnée relative (positionnée par rapport au point précédent)
Bien entendu, vous devez également ajouter un style CSS avant de pouvoir la dessiner

path {    stroke: #000;}

Commande H/h et commande V/v

Ces deux commandes sont utilisées pour effectuer un dessin horizontal et un dessin vertical
De même, H et V sont des instructions absolues, h et v sont des instructions relatives

<svg width=300 height=300>
    <path d="M 100 100 H 200 V 200"></path></svg>

est équivalent à

<svg width=300 height=300>
    <path d="M 100 100 h 100 v 100"></path></svg>

avec le style de remplissage par défaut, modifié en transparent

path {    stroke: #000;    fill: transparent;}

Spécifie l'origine du chemin 100 100
Ensuite, il se déplace de 100?px horizontalement vers la droite et de 100?px verticalement vers le bas

Commande Z/z

Les commandes Z et Z n'ont rien de différence
Une fois le segment de ligne dessiné, ajouter la commande z
connectera le point de départ et le point final. La courbe fermée
est similaire à closePath() dans le canevas

<svg width=300 height=300>
    <path d="M 100 100 h 100 v 100 Z"></path></svg>

path {    stroke: #000;    fill: transparent;}

Elle est différente de la méthode de dessin sur toile, elle est plus puissante et complexe
Regardez d'abord ce 7 paramètres
rx, ry, rotation de l'axe x, drapeau à grand arc, drapeau de balayage, x, y

rx,ry 表示繪制圓弧的x軸半徑和y軸半徑
x-axis-rotation 表示圓弧相對(duì)x軸的旋轉(zhuǎn)角度，默認(rèn)順時(shí)針，可以是負(fù)值
large-arc-flag 表示圓弧路徑是大圓弧還是小圓?。?大圓弧、0小圓?。?
sweep-flag 表示起點(diǎn)到終點(diǎn)是順時(shí)針還是逆時(shí)針（1順時(shí)針、0逆時(shí)針）
x,y 終點(diǎn)坐標(biāo)（A命令絕對(duì)坐標(biāo)、a命令相對(duì)坐標(biāo)）

只是看這些可能不好理解我來(lái)舉個(gè)例子給大家解釋一下
其實(shí)只要把這個(gè)圓弧看成是橢圓的一部分就好理解了

<svg width=300 height=300>
    <path d="M 100 100 A 100 50 90 1 1 200 200"></path></svg>

path {    stroke: #000;    fill: transparent;}

這個(gè)例子中弧的起點(diǎn)是100,100
終點(diǎn)是200,200這個(gè)不難理解
A指令中前兩個(gè)參數(shù) 100 50
就相當(dāng)于我先畫(huà)了一個(gè)100×50的橢圓
第三個(gè)參數(shù)90
便是將這個(gè)橢圓順時(shí)針旋轉(zhuǎn)90°
根據(jù)起點(diǎn)與終點(diǎn)
此時(shí)橢圓可以拆分為一個(gè)短路徑和一個(gè)長(zhǎng)路徑
第四個(gè)參數(shù)1
便是表示選取較長(zhǎng)的路徑作為弧
第五個(gè)參數(shù)1
表示路徑的方向?yàn)轫槙r(shí)針

貝塞爾曲線指令Q/T、C/S

二次貝塞爾曲線指令
Q x1 y1 , x y
T x y
三次貝塞爾曲線指令
C x1 y1 , x2 y2 , x y
S x2 y2 , x y

Q命令繪制到（x,y）的二次貝塞爾曲線，（x1,y1）為控制點(diǎn)

T命令繪制到（x,y）的二次貝塞爾曲線，控制點(diǎn)是前一個(gè)Q命令控制點(diǎn)的中心對(duì)稱點(diǎn)
如果沒(méi)有前一條曲線，當(dāng)前點(diǎn)會(huì)被用作控制點(diǎn)。繪制出來(lái)的曲線更流暢

C命令繪制到（x,y）的三次貝塞爾曲線，（x1,y1）（x2,y2）為控制點(diǎn)

S命令繪制到（x,y）的三次貝塞爾曲線，（x2,y2）為新端點(diǎn)的控制點(diǎn)
第一個(gè)控制點(diǎn)是前一個(gè)C命令控制點(diǎn)的中心對(duì)稱點(diǎn)
如果沒(méi)有前一條曲線，當(dāng)前點(diǎn)會(huì)被用作控制點(diǎn)。繪制出來(lái)的曲線更流暢

<svg width=300 height=300>
    <path d="M 100 100 Q 200 100 200 200"></path></svg>

path {    stroke: #000;    fill: transparent;}

關(guān)于貝塞爾曲線的數(shù)學(xué)解釋我在canvas寫(xiě)過(guò)了
這里就不再說(shuō)了 → 傳送門

SVG樣式屬性

關(guān)于svg的css樣式屬性
類比于canvas中環(huán)境對(duì)象的屬性
它們含義都是類似的，不多做解釋了

• fill

• stroke

• stroke-width

• stroke/fill-opacity

• stroke-linecap

• stroke-linejoin

==主頁(yè)傳送門==

SVG（Scalable Vector Graphics）可縮放矢量圖形
用于描述二維矢量圖形的一種圖形格式
很早之前SVG就出現(xiàn)了
相比于canvas，它更適合作一些小圖標(biāo)icon等等
HTML5支持內(nèi)聯(lián)SVG
它的優(yōu)點(diǎn)如下：

• 可伸縮

• 可通過(guò)文本編輯器創(chuàng)建和修改

• 可被搜索、索引、腳本化或壓縮

• 可在任何的分辨率下被高質(zhì)量地打印

• 可在圖像質(zhì)量不下降的情況下被放大

canvas是js動(dòng)態(tài)繪圖，而svg是XML文檔來(lái)描述繪圖
svg-icon網(wǎng)址：傳送門
下面我們來(lái)看一下如何使用svg繪圖

創(chuàng)建svg

和canvas類似，首先需要在html文檔中創(chuàng)建標(biāo)簽

<svg width=300 height=300></svg>

也可以指定width與height屬性
（canvas與svg如果不指定寬高，默認(rèn)300×150）
不過(guò)它還有另外一種使用的形式（viewbox屬性），可以看看我的另一篇文章：傳送門
接下來(lái)的圖形繪制和canvas很像了，就多解釋了
區(qū)別是以XML標(biāo)簽的形式寫(xiě)在svg標(biāo)簽內(nèi)部
而且為svg的css樣式指定寬高不會(huì)使它等比縮放

基本圖形繪制

直線

<svg width=300 height=300>
    <line x1=100 y1=100 x2=200 y2=200></line></svg>

x1,y1 起始坐標(biāo)
x2,y2 終點(diǎn)坐標(biāo)

還需要指定css樣式才能夠畫(huà)出來(lái)

line {    stroke: #000;}

（樣式屬性參考canvas環(huán)境對(duì)象中的屬性）

矩形

<svg width=300 height=300>
    <rect x=100 y=100 width=100 height=100 rx=10 ry=10></rect></svg>

x,y 矩形起始坐標(biāo)
width,height 矩形寬高
rx,ry 矩形圓角

rect {    stroke: #000;    fill: transparent;}

這里要注意矩形有默認(rèn)的樣式 fill: #000;
下面的也都一樣

圓形

<svg width=300 height=300>
    <circle r=100 cx=150 cy=150></circle></svg>

r 半徑
cx,cy 圓心坐標(biāo)

circle {    stroke: #000;    fill: transparent;}

橢圓

<svg width=300 height=300>
    <ellipse rx=100 ry=60 cx=150 cy=150></ellipse></svg>

rx,ry 長(zhǎng)半徑/短半徑
cx,cy 圓心坐標(biāo)

circle {    stroke: #000;    fill: transparent;}

折線

<svg width=300 height=300>
    <polyline points="100 100, 100 150, 150 150, 150 200, 200 200"></polyline></svg>

points指定折線經(jīng)過(guò)的點(diǎn)
橫縱坐標(biāo)空格隔開(kāi)
多個(gè)坐標(biāo)間逗號(hào)隔開(kāi)

polyline {    stroke: #000;    fill: transparent;}

多邊形

<svg width=300 height=300>
    <polygon points="100 100, 100 150, 150 150, 150 200, 200 200"></polygon></svg>

和上面的折線差不多
只不過(guò)它的終點(diǎn)會(huì)連接起點(diǎn)
形成閉合的效果
類似于canvas中的closePath()

polygon {    stroke: #000;    fill: transparent;}

文本

<svg width=300 height=300>
    <text x=100 y=100>hello world!</text></svg>

x,y 文本起始坐標(biāo)（左下）

text {    font-size: 30px;}

路徑命令

路徑需要用path標(biāo)簽
它有一個(gè)屬性d，我們可以添加指令來(lái)完成繪圖
這要比我們上面的繪制方法簡(jiǎn)潔許多

M/m命令與L/l命令

<!-- M/L指令 --><svg width=300 height=300>
    <path d="M 100 100 L 200 200"></path></svg>

<!-- m/l指令 --><svg width=300 height=300>
    <path d="m 100 100 l 100 100"></path></svg>

在這兩個(gè)指令中，產(chǎn)生的路徑是一樣的
M指令相當(dāng)于canvas中的moveTo()指定起始點(diǎn)坐標(biāo)
L指令相當(dāng)于canvas中的lineTo()指定中/終點(diǎn)坐標(biāo)
區(qū)別是，M/L指令是絕對(duì)坐標(biāo)（相對(duì)于svg坐標(biāo)原點(diǎn)定位）
而m/l指令是相對(duì)坐標(biāo)（相對(duì)于上一個(gè)點(diǎn)定位）
當(dāng)然還需要添加css樣式才可以繪制

path {    stroke: #000;}

H/h命令與V/v命令

這兩個(gè)指令用來(lái)執(zhí)行水平繪制與垂直繪制
同樣H與V是絕對(duì)指令，h與v是相對(duì)指令

<svg width=300 height=300>
    <path d="M 100 100 H 200 V 200"></path></svg>

等價(jià)于

<svg width=300 height=300>
    <path d="M 100 100 h 100 v 100"></path></svg>

有默認(rèn)fill樣式，修改為透明

path {    stroke: #000;    fill: transparent;}

指定了路徑原點(diǎn)100,100
然后水平向右移動(dòng)了100px，又垂直向下移動(dòng)了100px

Z/z命令

z與Z命令沒(méi)有任何區(qū)別
線段繪制完畢后，添加z命令
會(huì)連接起點(diǎn)與終點(diǎn)，閉合曲線
類似于canvas中的closePath()

<svg width=300 height=300>
    <path d="M 100 100 h 100 v 100 Z"></path></svg>

path {    stroke: #000;    fill: transparent;}

A/a命令

A/a命令用來(lái)繪制弧，它有7個(gè)參數(shù)
與canvas繪制方式不同，它更強(qiáng)大并且復(fù)雜
首先看看這7個(gè)參數(shù)
rx、ry、x-axis-rotation、large-arc-flag、sweep-flag、x、y

rx,ry 表示繪制圓弧的x軸半徑和y軸半徑
x-axis-rotation 表示圓弧相對(duì)x軸的旋轉(zhuǎn)角度，默認(rèn)順時(shí)針，可以是負(fù)值
large-arc-flag 表示圓弧路徑是大圓弧還是小圓?。?大圓弧、0小圓?。?
sweep-flag 表示起點(diǎn)到終點(diǎn)是順時(shí)針還是逆時(shí)針（1順時(shí)針、0逆時(shí)針）
x,y 終點(diǎn)坐標(biāo)（A命令絕對(duì)坐標(biāo)、a命令相對(duì)坐標(biāo)）

只是看這些可能不好理解我來(lái)舉個(gè)例子給大家解釋一下
其實(shí)只要把這個(gè)圓弧看成是橢圓的一部分就好理解了

<svg width=300 height=300>
    <path d="M 100 100 A 100 50 90 1 1 200 200"></path></svg>

path {    stroke: #000;    fill: transparent;}

這個(gè)例子中弧的起點(diǎn)是100,100
終點(diǎn)是200,200這個(gè)不難理解
A指令中前兩個(gè)參數(shù) 100 50
就相當(dāng)于我先畫(huà)了一個(gè)100×50的橢圓
第三個(gè)參數(shù)90
便是將這個(gè)橢圓順時(shí)針旋轉(zhuǎn)90°
根據(jù)起點(diǎn)與終點(diǎn)
此時(shí)橢圓可以拆分為一個(gè)短路徑和一個(gè)長(zhǎng)路徑
第四個(gè)參數(shù)1
便是表示選取較長(zhǎng)的路徑作為弧
第五個(gè)參數(shù)1
表示路徑的方向?yàn)轫槙r(shí)針

貝塞爾曲線指令Q/T、C/S

二次貝塞爾曲線指令
Q x1 y1 , x y
T x y
三次貝塞爾曲線指令
C x1 y1 , x2 y2 , x y
S x2 y2 , x y

Q命令繪制到（x,y）的二次貝塞爾曲線，（x1,y1）為控制點(diǎn)

T命令繪制到（x,y）的二次貝塞爾曲線，控制點(diǎn)是前一個(gè)Q命令控制點(diǎn)的中心對(duì)稱點(diǎn)
如果沒(méi)有前一條曲線，當(dāng)前點(diǎn)會(huì)被用作控制點(diǎn)。繪制出來(lái)的曲線更流暢

C命令繪制到（x,y）的三次貝塞爾曲線，（x1,y1）（x2,y2）為控制點(diǎn)

S命令繪制到（x,y）的三次貝塞爾曲線，（x2,y2）為新端點(diǎn)的控制點(diǎn)
第一個(gè)控制點(diǎn)是前一個(gè)C命令控制點(diǎn)的中心對(duì)稱點(diǎn)
如果沒(méi)有前一條曲線，當(dāng)前點(diǎn)會(huì)被用作控制點(diǎn)。繪制出來(lái)的曲線更流暢

<svg width=300 height=300>
    <path d="M 100 100 Q 200 100 200 200"></path></svg>

path {    stroke: #000;    fill: transparent;}

關(guān)于貝塞爾曲線的數(shù)學(xué)解釋我在canvas寫(xiě)過(guò)了
這里就不再說(shuō)了 → 傳送門

SVG樣式屬性

關(guān)于svg的css樣式屬性
類比于canvas中環(huán)境對(duì)象的屬性
它們含義都是類似的，不多做解釋了

• fill

• stroke

• stroke-width

• stroke/fill-opacity

• stroke-linecap

• stroke-linejoin

?以上就是SVG（可縮放矢量圖形）基本圖形繪制方法與path路徑命令的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！