svg常用元素和属性

1. 介绍

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其可以直接被插入到网页 DOM 中，甚至作为CSS背景属性等，且无论放大多少倍，图像都不会失真。D3.js 正是操作各种svg 元素，将他们拼接成一幅幅精美的图件，因此了解常用的svg元素和属性是学习 D3.js 的必要条件。

2.常用的svg标签

<svg> 标签
svg 标签是顶层标签，所有 svg 标签和代码都必须放在<svg>标签中，width 和 height 属性可指定画布大小，xmlns 属性则是用于声明命名空间，防止来自不同技术的元素发生冲突。viewBox 则是指定视口位置和大小，其属性值由 4 个数字组成，分别是视口左上角的横坐标和纵坐标、视口的宽度和高度（svg 元素的左上角坐标默认为0, 0）

<svg width="100" height="100" viewBox="50 50 50 50" xmlns="http://www.w3.org/2000/svg">
  svg代码写在这里.....
</svg>

<line> 标签
line标签用于绘制一条直线，众所周知，一条直线由两个点确定，因此该标签具有 x1、y1、x2、y2 属性，分别表示线段起始点和终点的横纵坐标。

<line x1="0" y1="0" x2="100" y2="100" />

<rect> 标签
rect 标签则用于绘制一个矩形，其 x 和 y 属性分别指定了矩形左上角顶点的横纵坐标，而 width 和 height 属性则指定了矩形的宽度和高度。

<rect x="0" y="0" height="100" width="100" />

<polygon> 标签
polygon 标签用于绘制一个多边形（必须具备三个顶点或以上），其 points 属性指定了多边形每个顶点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间则用空格分隔。

<polygon points="0,0 100,0 100,100 0,100 0,0"/>

<circle> 标签
circle 标签用于绘制一个圆形，具有cx、cy和r属性，分别代表圆心的横纵坐标以及圆形的半径。

<circle cx="50"  cy="50" r="25" />

<ellipse> 标签
ellipse 标签用于绘制一个椭圆，具有cx、cy、rx和ry属性，分别代表圆心横纵坐标以及椭圆的横纵向轴半径

<ellipse cx="50" cy="50" ry="40" rx="20" />

<path> 标签
path 标签用于绘制路径，其是 svg 基本形状中最强大的一个，你可以用它创建线条，曲线，弧形，圆等各种形状，其具有 d 属性，用于指定一系列绘制的命令，命令后面接坐标。
常用命令包括：M（移动绘制点到某坐标）、L（绘制一条直线）、H（绘制一条水平线）、V（绘制一条竖线）、Q（绘制一条二次贝塞尔曲线）、C（绘制一条三次贝塞尔曲线）、Z（闭合）。以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

从坐标（150， 0）绘制一条直线到坐标（75，200），然后再从（75，200）绘制直线到坐标（225，200）
，最后闭合回到（150， 0）
<path d="M150 0 L75 200 L225 200 Z" />  

因此 path 标签最后呈现什么样子，完全取决于你的一系列命令，不同的形状绘图命令可以简单也可以很复杂，但是不用担心，D3.js 的内置的一些形状 API 能自动生成 path 标签，无需你手动书写 d 属性。

<text> 标签
顾名思义，text 标签用于绘制文本，其具有x、y、dx、dy 和 text-anchor属性，分别代表文本标签的的横纵坐标、文本水平方向和垂直方向的偏移量，以及文本的对齐方式

在坐标（100， 100）绘制一句文本，且文本对齐方式为居中对齐
<text x="100" y="100" text-anchor="middle">Hello World</text>

<g> 标签
g 标签用于将多个形状捆绑一个组（group），在 g 标签上定义的属性，会被其所有的子元素继承，添加到g元素上的变换也会应用到其所有的子元素上

将所有圆都充填为蓝色
 <g fill="blue">
   <circle cx="25" cy="25" r="20" id="1"/>
   <circle cx="50" cy="50" r="20" id="2"/>
 </g>

<image> 标签
image 标签用于插入图片，width 和 height 属性指定图片大小，xmlns:xlink属性指定图片 url

<image xlink:href="path/to/image.jpg" width="100" height="100"/>

以上就是 svg 最常用的几个标签，除此之外，svg 还具有 <defs>、<use>、<pattern>、<animate>等众多标签，但由于日常使用较少，到用的时候去查找就好了，在此就不每个都介绍了，有兴趣的同学请参考这里

3.svg标签常用属性

id 属性
svg 元素的唯一标识，与 html 元素类似

class 属性
svg 元素的 class 标识，常用于css样式设置，与 html 元素类似

stroke 属性
定义 svg 元素的描边颜色，例如线条、文本等描边颜色

stroke-width 属性
定义 svg 元素的描边宽度

stroke-opacity 属性
定义 svg 元素的描边透明度

fill 属性
定义 svg 元素的填充颜色

fill-opacity 属性
定义 svg 元素的填充透明度

transform 属性
定义 svg 元素的变换，包括移动、旋转、放缩等，与CSS类似，例如

将圆顺时针旋转30度，向左平移30，向下平移40，缩小成原来的0.5倍
<circle cx="25" cy="25" r="20" transform="rotate(30) translate(-30 40) scale(0.5)" />

以上就是 svg 元素最常用的几个属性，还有一些属性用的较少，等需要的时候再去查找就好了，而对于字体颜色、大小等是通过CSS样式设置的

---

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！