<divid"content\_views"class"markdown\_viewsprismatomonedark"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelineca

<divid"content\_views"class"markdown\_viewsprismdracula"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"rou

特点矢量图属性:形状的参数(都没有单位)添加事件跟html一样修改样式跟html一样属性操作:setAttribute/getAttribute图形<svgwidth"800"height"800"</svg<linex1y1x2y2</l

<divid"content\_views"class"markdown\_viewsprismgithubgist"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap

在开始学习如何绘图之前，我们先来看一下SVG的坐标系统。与很多计算机绘图所使用的坐标系统一样，SVG也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。数学中的坐标是由x轴（水平横向延伸）和y轴（垂直纵向延伸）交织组成，交点被称为坐标原点(0,0)。原点沿x轴向右为正值，反之为负值，沿y轴向上

特点矢量图属性:形状的参数(都没有单位)添加事件跟html一样修改样式跟html一样属性操作:setAttribute/getAttribute图形<svgwidth"800"height"800"</svg<linex1y1x2y2</l

在开始学习如何绘图之前，我们先来看一下SVG的坐标系统。与很多计算机绘图所使用的坐标系统一样，SVG也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。数学中的坐标是由x轴（水平横向延伸）和y轴（垂直纵向延伸）交织组成，交点被称为坐标原点(0,0)。原点沿x轴向右为正值，反之为负值，沿y轴向上

本节我们来学习如何在SVG中绘制椭圆，椭圆和圆形有点像，但是又不一样。圆形只有一个半径，而椭圆x轴和y轴上的半径不同，所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时，可以通过cx和cy属性确定椭圆的圆心，rx设置椭圆的x轴的半径，ry设置y轴的半径。

主要代码：代码详见GitHub：https://github.com/toly1994328/svgnight：(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2Ftoly1994328%2Fsvgnight)!9414344fe146c

主要代码：代码详见GitHub：https://github.com/toly1994328/svgnight：(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2Ftoly1994328%2Fsvgnight)!9414344fe146c