SVG —— 基于XML语法的可缩放矢量图形

SVG Scalable 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="http://www.w3.org/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="http://www.w3.org/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="http://www.a.com"><n:table xmlns:n="http://www.b.com"></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="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/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="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/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="http://www.baidu.com" 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="http://www.w3.org/2000/svg"></svg><script>//获取SVG元素(SVGSVGElement)let svgEle = document.getElementById("svg");//创建矩形元素(SVGRectElement)let rectEle = document.createElementNS("http://www.w3.org/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>

SVG —— 基于XML语法的可缩放矢量图形相关推荐

基于XML的可升级矢量图像(SVG)浅析
基于XML的可升级矢量图像(SVG)浅析级别: 初级吴高峰 (wugfeng@263.net )上海大学计算机系 2001 年 8 月 01 日 SVG是基于XML的专门为网络而设计的图像格式.本 ...
java fx svg 图像缩放控件_SVG（可缩放矢量图形）
SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C("World Wide Web C ...
HTML5: SVG （可缩放矢量图形）
ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...
android 绘画笔迹回放_一种基于可缩放矢量图形的安卓平台笔迹回放方法及装置与流程...
本发明涉及笔迹显示领域,更具体地,涉及一种基于可缩放矢量图形的安卓平台笔迹回放方法及装置. 背景技术: 智能移动设备平台上的回放技术已遍布许多安卓(Android)软件中,比如:字帖类软件,画图类软件 ...
svg --- 可缩放矢量图形
svg听了很多遍了,一直没有机会好好地了解一下这是个什么东西,今天突然有兴趣,就好好看看吧~ 这篇文章主要参考的还是 w3school上的svg教程. 第一部分:简介 svg就是scalable ve ...
svg 缩放_研究：可缩放矢量图形（SVG）
矢量图形已广泛应用于印刷媒体中 . 在网站中,我们还可以使用SVG或可缩放矢量图形添加矢量图形. 根据W3.org的官方规范 ,SVG被描述为: 一种用于描述XML中的二维图形的语言. SVG支持三种 ...
SVG（可缩放矢量图形）基本图形绘制方法与path路径命令
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و SVG(Scalable Vector Graphics)可缩放矢量图形用于描述二维矢量图形的一种图形格式很早之前SVG就出 ...
SVG使用XML格式定义图像
SVG基础知识–使用XML格式定义图像 1. 什么是SVG? 可伸缩矢量图形(Scalable Vector Graphics) 用来定义用于网络的基于矢量的图形使用XML格式定义图形图像在放大或 ...
g标签怎么设置svg_SVG（可缩放矢量图形）图片添加、高斯模糊、渐变与g标签
今天主要谈一下SVG的特殊效果其实和canvas都是差不多的,只不过是利用XML标签用的不是很多但是以防以后万一用到还是整理一下图片添加 svg中也可以添加图片注意这里是image标签而不是我 ...

SVG —— 基于XML语法的可缩放矢量图形

SVG —— 基于XML语法的可缩放矢量图形

SVG —— 基于XML语法的可缩放矢量图形相关推荐

最新文章

热门文章