今日学习SVG_svg 500参数-优快云博客

SVG是一种用于网络的可伸缩矢量图形标准，其特点是图形质量在放大时不会损失。SVG图像可以通过文本编辑器创建和修改，并且支持搜索、索引和脚本操作。SVG的优势包括可伸缩性、高质量打印和放大不失真。文章通过实例展示了如何用SVG绘制矩形、圆形和直线等基本图形，以及如何使用XML格式定义这些图形。

SVG指可伸缩矢量图形

SVG用于定义用于网络的基于矢量的图形

SVG使用XML格式定义图形

SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG是万维网联盟的标准

SVG图像可通过文本编辑器来创建和修改

SVG图像可被搜索、索引、脚本话或压缩

SVG是可伸缩的

SVG图像可在任何的分辨率下被高质量地打印

SVG可在图像质量不下降的情况下被放大

使用rect标签，主要属性：

x/y：绘图位置

width/height：矩形的长宽

fill：填充颜色，默认黑色

stroke：描边的颜色

stroke-width：描边的宽度

rx/ry：圆角

如下：

代码：

<svg width="500" height="500">
	<rect x="30" y="30" width="300" height="200" fill="red" stroke="green" stroke-width="5" rx="10"></rect>
</svg>

使用circle标签

cx/cy：圆绘制的位置，圆心

r：圆的半径

如下：

代码：

<svg width="500" height="500">
	<circle cx="250" cy="250" r="80" fill="red" stroke="green" stroke-width="5"></circle>
</svg>

使用line标签

x1/y1：起始点

x2/y2：结束点

如下：

代码：

<svg width="500" height="500">
    <line x1="10" y1="10" x2="200" y2="200" stroke="red"></line>
</svg>

折线：

points：设置折线的点

fill：是否填充，默认填充

如下：

代码：

<svg width="500" height="500">
	<polyline points="50 50 400 360 350 40" stroke="red" fill="none"></polyline>
</svg>