SVG常用元素和属性

 

---

SVG常用元素和属性

一、总体介绍

最佳参考教程：

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

SVG是基于XML语法的图像格式。D3.js 正是操作各种svg 元素，将他们拼接成一幅幅精美的图件

二、常用的SVG元素

1、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内的元素可以写到这里面或者append进入，比如line、rect
</svg>

2、直线：line 标签

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

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