SVG(Scalable Vector Graphics):可缩放矢量图形，一种二维图形表示语言。

借助SVG，我们可以实现很多同Canvas API类型的绘制操作，但在Canvas元素上绘制文本的时候，字符会以像素的方式固定到上面。文本成为了图像的一部分，除非重新绘制Canvas绘制区域，否则无法改变文本内容。正因为如此，Canvas上面的文本无法被搜索引擎获取，而SVG上的文本却是可搜索的。例如，Google会对Web上的SVG内容中的文本进行索引。

在页面中添加SVG

内联方式：像HTML中的其它元素一样使用，在此基础上可以编写HTML，JavaScript和SVG的交互应用。

<body>

    <svg width="200" height="200">

    </svg>

</body>

外联方式：通过<img>元素，在HTML导入外部SVG文件，缺点是无法编写与SVG元素进行交互的脚本。

    <img src="example.svg" />

简单的形状

SVG包含了基本的形状元素，如矩形、圆形和椭圆。形状元素的尺寸和位置被定义成了属性。矩形的属性有width和height。圆形有一个表示半径的r属性。它们都应用CSS语法表示距离，因此单位包括了px 、point 、em等。

矩形：x="50" y="20"表示矩形的起点为(50,20)

<body>

    <svg width="200" height="200">

        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>

    </svg>

</body>

SVG绘制开关对象是按对象文档中出现的顺序进行的。如果我们在画完矩形之后再画圆，那么圆形会显示在矩形之上。

增加一个圆形：

<body>

    <svg width="200" height="200">

        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>

        <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>

    </svg>

</body>

变换SVG元素

SVG中可以将多个元素结合起来，使它们形成一个组，变为一个整体。

<g>元素代表“组”，可以用来结合多个相关的元素。组内成员可以由通过ID来引用。些外，组也可以作为一个整体进行变换。如果你为组添加了变换属性，那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。

  <svg width="200" height="200">

        <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">

            <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>

            <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>

         </g>

    </svg>

 复用内容

SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。借助这两个元素，你可以多次复用同一内容，消除冗余。

<svg width="200" height="200">

        <defs>

            <g  id="ShapeGroup">

                <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>

                <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>

            </g>

        </defs>

        <use xlink:href="#ShapeGroup" transform="translate(60,0)  scale(0.4)"></use>

        <use xlink:href="#ShapeGroup" transform="translate(120,80)  scale(0.75)"></use>

        <use xlink:href="#ShapeGroup" transform="translate(20,60)  scale(0.25)"></use>

    </svg>

图案和渐变

<defs>

            <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse"

                x="0" y="0" width="100" height="67" viewBox="0 0 100 67">

                <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" />

            </pattern>

            <%--渐变--%>

            <linearGradient id="RedBlackGradient">

                <stop offset="0%" stop-color="#000"></stop>

                <stop offset="100%" stop-color="#f00"></stop>

            </linearGradient>

        </defs>

      <rect x="0" y="20" width="100" height="80" stroke="red"

           fill="url(#RedBlackGradient)" />

        <circle cx="120" cy="80" r="40" stroke="#00f"

            stroke-width="8" fill="url(#GravelPattern)" />

    </svg>

路径

SVG不公包含简单的形状，还包含自由形态的路径。path元素有一个d属性，代表路径数据。在d的值中，M代表移至(Move to)，L代表划线至(Line to),Q代表二次曲线，Z代表闭合路径。

   <svg width="200" height="200">

        <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z"  />

    </svg>

文本

SVG中文本有点类型于CSS中对于样式的定义

    <svg width="200" height="200">

        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"

            font-size="40px" font-weight="bold">Hello SVG</text>

    </svg>

HTML5程序设计--SVG的更多相关文章

  1. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  2. 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz

    以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...

  3. HTML5实战——svg学习

    百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也 ...

  4. HTML5 程序设计笔记（二）

    Canvas API 1.HTML5 Canvas 概述 1.1 历史 Canvas的概念最初是由苹果公司提出的,用于在Mac OS X WebKit中创建控制板部件(dashboard widget ...

  5. HTML5 程序设计笔记（一）

    HTML5 概述 1.html5 发展史 1993年html首次以因特网草案形式发布. 20世纪90年代,html大幅发展,从2.0版,到3.2版和4.0版.最后到1999年的4.01版. 伴随htm ...

  6. HTML5之SVG

    1.背景 SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形.1998年,万维网联盟成立了一个工作组,研发一种通过 XML来表现矢量图形的技术——SVG!由于SVG也是 ...

  7. 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是Html5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了.实际上很多从业人员并没有深入理解业界为什么要推出HTM ...

  8. HTML5之SVG详解（一）：基本概括

    转载自:http://www.cnblogs.com/hupeng/archive/2012/12/21/2828456.html 1.背景 SVG是Scalable Vector Graphics的 ...

  9. 关于HTML5用SVG画图

    SVG在HTML5中的应用 SVG(Scalable Vector Graphics)是用来绘制矢量图的HTML5标签.只要定义好XML属性就能够获得与其一致的图像元素. 使用SVG之前先将标签加入到 ...

随机推荐

  1. [php]如何更改wamp默认的mysq空密码？

    最近刚开始学php,爬坑中.上午看了会儿书,下了个源码,把文件部署到www下之后,也导入了sql文件,但是进入之后显示 = =  一开始不知道是什么.后来百度之后发现是mysql的问题,应该是源码中p ...

  2. EmguCV学习——简单算法 差分与高斯

    公司项目需要检测运动物体,我对opencv也没啥研究,google了好久看了好多方法,最简单的就是差分与高斯背景建模了. 旁边搞c++的同事正在搞更nb的算法,等出来了 我再转成C#版的分享. 先看差 ...

  3. WPF Event 在 Command 中的应用初级篇，支持所有Event 展示松耦合设计的全部代码 - 解决TextBoxBase.TextChanged或者TextBox.TextChanged等类似事件绑定问题。

    做过WPF开发的人,都知道做MVVM架构,最麻烦的是Event的绑定,因为Event是不能被绑定的,同时现有的条件下,命令是无法替代Event.而在开发过程中无法避免Event事件,这样MVVM的架构 ...

  4. JS把函数当作参数传递

    getDescPage("commonPage","/page/common/tips/tips.html",init()); $("#"+ ...

  5. JavaScript 编码风格指南

    A.1  缩进 // 4个空格的层级缩进 if (true) { doSomething(); } A.2  行的长度 // 每行限于80个字符,超出则在运算符后换行,缩进2个层级(8个空格) doS ...

  6. lucene .NET 搜索图片 功能实现

    关于搜索部分 1想建立索引.构建jpg图片解析器,在索引时将jpg图片的exif信息及其文本信息如名称,存放路径,大小,日期等等加入索引!具体实现代码如下: public void BulidInde ...

  7. golang的++与--

    http://godoc.golangtc.com/doc/faq#inc_dec 简单地说, 在golang中++,--操作是语句而不是表达式. 所以a=b++, return x++之类绝对提示错 ...

  8. 找到一个学习bootstrap的好网站

    http://www.w3cschool.cc/bootstrap/bootstrap-css-overview.html

  9. [shell基础]——整数比较;字符串比较;文件测试;逻辑测试符

    整数比较方法一:[  ] 或 [[  ]]   (1) 此方法需要使用整数比较运算符.[标注:equal 等于   greater 大于   less-then 小于] (2) 使用时一定要注意前后一 ...

  10. 课题练习——找从1到N出现的1的个数

    #include<iostream.h>#include<conio.h>int Sum1(int n){ int count = 0; //记录1的个数 int factor ...