SVG
SVG 是啥 意为可缩放矢量图形(Scalable Vector Graphics)。
<?xml version="1.0" standalone="no"?>
standalone 属性!该属性规定此 SVG 文件是否是“独立的”,或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C,含有所有允许的 SVG 元素。
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
,包括开启标签 <svg> 和关闭标签 </svg> 。
version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
</svg>
申明方式
<embed src="circle1.svg" type="image/svg+xml" />
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
直线
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
多边形 指定点 边框
<svg height="210" width="500"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/> </svg>
园 椭圆 指定中心点 ,半径 ,边框
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/> </svg>
线段 ,指定点 ,粗细
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> </svg>
路径 <path>
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
<path d="M150 0 L75 200 L225 200 Z" />
文本 <text>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg>
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
更炫酷的特效, 路径 ,模糊,阴影 ,渐变,放射性(线性,非线性) , 看文档 SVG 参考手册 | 菜鸟教程 (runoob.com) ,
在线编辑器,,画图后直接看源码SVG 在线编辑器 | 菜鸟工具 (runoob.com)