資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML5 SVG中繪製矩形？
SVG是一種基於XML的標記語言，用於描述二維向量圖形。在視覺方面，SVG之於影像，如同HTML之於文字。
矩形透過`
語法
<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+ 瀏覽量
廣告