<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>矩形</title>
</head>
<body>
<!--
svg 可缩放矢量图形 Scalable Vector Graphics, 使用XML(Extensible Markup Language)格式定义图像
width
height
xmlns svg 命名空间 ns: namespace
-- 矩形 rect
-- 圆形 circle
-- 椭圆 ellipse
-- 直线 line
-- 多边形 polygon
-->
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect
width="300"
height="100"
style="
/*fill 填充*/
fill: green;
fill-opacity: 0.6;
/*stroke 矩形边框*/
stroke: black;
stroke-width: 10px;
stroke-opacity: 0.6;
opacity: 0.1"
x="10"
y="10"
rx="10"
ry="20">
<!-- x属性: 水平平移的距离浏览器窗口左侧的距离 -->
<!-- y属性: 水平平移的距离浏览器窗口顶端的距离 -->
<!-- rx属性: 矩形水平方向上的圆角半径 -->
<!-- ry属性: 矩形垂直方向上的圆角半径 -->
</rect>
</svg>
</body>
</html>上述运行结果：
扫一扫
1423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
