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可伸缩矢量图形的更多相关文章

  1. SVG 可伸缩矢量图形 简介 Path路径

    w3school:http://www.w3school.com.cn/svg/svg_intro.asp  SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG ...

  2. HTML5——添加新元素 新元素 Canvas SVG MathML 黑客帝国特效

    为HTML添加新元素 添加新元素   +   该元素定义样式 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. D3js初探及数据可视化案例设计实战

    摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...

  4. Android群英传笔记——第七章：Android动画机制和使用技巧

    Android群英传笔记--第七章:Android动画机制和使用技巧 想来,最 近忙的不可开交,都把看书给冷落了,还有好几本没有看完呢,速度得加快了 今天看了第七章,Android动画效果一直是人家中 ...

  5. 《响应式Web设计实践》学习笔记

    原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...

  6. 雷林鹏分享：XML 相关技术

    XML 相关技术 下面是一个 XML 技术的列表. XHTML (可扩展 HTML) 更严格更纯净的基于 XML 的 HTML 版本. XML DOM (XML 文档对象模型) 访问和操作 XML 的 ...

  7. HTML+CSS知识总结2

    一.position:absolute和float属性的异同 相同点:两者都可以让元素脱离文档流,并可设置宽高 不同点:float仍会占据位置,而position:absolute会覆盖文档流中其他元 ...

  8. svg技术（可缩放矢量图形）介绍

    公司里面的产品用图表的地方也比较多,作为平台维护的我,收到几次需求提的建议中包括图表美化的功能,要炫,要3d,立体感,功能要强大等到:平台现有控件都是用的一个开源flash,我对flash虽然会一点但 ...

  9. HTML5: SVG （可缩放矢量图形）

    ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...

随机推荐

  1. C++算法库学习__std::sort__对 vector进行排序_排序后就可以进行使用std::lower_bound进行二分查找（查找第一个大于等于指定值的迭代器的位置）__std::unique

    std::sort      对vector成员进行排序; std::sort(v.begin(),v.end(),compare);   std::lower_bound 在排序的vector中进行 ...

  2. mac系统，鼠标移动太慢

    to check your speed: defaults read -g com.apple.mouse.scaling to set your speed defaults write -g co ...

  3. bazel和TensorFlow安装

    bazel安装:https://docs.bazel.build/versions/master/install-ubuntu.html#install-with-installer-ubuntu 安 ...

  4. A6. JVM 垃圾回收算法（GC 算法）

    [概述] 常见的垃圾回收算法有:标记-清除算法.复制算法.标记-整理算法.分代收集算法. [标记-清除算法] 标记-清除算法是最基础的收集算法,如同它的名字一样,算法分为 “标记” 和 “清除” 两个 ...

  5. 打造完美的ImageLoader——LruCache+DiskLruCache

    做android应用少不了要和网络打交道,在我刚开始学android的时候总是处理不好网络图片的加载,尤其是图片乱跳的问题,后来发现了各种缓存图片的方法:本地缓存.软引用.LruCache.... 我 ...

  6. 基于springmvc、ajax，后台连接数据库的增删改查

    前言 前段时间在博客园上找了一个springmvc的例子,照着学了一下,算是对springmvc有了一个初步的了解,打一个基础,下面是链接.(我只看了博客,视频太耗时间了) 博客链接:http://w ...

  7. 字符串--P1308 统计单词数

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...

  8. Tomcat服务器启动后访问localhost:8080显示404的原因

    原因:在eclipse中关联了Tomcat服务器 重点来了,如果你是在eclipse中点击启动按钮启动的Tomcat 那么Tomcat不会默认部署它自己的测试项目(也就是大猫localhost:808 ...

  9. out对象的使用

    out对象的使用 制作人:全心全意 out对象用于在Web浏览器内输出信息,并且管理应用服务器上的输出缓冲区.在使用out对象输出数据时,可以对数据缓冲区进行操作,及时清除缓冲区中的残余数据,为其他的 ...

  10. python爬虫25 | 爬取下来的数据怎么保存？ CSV 了解一下

    大家好 我是小帅b 是一个练习时长两年半的练习生 喜欢 唱! 跳! rap! 篮球! 敲代码! 装逼! 不好意思 我又走错片场了 接下来的几篇文章 小帅b将告诉你 如何将你爬取到的数据保存下来 有文本 ...