Svg快速入门

• svg绘制的图形是矢量图
• 矢量图：由数学公式绘制成图形
• 使用 XML 格式定义图形
• 图像在放大或改变尺寸的情况下其图形质量不会有所损失

html中的svg

• svg 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。
• svg的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

<embed>标签

• 优势：所有主要浏览器都支持，并允许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

<embed src="circle1.svg" type="image/svg+xml" />

<object>标签

• 优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
• 缺点：不允许使用脚本。

<object data="circle1.svg" type="image/svg+xml"></object>

<iframe>标签

• 优势：所有主要浏览器都支持，并允许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

<iframe data="circle1.svg" type="image/svg+xml"></iframe>

直接嵌入到HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

直接链接到SVG

用 <a> 标签链接到一个 SVG 文件

<a href="circle1.svg">查看 SVG 文件</a>

矩形

<rect> 标签用来创建矩形

		<!-- 宽1000 高600 svg画布 -->
		<svg width="1000" height="600">
			<!-- 
                        x 属性定义矩形的左侧位置;
                        y 属性定义矩形的顶端位置;
                        width 和 height 属性可定义矩形的高度和宽度;
                        style 属性用来定义 CSS 属性;
                        fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）;
                         stroke-width 属性定义矩形边框的宽度;
                         stroke 属性定义矩形边框的颜色;
                         rx 和 ry 属性可使矩形产生圆角;
                           -->
			<rect
				x="100"
				y="100"
				width="300"
				height="200"
				rx="20"
				ry="20"
				style="fill: chartreuse; stroke: coral"
			></rect>
		</svg>

圆形

<circle> 标签用来创建一个圆

• cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
• r属性定义圆的半径

		<!-- 宽1000 高600 svg画布 -->
		<svg width="1000" height="600">
			<circle
				cx="100"
				cy="50"
				r="40"
				stroke="black"
				stroke-width="2"
				fill="red"
			/>
		</svg>

圆形

<ellipse> 标签用来创建一个椭圆

椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的

• CX属性定义的椭圆中心的x坐标
• CY属性定义的椭圆中心的y坐标
• RX属性定义的水平半径
• RY属性定义的垂直半径

		<!-- 宽1000 高600 svg画布 -->
		<svg width="1000" height="600">
			<ellipse
				cx="200"
				cy="200"
				rx="80"
				ry="40"
				style="fill: seagreen"
			></ellipse>
		</svg>

直线

<line> 标签用来创建一个直线

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

		<!-- 宽1000 高600 svg画布 -->
		<svg width="1000" height="600">
			<line
				x1="100"
				y1="40"
				x2="500"
				y2="60"
				style="stroke: #333; stroke-width: 4"
			></line>
		</svg>

多边形

<polygon> 标签用来创建含有不少于三个边的图形

多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）

• points属性定义多边形每个角的 x 和 y 坐标

		<!-- 宽1000 高600 svg画布 -->
		<svg width="1000" height="600">
			<polygon
				points="200, 40,500,30,100,400"
				style="fill: lightblue; stroke-width: 2; stroke: red"
				transform="translate(100, 100)"
			></polygon>
		</svg>

文本

<text> 元素用于定义文本。

• textLength定义文本长度

		<!-- 宽1000 高600 svg画布 -->
		<svg width="1000" height="600">
			<text
				x="200"
				y="200"
				style="fill: orange; font-size: 40"
				textLength="360"
			>
				我的功能很强大哦
			</text>
		</svg>

等等。Svg还有很多功能等你探索哦。