SVG相關學習一 SVG基礎

svg

svg 指可伸縮向量圖形 (scalable vector graphics)

svg viewbox

viewport svg 實際大小

viewbox="x, y, width, height" // x:左上角橫座標，y:左上角縱座標，width:寬度，height:高度

視區盒子：以視區盒子大小選中元素然後縮放至viewport的大小

第1個值表示，viewbox如何與svg viewport對齊；第2個值表示，如何維持高寬比（如果有)

meet 保持縱橫比同時比例大的方向縮放適應viewport slice 保持縱橫比同時比例小的方向縮放適應viewport none 扭曲縱橫比以充分適應viewport

參考文章張鑫旭

漸變線性漸變

先定義再引用

gradientunit屬性

userspaceonuse:(預設值) x1、y1、x2、y2表示當前使用者座標系統的座標。也就是說漸變中的值都是絕對值。 objectboundingbox: x1, y1, x2, y2表示應用漸變的元素建立的邊界座標系統。也就是說漸變隨著應用的元素進行了縮放。

spreadmethod屬性

pad: （預設值）使用漸變的顏色結點來填充剩餘的空間。例如，如果第乙個結點是20%，那麼0%到20%這部分就是相同的顏色。 reflect: 對映漸變圖案，從'start-to-end'，再從'end-to-start'，然後'start-to-end'，直到空間都填滿了。 repeat: 重複漸變圖案，從起點->終點，直到空間填滿。

徑向漸變

先定義再引用

stop的屬性

offset: 在徑向漸變中，它表示從點(fx,fy)到外邊緣的圓的百分比值距離。它定義了漸變結點的位置。值從0到1之間，或者0%到100%。 stop-color: 定義offset結點位置的顏色 stop-opacity: 定義顏色結點的透明度，值從0到1，或0%到100%。

gradientunit屬性和spreadmethod屬性類似於線性漸變

焦點：

基本形狀

矩形 rect: x:矩形左上角的x座標 y:矩形左上角的y座標 width:矩形的寬度 height:矩形的高度 rx:對於圓角矩形,圓角對應的橢圓在x方向上的半徑 ry:對於圓角矩形,圓角對應的橢圓在y方向上的半徑圓 circle cx:圓心的x座標 cy:圓心的y座標 r:圓的半徑橢圓 ellipse cx:橢圓心的x座標 cy:橢圓心的y座標 rx:橢圓的x軸半徑 ry:橢圓的y軸半徑線段 line x1:起點的x座標 y1:起點的y座標 x2:終點的x座標 y2:重點的y座標多邊形 polygon points各個點的座標

path基本相關屬性

fill //填充(線條包裹的區間)顏色 stroke //定義一條線，文字或元素輪廓顏色 stroke-width //定義一條線，文字或元素輪廓厚度 stroke-linecap //butt | round | square | inherit

stroke-dasharray,stroke-dashoffset

stroke-dasharray:繪製虛線:乙個引數時：表示一段虛線長度和每段虛線之間的間距兩個引數或者多個引數時：乙個表示長度，乙個表示間距 stroke-dashoffset: 表示虛線的起始偏移

path d 路徑相關

直線命令：

m:將畫筆移動 m10,10(兩個引數)
h:畫水平線 h100(乙個引數)
v:畫豎直線 v100(乙個引數)
z:閉合(無引數)

以上命令大寫表示絕對位置(明確的座標)，小寫表示相對座標(相對於前乙個點的座標)

曲線命令：

c 三次貝塞爾曲線 x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) x1 y1, x2 y2 兩個不同的控制點 x y 終點 s x2 y2, x y (or s dx2 dy2, dx dy) （s命令可以用來建立與之前那些曲線一樣的貝塞爾曲線，但是，如果s命令跟在乙個c命令或者另乙個s命令的後面，它的第乙個控制點，就會被假設成前乙個控制點的對稱點。如果s命令單獨使用，前面沒有c命令或者另乙個s命令，那麼它的兩個控制點就會被假設為同乙個點。） q x1 y1, x y (or q dx1 dy1, dx dy) x1 y1 控制點確定起點終點的斜率 x y 終點座標 t 二次貝塞爾曲線 x y (or t dx dy) 和之前一樣，快捷命令t會通過前乙個控制點，推斷出乙個新的控制點。這意味著，在你的第乙個控制點後面，可以只定義終點，就建立出乙個相當複雜的曲線。需要注意的是，t命令前面必須是乙個q命令，或者是另乙個t命令，才能達到這種效果。如果t單獨使用，那麼控制點就會被認為和終點是同乙個點，所以畫出來的將是一條直線。 a:畫弧形 a rx ry x-axis-rotation large-arc-flag sweep-flag x y： rx,ry:表示弧形x,y軸半徑, x-axis-rotation: 弧形的旋轉情況(順時針為正)(0不旋轉) large-arc-flag:角度大小(0表示小角度弧，1表示大角度弧) sweep-flag:弧線方向(0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧) x,y:弧的終點座標

三次貝塞爾曲線c: