SVG —— 基于XML语法的可缩放矢量图形
SVGScalable Vector Graphics
可缩放的矢量图形，基于XML语法的可缩放矢量图形
JPG PNG canvas的图片都是位图，放大后会出现锯齿状
比如，百度地图就类似于矢量图，放大后不失真
SVG的应用场景
地图图表
SVG的使用方式<img>标记
<img src="SVG文件的URL地址">
CSS中的background-image属性
seletor{background-image:url(SVG文件URL地址)}
案例(1)：使用方法和普通的jpg png一样
01_image.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#header {background: #333;padding: 15px 0;}#header img {display: block;width: 150px;height: 90px;margin: 0 auto;}</style></head><body><div id="header"><img src="images/logo.svg" alt="" /></div></body></html>
案例(2):
02_background.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {background-image: url("images/background.svg");background-size: cover;}</style></head><body><p>中华人民共和国</p><p>中华人民共和国</p><p>中华人民共和国</p></body></html>
<object>标记 表示从外部引入一个资源
<object type="MIME类型" data="SVG文件的URL地址">浏览器不支持文件格式时显示的提示信息</object>
案例(3):03_object.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><objectwidth="150"height="150"data="images/svglogo.svg"type="image/svg+xml"></object></body></html>
SVG文件的MIME类型为：image/svg+xml
<embed>标记
外部嵌套 – 现在是弃用状态
<embed width="宽度" height="高度" src="SVG文件URL地址" type="MIME类型">浏览器不支持文件格式时显示的提示信息</embed>
案例(4):04_embed.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><embed src="images/pear.svg" type="image/svg+xml"></embed></body></html>
<ifame>标记
<ifame src="SVG文件URL地址" width="宽度" height="高度scrolling="yea|no" frameborder="0|1"></ifame>
案例(5):05_iframe.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><iframesrc="images/lowdetail.svg"width="400"height="450"scrolling="no"//不要滚动条frameborder="0"//不要框></iframe></body></html>
<SVG>标记
<svg version="1.1" xmlns="/2000/svg"width="" height="">...</svg>
version代表版本号，目前只能是1.1
xmlns（XMLNamespace），xml命名空间，用于解决标记命名冲突。
案例(6):06_SVG.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><p>中华人民共和国</p><svgversion="1.1"xmlns="/2000/svg"width="600"height="480"><text x="50" y="50" font-size="36" fill="red">中华人民共和国</text></svg></body></html>
xml(extension markup Language)，扩展标记语言，允许使用者自定义标记，
规则： 必须有根元素；双标记必须成对出现，单标记必须以/结尾；标记之间必须顺序嵌套；属性值必须括在英文双引号之间
举例：
当不同的网址中有两个相同的标记，我们要引用这两个标记中其中之一，为了避免取到的标记和我们需要的不一致，可以采用xml命名的方法
实例：将不同网址下的两个table标记合并在一起
如何：将2个table标记分别用m，n重命名，然后顺序嵌套
<m:table xmlns:m=""><n:table xmlns:n=""></n:table></m:table>
HTML和XML的区别：
HTML是表现(显示)数据的，XML是描述数据(结构)的
案例(7):07_books.xml – xml
<?xml version="1.0" encoding="utf-8"?><books> <book id="1"><name>XML完全探索</name><price>89</price><publishing>中国青年出版社</publishing></book><book id="2"><name>Node.js编程实例</name><price>108</price><publishing>电子工业出版社</publishing></book><book id="3"><name>HTML5+CSS5精通</name><price>129</price><publishing>清华大学出版社</publishing></book></books>
SVG元素
(1)<line>元素 用于绘制线条
<line x1="起点x轴" y1="起点y轴" x2="终点x轴" y2="终点y轴"></line>
(2)<polyline>元素
用于绘制折线
<polyline points="x1,y1,x2,y2..." fill="填充" stroke="描边"></polyline>
(3)<rect>元素
用于绘制(圆角)矩形
<rectx="起点x轴" y="起点y轴" width="宽度" height="高度"rx="x轴切半径"ry="y轴切半径"></rect>
(4)<circle>元素
用于绘制原型
<circle cx="圆心x轴" cy="圆心y轴" r="半径"></circle>
(5)<ellipse>标记
用于绘制椭圆
<ellipse cx="圆心x轴" cy="圆心y轴" rx="x轴半径" ry="y轴半径"></ellipse>
(6)<text>元素
用于绘制文本
<text x="起点x轴" y="起点y轴">...</text>
(7)<g>元素
用于实现元素的群组
<g>...</g>
(8)<title>元素
用于描述性文本 – 是SVG中的title，与HTML中的title没有任何关系
<title></title>
<title>必须是其父元素的第一个子元素
效果：当鼠标停留在文本上时，显示提示文本
(9)<a>元素
用于实现链接
<svg version="1.1" xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><a xlink:href="目标文档URL" target="窗口形式">...</a></svg>
案例(8)：08_svgElement.html – SVG元素的案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#svg {width: 600px;height: 400px;margin: 0 auto;display: block;border: 1px solid #ccc;}</style></head><body><svgid="svg"version="1.1"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"><title>SVG案例展示</title><!-- 绘制线条 --><linex1="50"y1="50"x2="100"y2="50"stroke="red"stroke-width="5"></line><!-- 绘制折线 --><polylinepoints="180,50,220,30,250,30,290,50"fill="transparent"stroke="red"stroke-width="5"stroke-opacity="0.2"></polyline><!-- 绘制矩形 --><rectx="350"y="20"width="50"height="30"fill="red"fill-opacity="0.5"></rect><rectx="450"y="20"width="50"height="30"fill="red"fill-opacity="1"rx="10"ry="5"></rect><!-- 绘制圆形 --><circle cx="80" cy="120" r="25" fill="blue"></circle><!-- 椭圆 --><ellipse cx="230" cy="120" rx="50" ry="25" fill="blue"></ellipse><!-- 绘制文本 --><textx="350"y="110"fill="red"font-size="18"font-family="隶书"font-weight="bold"font-style="italic">SVG,可缩放矢量图形</text><text x="350" y="140" fill="red" font-size="18" font-family="隶书">SVG,可缩放矢量图形</text><!-- 绘制多行的文本 --><g fill="red" font-size="16"><title>如果 - 我</title><a xlink:href="" target="_blank"><text x="20" y="200">如是我是一片云</text><text x="20" y="220">我愿飞到你的身边</text><text x="20" y="240">如是我是一滴水</text><text x="20" y="260">我愿映射你的身影</text></a></g></svg></body></html>
SVG DOM
(1) createElementNS()
setAttribute() 方法用于设置元素的属性
Element.setAttribute('属性名称',值)
(2)setAttribute()
setAttribute() 方法用于设置元素的属性
Element.setAttribute('属性名称',值)
(3)getAttribute()
getAttribute() 方法用于获取元素的属性值
variable = Element.getAttribute('属性名称')
(4)appendChild()
appendChild() 方法用于追加子节点
Node.appendChild(子节点)
(5)removeChild()
removeChild() 方法用于删除子节点
Node.removeChild(子节点)
案例(9):09_svgDOM.html – 举例appendChild() 其他同上
<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#svg {width: 600px;height: 400px;margin: 0 auto;display: block;border: 1px solid #ccc;}</style></head><body><svg id="svg" version="1.1" xmlns="/2000/svg"></svg><script>//获取SVG元素(SVGSVGElement)let svgEle = document.getElementById("svg");//创建矩形元素(SVGRectElement)let rectEle = document.createElementNS("/2000/svg","rect");//设置矩形元素的属性rectEle.setAttribute("x", 250);rectEle.setAttribute("y", 50);rectEle.setAttribute("width", 100);rectEle.setAttribute("height", 200);rectEle.setAttribute("rx", 5);rectEle.setAttribute("ry", 5);rectEle.setAttribute("fill", "red");//Node的方法，追加矩形元素的属性到svgElesvgEle.appendChild(rectEle);</script></body></html>
