【前端数据可视化】svg 基础指令

SVG

SVG是一种基于 XML 的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形

　　基本的 SVG 元素

你可以深入 SVG 复杂的细节，但这对我们即将创建的图标不是必须的。以下列表涵盖了我们将用到的构建块。

  • <svg> 包裹并定义整个矢量图。<svg> 标签之于矢量图就如同 <html> 标签之于一个 web 页面。

  • <line> 创建一条直线。

  • <polyline> 创建折线。

  • <rect> 创建矩形。

  • <circle> 创建圆。

  • <ellipse> 创建圆和椭圆。

  • <polygon> 创建多边形。

  • <path> 通过指定点以及点和点之间的线来创建任意形状。

　　详细使用

所有标签都要包裹在 <svg> 中使用

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 800px;
            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"></line>
        <line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
        <!-- 绘制折线:可以多个点，多个点的时候，最好带有逗号 -->
        <polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>
        <!-- 绘制矩形 -->
        <!-- fill属性：设置填充颜色的  fill-opacity设置填充颜色的透明度  stroke：线的颜色 -->
        <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
        <!-- 绘制圆形 -->
        <circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
        <!-- 绘制圆形|椭圆 -->
        <ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black;"></ellipse>
        <!-- 多边行 -->
        <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0" />
        <!-- 绘制任意图形 -->
        <path fill-opacity="0" stroke="skyblue" d="
        M 10  10
        L 20 400
        L 30 120
        L 40 66
        L 50 99
        L 60 120
        L 70 99
        Z
        "></path>
    </svg>
</body>
</html>
svg基础使用代码

 

  1. <line>
<!-- 
  x1 y1 是第一个点坐标
  x2 y2 是第二个点坐标
 -->
<line x1="" y1="" x2="" y2=""></line>

　　

  1. <polyline>
<!-- 
  依次传入点坐标，即可绘制
 -->
<polyline points="
  x1 y1
  x2 y2
  x3 y3
  ...
"></polyline>
<!-- 你也可以把上面的代码写成： -->
<polyline points="x1 y1, x2 y2, x3 y3"></polyline>
<!-- 或 -->
<polyline points="x1 y1 x2 y2 x3 y3"></polyline>

　　

  1. <rect>
<!-- 
  x y 左上角点坐标
  width 宽度
  height 高度
 -->
<rect x="" y="" width="" height=""></rect>

　　

  1. <circle>
<!--  
  cx cy 圆心点坐标
  r 半径
  style 样式
-->
<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>

　　

  1. <ellipse>
<!-- 
  cx cy 圆心点坐标
  rx x轴半径
  ry y轴半径
 -->
<ellipse cx="" cy="" rx="" ry="" style="fill:black;"></ellipse>

　　

  1. <polygon>
<polygon points="x1 y1, x2 y2, x3 y3" />

　　

  1. <path>
<!--
  M 移动到初始位置
  L 画线
  Z 将结束和开始点闭合
-->
<path d="
  M x1 y1
  L x2 y2
  L x3 y3
  L x4 y4
  L x5 y5
  L x6 y6
  L x7 y7
  Z
"></path>

　　

　　起始文件

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      background: #e9e9e9;
    }

    body {
      margin: 0;
      text-align: center;
    }

    .grid {
      width: 750px;
      height: 500px;
      margin: 0 auto;
      padding-top: 100px;
      padding-left: 100px;
      background-image: url('grid.png');
      position: relative;
    }

    .grid::before {
      content: "";
      border-left: 1px solid #7c7cea;
      position: absolute;
      top: 0;
      left: 100px;
      width: 750px;
      height: 600px;
    }

    .grid::after {
      content: "";
      border-top: 1px solid #7c7cea;
      position: absolute;
      top: 100px;
      left: 0;
      width: 850px;
      height: 500px;
    }

    svg {
      stroke: #000;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
  </style>
</head>

<body>

  <div class="grid">

  </div>

</body>

</html>
起始文件

 

posted @ 2022-03-14 11:16  wanglei1900  阅读(237)  评论(0)  编辑  收藏  举报