数据结构
网络
关系数据库管理系统 (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+ 浏览量
广告