SVG <rect>

目錄: 1、SVG 形狀; 2、<rect> 標簽; 3、代碼解釋：; 4、例子解釋：; 5、代碼解釋：; 6、代碼解釋：

SVG 有一些預定義的形狀元素，可被開發者使用和操作。

SVG 形狀

SVG 有一些預定義的形狀元素，可被開發者使用和操作：

矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>

下面的章節會為您講解這些元素，首先從矩形元素開始。

<rect> 標簽

<rect> 標簽可用來創建矩形，以及矩形的變種。

要理解它的工作原理，請把這些代碼拷貝到記事本，然后保存為 "rect1.svg" 文件。把此文件放入web目錄中：

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" >代碼解釋：
rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
style 屬性用來定義 CSS 屬性
CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）
CSS 的 stroke-width 屬性定義矩形邊框的寬度
CSS 的 stroke 屬性定義矩形邊框的顏色
查看此例
讓我們看一下另一個包含新屬性的例子：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250" >例子解釋：
x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器窗口左側的距離是 0px）
y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器窗口頂端的距離是 0px）
CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）
CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）
查看例子
為整個元素定義透明度：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="250" height="250" >代碼解釋：
CSS 的 opacity 屬性定義整個元素的透明值（合法的范圍是：0 - 1）
查看例子
最后的例子，創建帶有圓角的矩形：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250" height="100" >代碼解釋：
rx 和 ry 屬性可使矩形產生圓角。
查看例子