1 SVG 画图形

最新推荐文章于 2023-06-30 10:37:56 发布

Sukla

最新推荐文章于 2023-06-30 10:37:56 发布

阅读量291

点赞数

分类专栏： SVG绘图

本文链接：https://blog.csdn.net/sukla/article/details/79619590

版权

SVG绘图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1，画矩形，也就是长方形

效果

代码

<!--Created by Sukla on 2018/3/19.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>rect 实例</title>
    <meta charset="utf-8">
</head>
<body>
<!--准备一块500*500的画布-->
<svg width="500" height="500">
    <!--画布的左上角是原点 0 0，从20 20 开始画一个100*100的矩形 fill填充rgb(200,200,200)颜色 边框stroke颜色为 rgb(255,0,0)-->
    <rect x="20" y="20" width="100" height="100" style="fill:rga(200,200,200);stroke:rgb(255,0,0)"></rect>
</svg>
</body>
</html>

2，画一个圆

效果

代码

<!--Created by Sukla on 2018/3/19.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>circle 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以100 100 为圆心 50为半径 画一个圆-->
    <circle cx="100" cy="100" r="50" style="fill:rgb(200,200,200);stroke:rgb(0,0,0)"></circle>
</svg>
</body>
</html>

3，画一个椭圆

效果

代码

<!--Created by Sukla on 2018/3/19.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>ellipse 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以100 100为中心点 100为横向半径 80为纵向半径 画一个椭圆-->
    <ellipse cx="100" cy="100" rx="100" ry="80" style="fill:rgb(200,200,200);stroke:rgb(0,0,0)"></ellipse>
</svg>
</body>
</html>

4，画一条直线

效果

代码

<!--Created by Sukla on 2018/3/19.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>line 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以40 40为起点 140 100 为终点作一条直线 -->
    <line x1="40" y1="40" x2="140" y2="100" style="stroke:rgb(99,99,99)"></line>
</svg>
</body>
</html>

5，画一个多边形

效果

代码

<!--Created by Sukla on 2018/3/19.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>polyGon 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以40 40 为起点 用直线依次连接 60 90，180 250，10 101，然后回到40 40，构成一个多边形-->
    <polygon points="40 40,60 90,180 250,10 101" style="stroke:#000000;fill:#cccccc"></polygon>
</svg>
</body>
</html>

6，画一条折线

效果

代码

<!--Created by Sukla on 2018/3/19.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>polyline 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以40 40 为起点，依次用直线连接60 90，180 250，10 101，不闭合，形成一条折线-->
    <polyline points="40 40,60 90,180 250,10 101" style="fill:rgb(255,200,200);stroke:rgb(0,0,0)"></polyline>
</svg>
</body>
</html>

7，按照直线画路径

效果

代码

<!--Created by Sukla on 2018/3/19.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>path_h_v 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以40 40为起点 作一条 L直线到220 40，保持V 横坐标不变 纵坐标变为220，再保持H纵坐标不变 横坐标变为40-->
    <path d="M40 40 L 220 40 V 220 H 40 Z" style="stroke:rgb(0,0,0)"/>
</svg>
</body>
</html>

8，用弧线画路径

效果

代码

<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>path_a 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
        <!--以40 40为起点，画一条 A弧线 弧线的横向半径为45 纵向半径为45 弧形角度小于180° 按照逆时针方向开始画 一直画到125 125-->
    <path d="M40 40 A 45 45, 0, 0, 0, 125 125" style="stroke:rgb(0,0,0)"></path>
</svg>
</body>
</html>

9，用二次贝塞尔曲线画路径

效果

代码

<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>path_q_t 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以40 40为起点画一个 Q二次贝塞尔曲线 95 10是控制点 180 80是终点 T二次贝塞尔曲线的延长点-->
    <path d="M40 40 Q 95 10 180 80 T 290 180" style="stroke:#000;fill:none"></path>
</svg>
</body>
</html>

10，用三次贝塞尔曲线画路径

效果

代码

<!--Created by Sukla on 2018/3/20.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>path_c_s 实例</title>
    <meta charset="utf-8">
</head>
<body>
<svg width="500" height="500">
    <!--以40 40为起点，画一条 C三次贝塞尔曲线 第一个控制点是90 10 第二个控制点是180 280 终点是300 300 延长控制点是330 20-->
    <path d="M40 40 C 90 10 180 280 300 300 S 330 20" style="stroke:#000"></path>
</svg>
</body>
</html>