svg的基本使用

最新推荐文章于 2025-12-24 11:53:27 发布

原创最新推荐文章于 2025-12-24 11:53:27 发布 · 1.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#svg

很多数据大屏用svg，因为svg是矢量图，图形放大缩小不失真，对ie8以下不兼容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1500px;
            height: 800px;
        }
    </style>
</head>

<body>
    <!-- svg双闭合标签：默认宽度与高度300*150  svg绘制图形务必在svg标签内部使用绘制图形 -->
    <svg class="box">
        <!-- 绘制直线：  x1 y1 第一个点的坐标   x2 y2 第二个点的坐标 -->
        <line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="10"></line>
        <line x1="200" y1="100" x2="100" y2="200" stroke="red"></line>

        <!-- 绘制折线:可以多个点，多个点的时候，最好带有逗号   fill-opacity：代表填充颜色的透明度 stroke：线得颜色  -->
        <polyline points="300 300,300 50,450 250" fill-opacity="0" stroke="green"></polyline>

        <!--   ↓ 莫名打出了箭头  但是复现不了了  -->
        <!-- 绘制矩形：fill：填充颜色 -->
        <rect x="500" y="150" width="150" height="50" fill="pink"></rect>

        <!-- 绘制圆:圆心点坐标(cx,cy)  r:半径-->
        <circle cx='750' cy='150' r='50' style="stroke:cyan;fill:none"></circle>

        <!-- 绘制圆形(x轴和y轴半径相等)|椭圆：圆心点坐标(cx,cy)  rx：x轴半径  ry：y轴半径 -->
        <ellipse cx='950' cy='150' rx="100" ry="50" style="fill:blue"></ellipse>

        <!-- 绘制多边形 -->
        <polygon points="150 400,200 550,400 600" stroke="red" fill-opacity="0"></polygon>

        <!-- 绘制任意图形: M：移动到初始位置   L:画线  Z:将结束点和开始点闭合-->
        <path d="
M 300 400
L 500 500
L 560 480
L 650 350
L 520 680
L 700 600
Z

"></path>

    </svg>
</body>

</html>