用svg畫一片葉子

時間 2019-11-15

標籤 svg 一片葉子简体版

原文原文鏈接

圖1-用svg的path標籤在html文件中繪製的葉子的輪廓html

1. 繪製葉子的輪廓，就是畫兩個起止點相反的curve。svg的path是路徑繪製，字母M後面的是繪圖起點座標，字母C是curveto選項，其後三個座標分別是起始控制柄，終止控制柄，以及終點座標。（若是字母C改用小寫字母c，這些座標就變成相對座標了，好比c1 4 88 5 114 1這句中的座標，分別在前一個定位M1 100的基礎之上，再橫加1豎加4，橫加88豎加5，以及橫加114豎加1，因此用小寫字母c時也可寫負數的座標，畫出筆畫就會反方向。）葉子輪廓代碼是：svg

<html>
<svg width="20%" height="20%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M1 100 C1 4 88 5 114 1 C114 39 110 124 1 100" 
style="fill:white;stroke:#11aa42;stroke-width:1px"/>
</svg>
</html>

圖2-添加填充漸變效果的葉子url

2. 填充顏色。在path標籤前面使用defs標籤訂義一個直線漸變填充——linearGradient元素。其中x1，y1與x2，y2是漸變方向控制，本例爲從左向右上方填充。兩個stop標籤用來指定過渡使用的兩種顏色。定義好的漸變填充有個id，本身規定，這個例子中我起的id是leaf，關鍵在此，在畫好的path的style中添加這個id，看這一句fill:url(#leaf)，有了這句，才能創建defs標籤與path標籤的關聯。這是完整代碼：spa

<html>
<svg width="20%" height="20%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="leaf" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(24,215,68);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(115,220,0);stop-opacity:1"/>
</linearGradient>
</defs>

<path d="M1 100 C1 4 88 5 114 1 C114 39 110 124 1 100"
style="fill:url(#leaf);stroke:#11aa42;stroke-width:1px;"/>

<path d="M1 100 C17 68 90 45 114 1"
style="fill:transparent;stroke:#11aa42;stroke-width:1px;" />

</svg></html>

3.添加葉脈。看，第二段代碼多了一個path標籤，這就是葉脈，並且這個路徑繪製的style樣式，其fill值改成了transparent，這樣能夠在用stroke描邊後，使兩邊的漸變填充效果不被這個後繪製的路徑的填充效果蓋住。最終效果是這樣的：code

圖3-繪製葉脈完成xml

(svg的優勢是可縮放，圖3是在IE中放大顯示獲得的效果)htm

----------------------------------------------------------------------ci

參考資料：http://www.w3school.com.cn/svg/index.aspget