<?xml version="1.0" standalone="no"?>
xml:定義了當前的格式為 xml
version:定義當前的版本
standalone:定義是否引用了外部檔案
通過 path 即可設定路徑
"m150 0 l75 200 l225 200 z"
stroke
="pink"
fill
="#fff"
>
path
>
m:move to 代表的是起始路徑
l:line to 代表移動的路徑
z:closepath 代表封閉路徑
stroke:線條填充的顏色
fill:封閉圖形中間填充的顏色
繪製多邊形
points
="100,10 40,198 190,78 10,78 160,198"
stroke
="pink"
stroke-width
="1"
fill
="green"
fill-rule
="evenodd"
>
polygon
>
fill-rule:填充規則（nonzero：字面意思是非零。按照規則，要判斷乙個點是否在圖形內，從該點作任意方向的一條射線，然後檢測射線與圖形路徑的交點情況。從0開始計數，路徑從左向右穿過射線則計數加1，從右向左穿過射線則計數減1。得出計數結果後，如果結果是0，則認為點在圖形外部，否則認為在內部。）
（evenodd：字面意思是「奇偶」。按照規則，要判斷乙個點是否在圖形內，該點作任意方向的一條射線，然後檢測射線與圖形路徑的交點的數量。如果結果是奇數則認為點在內部，是偶數則認為點在外部。）
繪製多線段
points
="20,20 40,25 60,40 120,80 120,140 200,180"
stroke
="red"
fill
="none"
>
polyline
>
繪製矩形
>
"20"
ry="20" x=
"50" y=
"20"
width
="150"
height
="80"
style
="stroke
:red;
fill
:***;
stroke-width
:5;stroke-opacity
:0.2;
fill-opacity
:0.7;
">
rect
>
svg>
rx:x軸半徑
ry:y軸半徑
x:x軸距離
y:y軸距離
stroke-opacity:描邊透明度
fill-opacity:填充透明度
繪製圓形
"100"
cy="50" r=
"40"
stroke
="red"
stroke-width
="4"
fill
="yellow"
>
circle
>
cx:距離x軸的距離
cy:距離y軸的距離
defs 宣告
>
"left"
>
>
circle
>
g>
"right"
>
>
circle
>
g>
defs
>
若需要 defs 顯示
xlink:href
="#left" x=
"100" y=
"100"
>
use>
"shape1"
viewbox
="0 0 50 100"
>
"0" y
="0"
width
="50"
height
="50"
fill
="green"
>
rect
>
symbol
>
xlink:href
="#shape1" x=
"25" y=
"25"
width
="200"
height
="100"
>
use>
viewbox:設定顯示的位置和大小
設定描邊型別的動畫
"100" y=
"50"
width
="100"
height
="100"
stroke
="green"
fill
="none"
stroke-dasharray
="400"
stroke-dashoffset
="400"
stroke-linecap
="square"
>
rect
>
主要就是設定 stroke-dasharray:線條間距
stroke-dashoffset:指定了dash模式到路徑開始的距離
SVG動畫之描邊動畫
svg描邊動畫使用stroke dasharray與stroke dashoffset兩個屬性 stroke dasharray屬性可將svg圖形的路徑斷為虛線，如下 是一條直線 如新增stroke dasharray 10 10屬性後，變為下圖 可見直線被分為了間隔為10px的虛線，若實現描邊效果...
svg描邊動畫原理
1.svg基本圖形有7種 矩形 圓形 橢圓 線 折線 多邊形 路徑 其中，path可以繪製任意圖形 2.svg描邊動畫原理 svg的描邊動畫就是利用stroke dasharray和stroke dashoffset兩個屬性值的變化來實現的。2.1 stroke dasharray用來畫虛線 str...
利用svg描邊 css3實現邊框逐漸消失小動畫
首先簡單的描述一下svg中兩個屬性 stroke dasharray 表示每個虛線的長短。stroke dashoffset 表示首個虛線的偏移量。當兩者都特別大的時候就會消失掉 直接上 doctype html html lang en head meta charset utf 8 title ...