svg的基本使用

最新推荐文章于 2024-07-31 16:50:09 发布

zjp567

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量102

点赞数

分类专栏：前端笔记文章标签： svg 数据可视化

本文链接：https://blog.csdn.net/zjp567/article/details/122804866

版权

前端笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <svg class="box">
        <!-- 线段 -->
        <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
        <!-- 折线 -->
        <polyline points="300 300,40 100,300 200" fill-opacity="0" stroke="cyan"></polyline>
        <!-- 矩形 -->
        <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
        <!-- 圆形 -->
        <circle cx="370" cy="95" r="50" style="stroke:black;fill:none"></circle>
        <!-- 圆形|椭圆形 -->
        <ellipse cx="400" cy="400" rx="100" ry="200" style="stroke: black;fill:none"></ellipse>
        <!-- 多边形 -->
        <polygon points="600 100,300 400,750 100" stroke="red"></polygon>
        <!-- 任意 -->
        <path></path>
    </svg>
</body>
</html>