这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

介绍

SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

下面就介绍下svg的标签

共有常用属性

在这里简单介绍下属于svg常用的一些属性。先能有个大概的记忆吧

公共属性	作用
fill	背景颜色
stroke	border边框颜色
stroke-width	border宽度
stroke-dasharray	strokedasharray属性用于创建虚线
viewBox	viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。前两个暂时用不到，个人理解除非要对内部svg做整体位移，否则一般都是0 0，暂时先不做解释，重点关注后两个参数。
尺寸介绍	在svg种默认是px,可以是英寸、厘米、%....

绘制圆

再svg中怎么画一个圆呢，看下面代码；

<!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>svg/cricle标签</title>
</head>
<body>
    <div>
        <!-- 
            cx)代表其中心点在x轴得位置 , 
            cy)是中心点在y轴的位置 ,
            r)是圆的半径的长度 
            在svg种默认是px,可以是英寸、厘米、%....
        -->
        <svg width="500px" height="200px">
            <circle cx='100' cy='50' r='50' fill='red' ></circle>
        </svg>

    </div>
</body>
</html>

应该可以在代码中看的出来咱们的svg标签都是要再 svg中包裹着咱们可以给svg标签设置一些基础的属性啊 width、height这些就是定义一个画布的大小先简单介绍下圆的属性：

私有属性	作用
cx	代表其中心点在x轴得位置
cy	代表其中心点在y轴得位置
r	圆的半径的长度

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

绘制矩形

<!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>rect/矩形</title>
</head>
<body>
    <!-- 
        x)矩形左上角水平位置
        y)矩形左上角垂直位置
        rx)圆角水平方向向上的曲率半径
        ry)圆角垂直方向向上的曲率半径
        viewBox的四个参数分别代表：最小X轴数值；最小y轴数值；宽度；高度。
        前两个暂时用不到，个人理解除非要对内部svg做整体位移，否则一般都是0 0，暂时先不做解释，重点关注后两个参数。
    -->
    <!-- <svg width='200' height='200'>
        <rect width='50' height='50' x='20' y='20' rx='10' ry='10'></rect>
    </svg> -->
    <svg width="1000" height="1000" ViewBox='0 0 2000 2000'>
        <rect width="200" height="200" x='50' y='50' cr='5' cy='5' fill='red'/>
        <!-- <rect width="20" height="80" x='45'/>
        <rect width="20" height="80" x='60'/>
        <rect width="20" height="80"  x='90'/> -->
      </svg>
</body>
</html>

私有属性	作用
x	矩形左上角水平位置
y	矩形左上角垂直位置
rx	圆角水平方向向上的曲率半径
ry	圆角垂直方向向上的曲率半径
width	矩形的宽
height	矩形的高

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

绘制多边形

<!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>polygon/多边形</title>
</head>
<body>
    <!-- ponits:'x y'-->
    <svg width='500' height='500'>
       <polygon points='100 0,50 50,150 50'></polygon>
       <polygon stroke-width="5" points="201,36.94882741579561 213.00285054289327,71.47949351864409 249.55255035071607,72.22432008871245 220.42102014028643,94.31027196451502 231.00712635723318,129.30126620338976 201,108.42046903368175 170.99287364276685,129.30126620338976 181.57897985971357,94.31027196451502 152.44744964928393,72.22432008871245 188.99714945710673,71.4794935186441 201,36.94882741579561 213.00285054289327,71.47949351864409 " strokeWidth="5" strokecolor="none" fill="#FF0000" orient="point" r2="20.42047" r="51.05117" point="5" shape="star" id="svg_2" cy="88" cx="201"/>
    </svg>
</body>
</html

私有属性	作用
points	其实就是每个点的位置用','隔开

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

绘制椭圆形

<!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>ellipse/椭圆</title>
</head>
<body>
    <svg width='500' height='500'>
        <ellipse cx='200' cy='105' rx='180' ry='100'></ellipse>
    </svg>
</body>
</html>

私有属性	作用
cx	中心点x轴的位置
cy	中心点y轴的位置
rx	圆角水平方向向上的曲率半径
ry	圆角垂直方向向上的曲率半径

效果：

在这里插入图片描述

绘制路径

<!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>Document</title>
</head>
<body>
    <!-- 复杂的path 建议用svg编辑器画图 -->
    <!-- 
        M = moveto  //   m 50 20   =》  以（50,20）位置为起始点
        L = lineto   // m 50 20 l 20 50 =》从（50,20）到（20,50）作直线
        H = horizontal lineto  //  m 50 20 h 50  =》 从（50,20）到（50,50）绘制一条平行线
        V = vertical lineto  //  m 50 20 v 50  =》 从（50,20）到（100,20）绘制一条垂直线
        C = curveto 
        S = smooth curveto
        Q = quadratic Bézier curve
        T = smooth quadratic Bézier curveto
        A = elliptical Arc
        Z = closepath // 结束路径，回到原点
        注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
        M 20 20是第一个起始点
        m 0 0相对于M 20 20
        m -320 0 相对于 m 0 0
        以此类推...
     -->
    <svg>
        <path d='M 0 50 q 50 -50 100 0 l -100 0'></path>
    </svg>
   
</body>
</html>

不介绍那么多path 的属性了个人绘制一些简单的path用到就 M、L 复杂点的path 其实咱们的ui可以给咱们画下注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位

私有属性	作用
M	移动的位置参数格式‘10，10’，就是 x:10,y：10的意思
L	画一条线参数格式 ‘10，10’

效果在这里插入图片描述

绘制线

<!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>line/线</title>
</head>
<body>
    <!-- 
     stroke-lincapstroke-linecap属性定义不同类型
     stroke-dasharray  虚线  stroke-dasharray='50 10 1 20 30 5'
     -->
    <svg width='1000' height='1000'>
        <line x1='10' y1='200' x2='200' y2='200'
       
        stroke-dasharray='2'
        stroke='blue' stroke-width='5' ></line>
        <!-- <line x1='200' y1='300' x2='400' y2='400' stroke='blue' stroke-width='5' stroke-lincap='round'></line>
        <line x1='500' y1='500' x2='600' y2='600' stroke='blue' stroke-width='5' stroke-lincap='square'></line> -->
    </svg>
</body>
</html>

注意：想要画出一根线必须给 stroke 设置颜色不然会显示不出来； stroke-width 指定线的粗细。默认：1

私有属性	作用
x0	开始x轴的位置
y0	开始y轴的位置
x1	结束x轴的位置
y1	结束y轴的位置

text文本

<!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>svg/text</title>
</head>
<body>
    <div>
        <svg width="500px" height="200px">
            <text x='10' y='20' > 
                Hello Word 
                <tspan x='10' y='40' fill='red'>Hello Word </tspan>
                <tspan x='10' y='60' fill='red'>Hello Word </tspan>
            </text>
            <!-- <text x='10' y='40' fill='red'> Hello Word </text> -->
        </svg>

    </div>
</body>
</html>

tsapn 是可以嵌套在text里面的这样可以让html显示出层级关系出来当然不用tspan也行，绘制多个text, 看个人爱好

效果：

在这里插入图片描述

为什么写这个文章呢？

本来是想直接分享d3js呢但是考虑到d3j是来操作 svg 如果你对svg没有个认识的话。可以先来看看这个文档；

说的不是很全，但是我觉着这些都是d3js常用的svg标签和属性了，当然还有很多svg我没有说到比如defs、g、filter、marker、这些会在d3js 分享中提到的

结束语

大家好，我是三原。我会继续保持学习总结的

你要知道的svg的常用标签属性

介绍

共有常用属性

绘制圆

绘制矩形

绘制多边形

绘制椭圆形

绘制路径

绘制线

text文本

结束语