第一章SVG（1）

最新推荐文章于 2024-03-06 15:25:29 发布

雯雯Didi

最新推荐文章于 2024-03-06 15:25:29 发布

阅读量170

点赞数

文章标签： d3.js svg

本文链接：https://blog.csdn.net/weixin_44876084/article/details/118929726

版权

本文深入介绍了SVG（可伸缩矢量图形）的基本概念，包括其作为矢量图的优势，如放大不失真和与JavaScript的无缝集成。SVG图像由一系列元素构成，如矩形、圆形、椭圆和线等。通过示例代码展示了如何创建矩形、圆形和椭圆，并强调了SVG在动态图形和交互式地图等应用场景中的潜力。

摘要由CSDN通过智能技术生成

什么是SVG

SVG指可伸缩矢量图形（Scalable Vector Graphics）
SVG用来定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG是万维网联盟的标准
SVG与诸如DOM和XSL之类的W3C标准是一个整体

位图与矢量图

位图是有一系列像素组成。
矢量图有一系列“数学元素”定义，如矩形、圆、椭圆、多边形、直线、任意曲线等

SVG优点

图像文件可读，易于修改和编辑，与现有技术可以互动融合，能与javascript无缝结合使用。SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。
SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。

图像元素

svg代码以< svg >元素开始。包括开启标签< svg >和关闭标签< /svg >。这是根元素，width和height的属性可设置此SVG文档的宽度和高度，version属性可定义所使用的SVG版本。xmlns属性可以定义SVG命名空间。

矩形< rect >
圆形< circle >
椭圆< ellipse >
线< line >
折线< polyline >
多边形< polygon >
路径< path >

矩形

x：矩形左上角x坐标
y：矩形左上角y坐标
width：宽
height：高
rx：对于圆角矩形，指定椭圆在x方向的半径
ry：对于圆角矩形，指定椭圆在y方向的半径

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<title>矩形</title>
		<style>
		*{margin: 0; padding: 0;}
		</style>
	</head>
	<body>
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
		
		<rect x="20" y="20" width="200" height="100" style="fill: indianred; stroke: black; stroke-width: 4; opacity: 0.5;"></rect>
		<rect x="20" y="20" width="200" height="100" rx="20" ry="30" style="fill: indianred; stroke: black; stroke-width: 4; opacity: 0.5;"></rect>
		
		</svg>
	</body>
</html>

圆形

cx：圆心x坐标
cy：圆心y坐标
r：圆半径

<circle cx = "400" cy="400" r="70" style="fill: #17A2B8; stroke: palegoldenrod;stroke-width: 2;opacity: 0.5;"></circle>

在这里插入图片描述

椭圆形

cx：圆心x坐标
cy：圆心y坐标
rx：椭圆的水平半径
ry：椭圆的垂直半径

<ellipse cx = "400" cy="400" rx="70" ry="40" style="fill: lightpink; stroke: palegoldenrod;stroke-width: 4;opacity: 0.5;"></ellipse>

在这里插入图片描述

线

x1：起点x位置
y1：起点y位置
x2：终点x位置
y2：终点y位置

<line cx = "20" cy="40" x2="70" y2="130" style="stroke: blueviolet;stroke-width: 4;opacity: 0.5;"></line>