svg 画圆画椭圆画直线画折线

原创已于 2022-07-18 20:03:09 修改 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

于 2022-07-16 16:27:07 首次发布

本文介绍了SVG（可缩放矢量图形）的基本元素，包括矩形、圆形、椭圆、直线和折线的绘制，并展示了如何使用animate标签实现图形的动态变化，如圆的半径和填充颜色的动画效果。同时提到了SVG元素可以通过id进行引用，以及动画的控制属性如repeatCount和begin。

svg
rect x,y位置 width宽 height高 fill颜色 fill-opacity="0.3" stroke-opacity=“0.3” 透明度 stroke边框颜色 steoke-width="3" 边框的粗细 rx="50" ry ="100" 垂直的圆

画圆：
circle cx cy 坐标 r半径
画椭圆
ellipse cx,cy坐标 rx,ry 半径
画直线
line x1,y1起点 x2,y2终点 stroke颜色
画折线
polyline points=" 0,0,0,100,50,100"
polygon 闭合多边形

svg width height

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<svg width="1000" height="1000">
			<circle cx="200" cy="200" r="5" stroke="red" fill="none">
				<animate attributeName="r" attributeType="XML" from="5" to="100" dur="2"></animate>
				<animate attributeName="fill" attributeType="XML" from="red" to="black" dur="2" fill="red"></animate>
			</circle>
		</svg>
	</body>
</html>