教程参考：https://www.w3school.com.cn/svg/index.asp
备忘录，直接代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding:0;}
#d1{text-align: center;stroke-width:1;
stroke:rgb(0,0,0)} /* 让svg居中*/
svg{width: 1200px;height: 700px;border: 1px solid #ccc;margin: 50px 0;}
rect{
width:500px;height: 500px;
/*在这里border 和 background 是无效的*/
/*border: 1px solid #ccc; 边框要用 stroke来设置*/
/*background: #ffa; 背景填充色要用 fill*/
fill:#faf;
stroke-width:2;
stroke:#0a8ed3;
}
</style>
</head>
<body>
<!--svg中的样式大部分都可以当做其他元素一样，由CSS来定义样式，但也只是大部分，有些还是单独处理的，比如边框，背景色等-->
<div id="d1">
<svg>
<!--如果图形不设置坐标点，默认基本上都是0，单位默认是px-->
<!--矩形标签： rect-->
<!--从svg左上角水平30像素，垂直50像素的地方开始画 rx 和 ry 类似于border-radius,用来定于倒角 单位默认是px,另外 % 也是可以的，都定义为50% 就可以用rect直接画个圆了-->
<rect x="30" y="50" rx="5" ry="5" />
<!--圆形标签：circle-->
<!--cx，cy 圆形中间点的坐标位置， r 半径长度-->
<circle cx="100" cy="150" r="50" style="fill:#0f0;" />
<!--椭圆标签：ellipse-->
<!--这里的rx 指的是水平半径 ry 是垂直半径 不能跟倒角那个混淆了-->
<ellipse cx="500" cy="350" rx="100" ry="150" style="fill:#afa;"/>
<!--线条标签：line-->
<!--这个标签会有4个坐标值 x1：x轴开始位置 y1 ：y轴开始 x2：x轴结束 y2：y轴结束-->
<line x1="10" y1="10" x2="300" y2="300" style="stroke:#fea;stroke-width:2"/>
<!--折线标签：polyline-->
<!--说是折线，用起来更像是多边形的感觉，默认也是有黑的填充色，如果只是要单纯的折线效果，记得一定要背景色改成透明的-->
<!--从水平500 垂直600开始， 依次画到650,450 350,450 500,600-->
<polyline points="500,600 650,450 350,450 500,600" style="fill: transparent;stroke:red;stroke-width:2"/>
<!--多边形标签：polygon-->
<!--画个平行四边形： points坐标： 从xz轴710 50开始画，依次到850 50，800 200， 660,200，最后的坐标会自动跟第一个链接起来-->
<polygon points="710,50 850,50 800,200 660,200" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
<!--路径标签：path-->
<!--这个是标签中最复杂的一个，先画个例子，详细注释在下面，-->
<!--从750 350开始画，然后画到850 350，再到950 550， 800 500 Z闭合路径，用来把最后画的点和第一个点连接起来-->
<path d="M750 350 L850 350 L950 550 L800 500 Z" style="fill:#cccccc;" />
<!--下面的命令可用于路径数据：（用法类似于canvas的画线操作，默认会有黑色边框黑色填充）-->
<!--M = moveto-->
<!--L = lineto-->
<!--H = horizontal lineto-->
<!--V = vertical lineto-->
<!--C = curveto-->
<!--S = smooth curveto-->
<!--Q = quadratic Belzier curve-->
<!--T = smooth quadratic Belzier curveto-->
<!--A = elliptical Arc-->
<!--Z = closepath-->
<!--以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。-->
</svg>
</div>
</body>
</html>
扫一扫
3824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
