久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

SVG基礎 | 繪制SVG矩形

html5教程 html5模板網
一個rect元素代表一個矩形。通過這個元素你可以畫出不同寬度，不同高度，以及不同描邊和不同填充顏色的矩形。同時它還可以繪制直角或圓角的矩形。 ...，HTML5中國，中國最大的HTM
1.jpg

　　一個<rect>元素代表一個SVG矩形。通過這個元素你可以畫出不同寬度，不同高度，以及不同描邊和不同填充顏色的矩形。同時它還可以繪制直角或圓角的矩形。

　　一個SVG矩形的簡單例子

　　下面是一個繪制SVG矩形的簡單例子。
  1. <svg xmlns="http://www.w3.org/2000/svg">

  3.     <rect x="10" y="10" height="100" width="100"
  4.         style="stroke:#006600; fill: #00cc00"/>

  6. </svg>      
復制代碼

　　SVG矩形的位置由x和y屬性決定。請記住，這個位置是相對于任何它最接近的父元素的位置。

　　SVG矩形的尺寸由width和height屬性決定。

　　style屬性允許你為矩形設置附加的樣式，如描邊色，描邊寬度和填充色等。

　　下面的圖形是上面代碼的返回結果：

2.jpg

　　圓角矩形

　　我們也可以繪制圓角的SVG矩形。rx和ry屬性用于決定矩形圓角的大小。rx屬性決定圓角的寬度，ry屬性則決定圓角的高度。下面的例子中，三個矩形的圓角分別被設置為5像素、10像素和15像素，請注意觀察他們各自圓角的大小變化。
  1. <svg xmlns="http://www.w3.org/2000/svg">

  3.     <rect x="10" y="10" height="50" width="50"
  4.           rx="5" ry="5"
  5.           style="stroke:#006600; fill: #00cc00"/>
  6.     <rect x="70" y="10" height="50" width="50"
  7.           rx="10" ry="10"
  8.           style="stroke:#006600; fill: #00cc00"/>
  9.     <rect x="130" y="10" height="50" width="50"
  10.           rx="15" ry="15"
  11.           style="stroke:#006600; fill: #00cc00"/>
  12. </svg>   
復制代碼

　　上面的代碼的返回結果如下：

3.jpg

　　上面的例子中，三個圓角矩形的rx和ry值都是相同的。如果你單獨設置了rx的值，那么ry的值和rx相同。這是定義SVG圓角矩形的簡寫方式。

　　下面的兩個例子中，rx的值都設置為10像素，但是ry的值分別設置為5像素和15像素。這兩個例子展示了矩形圓角的寬度和高度不相同時的情況。
  1. <svg xmlns="http://www.w3.org/2000/svg">

  3.     <rect x="10" y="10" height="50" width="50"
  4.           rx="10" ry="5"
  5.           style="stroke:#006600; fill: #00cc00"/>
  6.     <rect x="130" y="10" height="50" width="50"
  7.           rx="10" ry="15"
  8.           style="stroke:#006600; fill: #00cc00"/>
  9. </svg>   
復制代碼

　　上面的代碼的返回結果如下：

4.jpg

　　描邊矩形

　　你可以使用stroke屬性來設置SVG矩形的邊框屬性。下面的例子設置矩形的邊框為綠色，邊框的寬度為3像素。
  1. <rect x="20" y="20" width="100" height="100"
  2.       style="stroke: #009900;
  3.              stroke-width: 3;
  4.              fill: none;
  5.       "
  6.       />      
復制代碼

　　上面的代碼的返回結果如下：

5.jpg

　　你還可以使用stroke-dasharray屬性將矩形的邊框設置為虛線。看下面的例子：
  1. <rect x="20" y="20" width="100" height="100"
  2.       style="stroke: #009900;
  3.              stroke-width: 3;
  4.              stroke-dasharray: 10 5;
  5.              fill: none;
  6.             "
  7.         />      
復制代碼

　　上面的代碼的返回結果如下：

6.jpg

　　填充矩形

　　你可以使用fill屬性來為SVG矩形填充顏色。例如將矩形的顏色填充為none。
  1. <rect x="20" y="20" width="100" height="100"
  2.       style="stroke: #009900;
  3.              fill: none;
  4.             "
  5.         />         
復制代碼

　　這時，SVG矩形的填充色將和瀏覽器的頁面顏色一樣。

7.jpg

　　你也可以選擇一種顏色來填充矩形。下面的例子將矩形填充為綠色。
  1. <rect x="20" y="20" width="100" height="100"
  2.       style="stroke: #009900;
  3.              fill: #33ff33;
  4.             "
  5.         />     
復制代碼
8.jpg
　　最后，你可以用fill-opacity屬性來設置填充矩形的透明度。下面的例子中，兩個句子部分疊加在一起，上面的矩形設置為50%的填充透明度。
  1. <rect x="20" y="20" width="100" height="100"
  2.       style="stroke: #009900;
  3.          fill: #33ff33;
  4.         "
  5.         />
  6. <rect x="50" y="50" width="100" height="100"
  7.       style="stroke: #000099;
  8.          fill: #3333ff;
  9.          fill-opacity: 0.5;
  10.         "
  11.         />            
復制代碼

　　上面的代碼的返回結果如下：

9.jpg

　　本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506031964.html


【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有：框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： 美女天堂在线 | 国产a区 | 久久精品免费一区二区 | 欧美一区二区三区在线 | 精品国产不卡一区二区三区 | 成人精品在线视频 | 欧美福利一区 | 久草视频2| 日韩成人中文字幕 | 久久亚洲一区二区三区四区 | 欧美成人不卡 | 国产精品久久久久久久久久 | 国产成在线观看免费视频 | 国产午夜精品一区二区三区 | 毛片久久久 | 久久久国产一区二区三区 | 色吧综合网| 性做久久久久久免费观看欧美 | 91佛爷在线观看 | 国产精品乱码一区二三区小蝌蚪 | 99国内精品久久久久久久 | 精品国产黄色片 | 在线播放精品视频 | 精品久久久久久久久久久 | 一区二区三区在线看 | 久久人人爽人人爽 | 国产综合久久 | 国产黄视频在线播放 | 国产精品久久久久一区二区三区 | 一区二区三区欧美 | 亚洲精品永久免费 | 国产福利在线免费观看 | 亚洲一区二区精品视频 | 中文字幕在线观看 | 国产视频不卡一区 | 色橹橹欧美在线观看视频高清 | 欧美a级成人淫片免费看 | 久草免费在线视频 | 国产区一区二区三区 | 在线中文视频 | 一二三四在线视频观看社区 |