菜鳥創業記--第四天

    今天修改後的logo出來了,花了200大洋,這個姑娘人還不錯,挺好說話的,以後的設計就讓她來做了,上圖:

wKiom1SJlknB-mQlAAHd6hUCZ1k665.jpg

    昨天的標感覺太碎了,而且棱角比較重,我喜歡圓潤一些,讓美工輸出了很多顏色和大小,以便以後適用於各種環境。。。好啦,logo的事兒終於算是定下來了,接下來繼續研究svg,昨天看到橢圓了。

    <line>標籤:用來創建線條

    示例代碼:<line x1="200" y1="300" x2="300" y2="200" style="stroke:#66CC66;stroke-width:2"/>

    <line>屬性:x1=線條在x軸的開始,y1=線條在y軸的開始,這兩個座標定義了線條的開始位置。x2=線條在x軸的結束,y2=線條在y軸的結束,這兩個左邊定義了線條的結束位置。

 

    <polygon>標籤:用來創建不少於三個邊的圖形,也就是多邊形

    示例代碼:<polygon points="220,100 300,210 170,250 123,234" style="fill:#996666;"/>

    <polygon>屬性:points定義每個角的座標

 

    <polyline>標籤:用來創建僅包含直線的形狀

    示例代碼:<polyline points="10,10 10,30 30,30 30,40 40,40 40,60" style="fill:#fff;stroke:red;stroke-width:2" />

    <polyline>屬性:points定義每個點的座標,兩個點之間用直線連接

 

    <path>標籤:用來定義路徑

    示例代碼:<path d="M250 150 L150 350 L350 350 Z" style="stroke-width:2;stroke:red" />

    代碼解釋:定義了一條路徑,開始位置是250 150,到達位置是150 350,再從150 350開始,到達350 350,最後閉環在250 150

    <path>屬性:M=moveto(開始位置)

                           L=lineto(將畫筆移動到指定的座標位置)

                           H=horizontal lineto(畫水平線到指定的X座標位置)

                           V=vertical lineto(畫垂直線到指定的Y座標位置)

                           C=curevto(一個點影響曲線形狀,另一個點是曲線的終點,使用的是二次方貝塞爾曲線的標準公式,該公式可以計算出兩點之間的曲線,這條曲線向着控制點彎曲)

                           S=smooth curevto(平滑的曲線)

                           Q=quadratic Belzier curve(二次貝塞爾曲線)

                           A=elliptical Arc(弧線)

                           T=smooth quadratic Belzier curveto(映射)

                           Z=closepath(關閉路徑)

        

    <g>標籤:用於把相關元素進行組合的容器元素(感覺這個用得着)

 

    到此,svg的基本標籤已經認識完了,當然還有很多,用到再查吧!SVG的效果先不看了,我的目的是看懂基本圖形,下一步的任務就是要動態的畫出SVG圖,在這之前,我需要看看別的網站怎麼做的,因爲認識了SVG的基本標籤,所以別人的代碼也能看懂了。今天就到這裏,家裏實在冷,老爸啥時候回來啊!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章