您的位置：首页 > Web前端 > HTML5

html5svg简介

2016-01-12 22:31 746 查看

学习笔记，暂存后续修改和完善

svg简单了解，用的不是很多。

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>svg简介</title>
	</head>
	<body>
		<!--html 导入svg文件-->
		<embed src="svg-demo.svg" width="300" height="160" type="image/svg+xml"
			pluginspage="http://www.adobe.com/svg/viewer/install/" />
			
		<!--html5 直接嵌入svg文件-->
		<label> 1. 矩形 </label>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
			<rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:darkgreen;stroke-width:4;
				fill-opacity:0.1;stroke-opacity:0.8"/>
		</svg>
			
		<label>2. 圆形</label>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
			<circle cx="100" cy="100" r="50" stroke="blue" stroke-width="4" fill="#359E21"/>
		</svg>
		
		<label>3. 线条</label>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
			<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
		</svg>
		
		<label>4. 多边形</label>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
			<polygon points="220,100 ,300,210 ,170,250" style="fill:#ccc; stroke:#000;stroke-width:1"/>
		</svg>
		
		<section>
			<hgroup>
				<h2>svg简介</h2>
				<h3>SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。其图像在缩放或改变尺寸的情况下质量不会有所损失</h3>
			</hgroup>
			<article>
				<p> 1. standalone 属性规定此 SVG 文件是否是“独立”，或含有对外部文件的引用。
					standalone="no" 意味着 SVG 文档是引用一个外部文件。</p>
				<p>2. 引用了这个外部的 SVG DTD。</p>
				<p>3. SVG 代码以 svg 元素开始 。width 和 height 设置 SVG 文档的宽度和高度。version定义 SVG 版本，xmlns 属性可定义 SVG 命名空间。</p>
				<p>4. SVG 的 circle rect line polygon 用来创建一个圆 矩形 线 多边形。</p>
				<p>5. stroke 和 stroke-width 属性控制如何显示形状的轮廓。</p>
				<p>6. fill 属性设置形状内的颜色。</p>
			</article>
		</section>
	</body>
</html>

svg文件：

<?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">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<circle cx="100" cy="50" r="50" stroke="black" stroke-width="2" fill="#333"/>
</svg>

后续会根据具体需求完善和修改，暂存备忘。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航