資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML5 SVG 中繪製矩形？
SVG 是一種基於 XML 的標記語言，用於描述二維向量圖形。在視覺方面，SVG 本質上相當於 HTML 之於文字。
矩形透過 <rect> 元素繪製在螢幕上。矩形在螢幕上的位置和形狀由六個基本屬性決定。
語法
<rect x="x-axis co-ordinate" y="y-axis co-ordinate" width="length" height="length" rx="length" ry="length" style="style information" class="style class" > </rect>
屬性
X - 左上角的 x 座標。
Y - 左上角的 y 座標。
width - 矩形的寬度。
height - 矩形的高度。
rx - x 軸的圓角。
ry - y 軸的圓角。
style - 指示內聯樣式。
描述類的外部樣式。
示例 1
使用“svg <rect>”
在下面的示例中，我們使用 svg <rect> 來繪製一個矩形。
<!DOCTYPE html> <html> <body> <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0, 255, 255); stroke-width:6;stroke:rgb(255, 0, 0)" /> </svg> </body> </html>
執行上述指令碼後，它將生成一個輸出，其中包含一個在網頁上繪製的填充有十六進位制顏色的矩形。
示例 2
新增 x 和 y 屬性
在下面的示例中，我們使用帶有 x 和 y 屬性的 svg <rect> 元素。
<!DOCTYPE html> <html> <body> <svg width="400" height="800"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.4; stroke-opacity:0.9"/> </svg> </body> </html>
當指令碼執行時，它將生成一個輸出，其中包含一個填充為藍色的矩形，並帶有寬度和高度。
示例 3
新增 CSS opacity 屬性
在下面的示例中，我們使用帶有 css opacity 的 svg <rect> 元素。
<!DOCTYPE html> <html> <body> <svg width="450" height="250"> <rect x="55" y="25" width="155" height="160" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
執行上述指令碼後，它將生成一個輸出，其中包含一個在網頁上繪製的，填充為藍色且具有透明度的矩形。
示例 4
在 HTML5 SVG 中繪製矩形。
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 10%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>SVG</title> </head> <body> <h2>HTML5 SVG Rectangle</h2> <svg id="svgelem" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="200" height="100" fill="green"/> </svg> </body> </html>
當指令碼執行時，輸出視窗彈出，顯示在網頁上繪製的填充為綠色的矩形。
更新於: 2022年9月27日
2K+ 閱讀量
廣告