svg市场前景（为了和Flash抗衡而诞生的SVG动画之）

四季花开

收藏 赞 分享

效果图gogogo.

svg市场前景（为了和Flash抗衡而诞生的SVG动画之）(1)

SVG是一个开放的W3C矢量图形标准，它的诞生就是为了和商用矢量图形标准-Flash抗衡。

主要知识点:

  • 圆角边框

  • 阴影

  • 定位

  • 渐变

一．SVG简介

1.1. 什么是SVG？

SVG是"Scalable Vector Graphics"的简称。中文可以理解成“可缩放矢量图形”。这个概念对于设计师来讲一点不陌生，但对于码农来讲，总是没有设计师们理解的那么透彻。其实码农们也没必要理解的那么透彻，只需要知道他是web页中的矢量图即可。它基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式标准。简单的说。就是用代码来绘制矢量图形的一种方式。SVG可以构造三种类型的图形对象：矢量图形、位图图像和文字。

  • 2001年9月4日，发布SVG1.0

  • 2003年1月4日，发布SVG1.1

  • 2003年1月14日，推出SVG移动电子版本：SVG Tiny和SVG Basic

  • 2008年12月22日，发布SVG Tiny1.2

  • 2011年8月16日，发布SVG 1.1（第二版），成为W3C目前推荐的标准。

    • 1.3. SVG的优缺点

    矢量图和传统栅格化的位图相比，很明显的差异是放大后会有锯齿，即通常说的失真。矢量图在这些情况下的优势明显。

    SVG就实现了对矢量图形的支持，除此之外，还加入了简单动画支持和对文字特效的支持。使矢量图从静态图变为动态图。

    • SVG可被非常多的工具读取和修改（比如记事本）

    • SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。

    • SVG是可伸缩的

    • SVG图像可在任何的分辨率下被高质量地打印

    • SVG可在图像质量不下降的情况下被放大

    • SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）

    • SVG是开放的标准

    • SVG文件是纯粹的XML

    但是SVG也不是万能的。也不是绝对优势的图形格式，只是在某些领域具有很高的价值。所有它也有一些缺点：

    • 使用的广泛性不如Flash

    • 由于原始的SVG是遵从XML语法。导致数据采用未压缩的方式存放、因此相较于其他矢量图形格式。同样的文件内容会比其他的文件格式稍大

    • 新版本不兼容旧版本

    • IE9以下的浏览器不支持

    1.4. SVG的hello world

    在支持的浏览器中创建<svg>标签就可以输出内容

    <body>

    <svg width="100%" height="1000">

    <text style="fill:#111;font-size: 24px" x="50" y="50">hello world</text>

    </svg>

    </body>

    以上的代码就是在页面中显示一个”hello world”，大小为24px。

    1.5. SVG的调用方式

    以上的Hello world是直接使用svg元素调用。除了这个以外。还可以直接指向SVG文件地址。而将SVG嵌入到HTML文件有很多方式：

    使用<iframe>标签来嵌入

    使用<img>标签嵌入

    直接使用svg标签

    使用<embeb>标签来嵌入：<embeb>被所有主流的浏览器支持，并允许使用脚本，只是严格的从HTML规范来讲，<embeb>标签并没有包含在任何HTML规范中。

    使用<object>标签来嵌入：<object>标签是HTML4的标准标签，被所有较新的浏览器支持。但这种方式都需要安装插件浏览器才能正确显示内容。

    二、SVG形状

    形状即是几何图形，SVG预定义了一些基础形状元素，可被开发者使用和操作，通过这些形状能够完成大部分绘制需求：

    • 矩形<rect>

    • 圆形<circle>

    • 椭圆<ellipse>

    • 线<line>

    • 折线<polyline>

    • 多边形<polygon>

    • 路径<path>

    svg市场前景（为了和Flash抗衡而诞生的SVG动画之）(2)

    收下小小简介，来看看太阳系绘制需要用到的知识点，那就是，等等等等~

    圆形<circle>

    英 [ˈsɜ:kl] 美 [ˈsɜ:rkl]

    <circle>标签可以绘制一个圆：

    <circle cx="150" cy="150" r="50" stroke="black" stroke-width="2" fill="red"/>

    属性：

    • 1)cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

    • 2)r 属性定义圆的半径。

    路径<path>

    用<path>标签来创建路径，从外观上来说和多边形差不多，但是功能却不相同。

    svg市场前景（为了和Flash抗衡而诞生的SVG动画之）(3)

    属性：

    属性d用于存储路径坐标点数据，下面的命令可以用于构造路径数据：

    • M = moveto

    • L = lineto

    • H = horizontal lineto

    • V = vertical lineto

    • C = curveto

    • S = smooth curveto

    • Q = quadratic Belzier curve

    • T = smooth quadratic Belzier curveto

    • Z = closepath

    • A = elliptical Arc

    这里地球和月球的运行轨道就是path所画，那么关于path的贝塞尔曲线，下次再慢慢剖析。这里来看看A = elliptical Arc（A RX,RY,XROTATION,FLAG1,FLAG2,X,Y）

    • RX,RY指所在椭圆的半轴大小

    • XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。

    • FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。

    • FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针

    • X,Y为终点坐标

    还有让地球和月球动起来的svg动画，这里使用到了animateMotion标签，animoteMotion标签可以

    让你可以实现一个路径动画，并且根据路径进行旋转。路径使用和<path>相同的方式进行定义。你可以设置属性来定义对象是否根据路径的正切角度来旋转。

    上源码：

    <svg height="600" width="100%">

    <rect x="0" y="0" height="600" width="100%" style="fill:black"/>

    <!-- A RX,RY,XROTATION,FLAG1,FLAG2,X,Y

    如：m 200,250 a 150,30 0 1 0 0,70

    RX,RY指所在椭圆的半轴大小

    XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。

    FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。

    FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针

    X,Y为终点坐标 -->

    <!-- <path d="M500 100 a150,60 0 1 0 1,1" style="stroke:red;stroke-width:4"/> -->

    <!-- 预定义的效果 -->

    <defs>

    <g id="g1" transform="translate(-10,-30)">

    <!-- 地球（图片版） -->

    <image xlink:href="earth.gif" x="0" y="20" width="20" height="20"/>

    <!-- 地球（矩形圆版） -->

    <!-- <circle cx="0" cy="0" r="20" stroke="blue" stroke-width="2" fill="blue"/> -->

    <!-- 月亮的运动轨迹-path -->

    <path id="path2" d="M35 15 a40,30 30 1 0 1,1 z" style="stroke:white;stroke-width:2;fill:none"/>

    <!-- 月亮-圆 -->

    <circle cx="0" cy="0" r="5" stroke-width="2" fill="white">

    <animateMotion dur="10s" repeatCount="indefinite">

    <mpath xlink:href="#path2"/>

    </animateMotion>

    </circle>

    </g>

    </defs>

    <!-- 太阳-圆 -->

    <image xlink:href="ty.gif" x="275" y="165" width="120" height="120"/>

    <!-- <circle cx="350" cy="250" r="40" stroke="red" stroke-width="2" fill="red"/> -->

    <!-- 地球运动的轨迹-path -->

    <path id="path1" d="M560 200 a310,150 20 1 0 1,1 z" style="stroke:white;stroke-width:3;fill:none"/>

    <use x="0" y="0" xlink:href="#g1">

    <!-- 地球-圆 -->

    <!-- <circle cx="0" cy="0" r="20" stroke="blue" stroke-width="2" fill="blue"> -->

    <animateMotion dur="20s" repeatCount="indefinite">

    <mpath xlink:href="#path1"/>

    </animateMotion>

    <!-- </circle> -->

    </use>

    </svg>

    svg市场前景（为了和Flash抗衡而诞生的SVG动画之）(4)

    如果你热爱编程，来跟我一起探讨吧。这里有免费的学习资源分享：群（295383988）

    ,
    展开全文

    免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com

    猜您喜欢

      热门推荐

      Copyright © 2013-2024 秒懂生活 站务投诉邮箱：anhduc.ph@yahoo.com

      分享
      投诉
      首页