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. CAD在一个点构造选择集

    主要用到函数说明: IMxDrawSelectionSet::SelectAtPoint 在一个点构造选择集.详细说明如下: 参数 说明 [in] IMxDrawPoint* point 点坐标 [i ...

  2. MyBatis 的基本介绍及使用

    一.简介 ​ MyBatis 是支持定制化 SQL.存储过程以及高级映射的持久层框架(ORM).MyBatis 可以使用简单的 XML 或 注解用于配置和映射数据表,是将 POJO(Plain Old ...

  3. 11servlet接口

    11.servlet接口-2018/07/23 1.servlet 是一个接口,需要导包javax.servlet.Servlet; 第一种编写一个servlet程序的方法 写一个Java类,实现se ...

  4. UVA - 10048 Audiophobia（Floyd求路径上最大值的最小）

    题目&分析: 思路: Floyd变形(见上述紫书分析),根据题目要求对应的改变判断条件来解题. 代码: #include <bits/stdc++.h> #define inf 0 ...

  5. Linux：DHCP服务配置

    DHCP服务程序能够使局域网内的主机自动且动态的获取IP地址.子网掩码.网关地址以及DNS服务器地址等信息.    说明:先安装DHCP服务     yum install dhcp -y       ...

  6. shell日志颜色处理

    记录一下shell日志颜色处理 _COLORS=${BS_COLORS:-$(tput colors >/dev/)} __detect_color_support() { # shellche ...

  7. linux的ssh相关指令

    1.安装ssh apt-get install openssh-server 2.备份ssh的配置文件 sudo cp /etc/ssh/sshd_config /etc/ssh/sshd_confi ...

  8. linux cmp-比较两个文件是否有差异

    推荐:更多Linux 文件查找和比较 命令关注:linux命令大全 cmp命令用来比较两个文件是否有差异.当相互比较的两个文件完全一样时,则该指令不会显示任何信息.若发现有差异,预设会标示出第一个不通 ...

  9. 正确的在循环list的时候删除list里面的元素

    s = [1,2,3,4,5] for i in s: s.remove(i) print(s)   输出结果:[2, 4] 1.当第一次删除后,后面的元素会前移,此时s=[2,3,4,5], 2.然 ...

  10. Python学习——集合

    集合 python中的集合和数学上集合具有基本相同的性质,此处不再赘述. 1.创建集合的两种方法 #直接创建 num={1,2,3,4,5} #利用set方法创建 num1=set([1,2,3,4, ...