使用SVG畫小貓咪

2021-06-29 04:49:17 字數 2225 閱讀 5742

svg畫簡易小貓咪:第一幅圖是別人的,圖2是自己畫的

-----------------------------分割線----------------------------

**部分:

說明:下面是每個形狀的使用說明(這裡只介紹控制圖形形狀和位置的基本屬性,填充等屬性放到後面總結)。

矩形 - rect元素

這個元素有6個控制位置和形狀的屬性,分別是:

x:矩形左上角的座標(使用者座標系)的x值。

y:矩形左上角的座標(使用者座標系)的y值。

width:矩形寬度。

height:矩形高度。

rx:實現圓角效果時,圓角沿x軸的半徑。

ry:實現圓角效果時,圓角沿y軸的半徑。

比如上面例子中,實現了圓角效果,你也可以通過設定rx,ry為不同的值實現橢圓角效果。

圓 - circle元素

這個元素的屬性很簡單,主要是定義圓心和半徑:

r:圓的半徑。

cx:圓心座標x值。

cy:圓心座標y值。

橢圓 - ellipse元素

這個是更加通用的圓形元素,你可以分別控制半長軸和半短軸的長度,來實現不同的橢圓,很容易想到,當兩個半軸相等時,就是正圓形了。

rx:半長軸(x半徑)。

ry:半短軸(y半徑)。

cx:圓心座標x值。

cy:圓心座標y值。

直線 - line元素

直線需要定義起點與終點即可:

x1:起點x座標。

y1:起點y座標。

x2:終點x座標。

y2:終點y座標。

折線 - polyline元素

折線主要是要定義每條線段的端點即可,所以只需要乙個點的集合作為引數:

points:一系列的用空格,逗號,換行符等分隔開的點。每個點必須有2個數字:x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成:"0 0, 1 1, 2 2"。

多邊形 - polygon元素

這個元素就是比polyline元素多做一步,把最後乙個點和第乙個點連起來,形成閉合圖形。引數是一樣的。

points:一系列的用空格,逗號,換行符等分隔開的點。每個點必須有2個數字:x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成:"0 0, 1 1, 2 2"。

路徑 - path元素

這個是最通用,最強力的元素了;使用這個元素你可以實現任何其他的圖形,不僅包括上面這些基本形狀,也可以實現像貝塞爾曲線那樣的複雜形狀;此外,使用path可以實現平滑的過渡線段,雖然也可以使用polyline來實現這種效果,但是需要提供的點很多,而且放大了效果也不好。這個元素控制位置和形狀的只有乙個引數:

d:一系列繪製指令和繪製引數(點)組合成。

繪製指令分為絕對座標指令和相對座標指令兩種,這兩種指令使用的字母是一樣的,就是大小寫不一樣,絕對指令使用大寫字母,座標也是絕對座標;相對指令使用對應的小寫字母,點的座標表示的都是偏移量。 

絕對座標繪製指令:

這組指令的引數代表的是絕對座標。假設當前畫筆所在的位置為(x0,y0),則下面的絕對座標指令代表的含義如下所示:

指令引數說明

mx y將畫筆移動到點(x,y)

lx y畫筆從當前的點繪製線段到點(x,y)

hx 畫筆從當前的點繪製水平線段到點(x,y0)

vy 畫筆從當前的點繪製豎直線段到點(x0,y)

arx ry x-axis-rotation large-arc-flag sweep-flag x y畫筆從當前的點繪製一段圓弧到點(x,y)

cx1 y1, x2 y2, x y畫筆從當前的點繪製一段三次貝塞爾曲線到點(x,y)

sx2 y2, x y 特殊版本的三次貝塞爾曲線(省略第乙個控制點)

qx1 y1, x y  繪製二次貝塞爾曲線到點(x,y)

tx y特殊版本的二次貝塞爾曲線(省略控制點)

z無引數繪製閉合圖形,如果d屬性不指定z命令,則繪製線段,而不是封閉圖形。

總結:移動畫筆指令m,畫直線指令:l,h,v,閉合指令z都比較簡單;下面重點看看繪製曲線的幾個指令。

模仿tmall 小貓咪的耳朵

前端菜雞養成中 小貓咪的耳朵 效果這樣 html id inner con id catalogtype id text 商品分類div div id normallist id firsta href 天貓超市 class hovericon div a href 天貓國際 class hover...

C OJ5 小貓咪快到碗裡來

知識改變命運,科技改變生活,用心成就自我。每日總結 資料結構 若某線性表最常見的操作是訪問任意指定序號的元素和在最後進行插入和刪除的運算,則利用 順序表 的儲存方式最節省時間 棧 是具有記憶功能的 迴圈兩列房子啊一維陣列a 0.m 1 中,end1指向隊頭元素,end2指向隊尾元素的後乙個位置。假設...

SVG 使用marker畫箭頭(一)

一 使用marker畫箭頭 1.定義乙個箭頭的marker引用 defs marker id markerarrow markerwidth 13 markerheight 13 refx 2 refy 6 orient auto path d m2,2 l2,11 l10,6 l2,2 style...