SVG可伸缩矢量图形
SVG可伸缩矢量图形
总结
1、svg就像普通标签那么使用
2、svg是xml
3、svg是矢量图,而canvas是位图
学习要点
- 对HTML5中的SVG有初步的了解
什么是SVG
简单的说SVG文档就是一些可以被直接嵌入到页面中的XML文档;
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 与 Canvas两者间的区别
- SVG 是一种使用 XML 描述 2D 图形的语言,Canvas 通过 JavaScript 来绘制 2D 图形。
- SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
- 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
- Canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>8-23 课堂演示</title>
<style type="text/css">
svg{
background: rgba(100,50,30,0.4);
}
</style>
</head>
<body>
<!-- viewBox SVG绘图区域。由空格或逗号分隔的4个值。 (min x, min y, width, height)" -->
<svg width="200" viewBox='0,0,200,200'>
<circle cx="50" cy="50" r="40" stroke="red" stroke-width="3" fill="orange" />
<ellipse cx="100" cy="100" rx="80" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
<svg width="200" height="200" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
stroke="blue" stroke-width="2"
fill="none" id="theMotionPath"/>
<circle cx="10" cy="110" r="3" fill="green" />
<circle cx="110" cy="10" r="3" fill="green" />
<circle cx="" cy="" r="5" fill="orange"> <animateMotion dur="6s" repeatCount="indefinite">
<mpath xlink:href="#theMotionPath"/>
</animateMotion>
</circle>
</svg>
</body>
</html>
SVG可伸缩矢量图形的更多相关文章
- SVG 可伸缩矢量图形 简介 Path路径
w3school:http://www.w3school.com.cn/svg/svg_intro.asp SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG ...
- HTML5——添加新元素 新元素 Canvas SVG MathML 黑客帝国特效
为HTML添加新元素 添加新元素 + 该元素定义样式 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
- Android群英传笔记——第七章:Android动画机制和使用技巧
Android群英传笔记--第七章:Android动画机制和使用技巧 想来,最 近忙的不可开交,都把看书给冷落了,还有好几本没有看完呢,速度得加快了 今天看了第七章,Android动画效果一直是人家中 ...
- 《响应式Web设计实践》学习笔记
原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...
- 雷林鹏分享:XML 相关技术
XML 相关技术 下面是一个 XML 技术的列表. XHTML (可扩展 HTML) 更严格更纯净的基于 XML 的 HTML 版本. XML DOM (XML 文档对象模型) 访问和操作 XML 的 ...
- HTML+CSS知识总结2
一.position:absolute和float属性的异同 相同点:两者都可以让元素脱离文档流,并可设置宽高 不同点:float仍会占据位置,而position:absolute会覆盖文档流中其他元 ...
- svg技术(可缩放矢量图形)介绍
公司里面的产品用图表的地方也比较多,作为平台维护的我,收到几次需求提的建议中包括图表美化的功能,要炫,要3d,立体感,功能要强大等到:平台现有控件都是用的一个开源flash,我对flash虽然会一点但 ...
- HTML5: SVG (可缩放矢量图形)
ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...
随机推荐
- C++算法库学习__std::sort__对 vector进行排序_排序后就可以进行使用std::lower_bound进行二分查找(查找第一个大于等于指定值的迭代器的位置)__std::unique
std::sort 对vector成员进行排序; std::sort(v.begin(),v.end(),compare); std::lower_bound 在排序的vector中进行 ...
- mac系统,鼠标移动太慢
to check your speed: defaults read -g com.apple.mouse.scaling to set your speed defaults write -g co ...
- bazel和TensorFlow安装
bazel安装:https://docs.bazel.build/versions/master/install-ubuntu.html#install-with-installer-ubuntu 安 ...
- A6. JVM 垃圾回收算法(GC 算法)
[概述] 常见的垃圾回收算法有:标记-清除算法.复制算法.标记-整理算法.分代收集算法. [标记-清除算法] 标记-清除算法是最基础的收集算法,如同它的名字一样,算法分为 “标记” 和 “清除” 两个 ...
- 打造完美的ImageLoader——LruCache+DiskLruCache
做android应用少不了要和网络打交道,在我刚开始学android的时候总是处理不好网络图片的加载,尤其是图片乱跳的问题,后来发现了各种缓存图片的方法:本地缓存.软引用.LruCache.... 我 ...
- 基于springmvc、ajax,后台连接数据库的增删改查
前言 前段时间在博客园上找了一个springmvc的例子,照着学了一下,算是对springmvc有了一个初步的了解,打一个基础,下面是链接.(我只看了博客,视频太耗时间了) 博客链接:http://w ...
- 字符串--P1308 统计单词数
题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...
- Tomcat服务器启动后访问localhost:8080显示404的原因
原因:在eclipse中关联了Tomcat服务器 重点来了,如果你是在eclipse中点击启动按钮启动的Tomcat 那么Tomcat不会默认部署它自己的测试项目(也就是大猫localhost:808 ...
- out对象的使用
out对象的使用 制作人:全心全意 out对象用于在Web浏览器内输出信息,并且管理应用服务器上的输出缓冲区.在使用out对象输出数据时,可以对数据缓冲区进行操作,及时清除缓冲区中的残余数据,为其他的 ...
- python爬虫25 | 爬取下来的数据怎么保存? CSV 了解一下
大家好 我是小帅b 是一个练习时长两年半的练习生 喜欢 唱! 跳! rap! 篮球! 敲代码! 装逼! 不好意思 我又走错片场了 接下来的几篇文章 小帅b将告诉你 如何将你爬取到的数据保存下来 有文本 ...