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控件安卓界面控制

    CAD控件界面上所有元素都可以控制显示或隐藏,下面将逐一介绍详细用法. 设置工具文件 MxFunction.setToolFile 设置工具文件.详细说明如下: 参数 说明 String sFile ...

  2. MySQL数据库开启、关闭、查看函数功能的方法

    应用 MySQL 时,会遇到不能创建函数的情况.出现如下错误信息: ERROR 1418 : This function has none of DETERMINISTIC, NO SQL, or R ...

  3. 搭建一台功能简单的FTP服务器

    #vi /etc/sysconfig/network-scripts/ifcfg-eno33554952 #revice network restart #ping www.baidu.com #ip ...

  4. buf.writeInt16BE()函数详解

    buf.writeInt16BE(value, offset[, noAssert]) buf.writeInt16LE(value, offset[, noAssert]) value {Numbe ...

  5. 【Codeforces 411A】Password Check

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 傻逼模拟题 [代码] import java.io.*; import java.util.*; public class Main { st ...

  6. [luoguP2983] [USACO10FEB]购买巧克力Chocolate Buying（贪心）

    传送门 按价格排序后贪心 ——代码 #include <cstdio> #include <iostream> #include <algorithm> int n ...

  7. node.js 利用流实现读写同步，边读边写

    //10个数 10个字节,每次读4b,写1b let fs=require("fs"); function pipe(source,target) { //先创建可读流,再创建可写 ...

  8. 旅游电车(cogs 1175)

    [问题描述] Henryy国正致力于首都的一个旅游电车建设工程.首都有N个旅游景区.Henryy国的电车永远只沿道路规定的方向行驶,为了不使投入使用的电车有可能无法回到它的起始站,Henryy希望知道 ...

  9. 【BZOJ4514】数字配对（费用流）

    题意: 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对,并获得 ci× ...

  10. Memory+SLES 11/12 OS Tuning & Optimization

    https://www.suse.com/documentation/sles11/book_sle_tuning/data/sec_util_memory.html SLES 11/12 OS Tu ...