学习笔记,暂存后续修改和完善
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>
后续会根据具体需求完善和修改,暂存备忘。
个人主页:http://www.itit123.cn/ 更多干货等你来拿