数据可视化之svg

最新推荐文章于 2024-05-23 10:00:51 发布

予倾

最新推荐文章于 2024-05-23 10:00:51 发布

阅读量589

点赞数

分类专栏：配置文章标签： css javascript css3

本文链接：https://blog.csdn.net/QZ9420/article/details/122300643

版权

配置专栏收录该内容

18 篇文章 1 订阅

订阅专栏

基本的SVG元素：

<svg> 包裹并定义整个矢量图。
<line> 创建一条直线
<polyline> 创建折线
<rect> 创建矩形
<circle> 创建圆
<ellipse> 创建圆和椭圆
<polygon> 创建多边形
<path> 通过指定点以及点和点之间的线来创建任意形状
代码：

<!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>
        .box {
            margin: 0;
            padding: 0;
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <!-- svg双闭合标签：默认宽度与高度 300 * 150 svg在绘制图形时务必在标签内绘制图形 -->
    <svg class="box">
        <!-- x1 y1 第一个点的坐标，x2 y2 第二个点的坐标 stroke绘制线段并且指定颜色 -->
        <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
        <line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
        <!-- 绘制折线：可以多个点，多个点的时候最好带有逗号 -->
        <polyline points="300 300, 50, 100, 120 400, 100 20" fill-opacity="0" stroke="cyan"></polyline>
        <!-- 绘制矩形 -->
        <!-- fill 属性：设置填充颜色的 fill-opacity 设置填充颜色的透明度 -->
        <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
        <!-- 绘制圆形 -->
        <!-- cx x坐标 cy y坐标，r 半径 -->
        <circle cx="370" cy="95" r="50" style="fill: none; stroke: cyan"></circle>
        <!-- 绘制圆形|椭圆 -->
        <!-- cx x坐标 cy y坐标，rx x轴半径 ry y轴半径 -->
        <ellipse cx="500" cy="500" rx="100" ry="50" style="fill: none; stroke: blue"></ellipse>
        <!-- 多边行 -->
        <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"></polygon>
        <!-- 绘制任意图形 -->
        <!-- d 路径 M 开始点 L连接点 Z结束点 -->
        <path stroke="orange" fill-opacity="0"
            d="
                M 10 10
                L 20 400
                L 30 120
                L 40 59
                L 23 540
                L 56 111
                L 349 234
                z 10 10
            "
        ></path>
    </svg>
</body>
</html>
<script>

</script>

效果图
在这里插入图片描述

予倾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据可视化之svg

基本的SVG元素：<svg> 包裹并定义整个矢量图。<line> 创建一条直线<polyline> 创建折线<rect> 创建矩形<circle> 创建圆<ellipse> 创建圆和椭圆<polygon> 创建多边形<path> 通过指定点以及点和点之间的线来创建任意形状代码：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫