前言:

花了些时间了解了一下svg,然而仍然不怎么了解...

第一步:直接在html代码中使用svg。

首先了解几个标签:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ...>...</svg>

svg标签,需要声明namespace,是svg的根。

<defs>...</defs>

defs标签,在其中可以定义滤镜,填充等等。

<g>...</g>

g标签,一个svg标签可以包含一个或多个g标签,一个g标签可以包含一个或多个形状,g标签可以将多个形状分在一组,一同移动、变形等等。

<rect>, <circle>...

各种形状

首先就来画个矩形:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="400">

<g>

<rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);">

</g>

</svg>

样式的控制可以一起写在style属性里,也可以分开写比如:fill="rgb(0,0,255)" stroke=":rgb(0,0,0)" ...

然后改成用渐变色填充,渐变色就需要在defs标签里定义了:

<defs>

<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">

<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>

        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>

    </linearGradient>

</defs>

然后在图形的fill属性使用这个渐变色:fill:url(#orange_red)

之后再加个滤镜,也定义在defs里:

<filter id="Gaussian_Blur">

    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />

</filter>

同样的使用的时候:filter:url(#Gaussian_Blur)

然后再来看看动画:

动画要定义在图形里,用animateTransform标签

<rect ...>

<animateTransform attributeType="xml" attributeName="transform" type="rotate"
        from="0" to="360"
        begin="0" dur="5s"
        fill="freeze"
    />

</rect>

最后是事件:

事件可以用onclick="..."或者addEventListener的方法,除此之外还能用set标签,不过set标签与其说是定义事件,不如说是定义变化,只是这个变化需要一个事件来触发

<rect ...>

<set attributeName="fill" to="red" begin="click"/>

</rect>

用js操作svg:

创建svg,这里就需要用createElementNS这个api:

var SVGNS = 'http://www.w3.org/2000/svg';

var svg = document.createElementNS(SVGNS, 'svg');

var g = document.createElementNS(SVGNS, 'g');

var s = document.createElementNS(SVGNS, 'rect');

g.appendChild(s);

svg.appendChild(g);

document.body.appendChild(svg);

然后是事件,可以用addEventListener:

s.addEventListener('click', function () {
    s.setAttribute('fill', 'rgb(255,0,0)');
});

动画,也可以像操作其他元素的动画那样:

var rotate = function () {
    var t = (new Date() - rotate.t)
    angel = t / 10,
    px = 50 + Math.abs(100 - t / 20 % 200);

// rotate的中心是g的(0,0)点,所以这里把s的中心放到(0,0)点,然后通过g的transform来移动图形位置,这样就能让图形围绕它的中心旋转
    g.setAttribute('transform', 'translate('+px+',50)');
    s.setAttribute('transform', 'rotate('+angel+')');
    requestAnimationFrame(rotate);
}

小结:

大致了解了下创建svg,svg事件与动画的几种方式,不过想搞个复杂的滤镜就感觉很头疼,因为文档有点儿不好搞。要想玩好svg感觉还得多研究多事件,不是个容易的事儿 :)

在web前端使用SVG的更多相关文章

  1. 如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

    任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战.设备间不同的屏幕尺寸.分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可 ...

  2. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  3. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  4. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  5. Web前端工程师成长之路——知识汇总

    一.何为Web前端工程师?          前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...

  6. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  7. 【Yeoman】热部署web前端开发环境

    本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...

  8. Web 前端开发人员和设计师必读文章推荐【系列二十八】

    <Web 前端开发精华文章推荐>2014年第7期(总第28期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

随机推荐

  1. UML基础概念(转)

    UML基础概念 UML概述 uml简介 uml(unified Modeling Language )为面向对象软件设计提供统一的.标准的.可视化的建模语言.适用于描述以用例为驱动,以体系结构为中心的 ...

  2. this.button1.Click += new System.EventHandler(this.button1_Click);

    在这个程序里,这里的修改是为了更好理解,当然这种写法是语法错误的. 下面我们对其进行分析: 首先,观察“=”右面的表达式. new System.EventHandler(this.button1_C ...

  3. 多文件上传插件Stream,是Uploadify的Flash版和Html5版的结合,带进度条,并支持html5断点续传(附件上传),拖拽等功能

    是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他) ...

  4. Task Cancellation: Parallel Programming

    http://beyondrelational.com/modules/2/blogs/79/posts/11524/task-cancellation-parallel-programming-ii ...

  5. how to enable #ifdef macro in the command line of make?

    Compilers normally use the -D flags eg Code: test.o: test.cpp $(CC) $(CFLAGS) -DTEST1 test.cpp -o $@

  6. Modbus RTU 通信工具设计(转)

    Modbus RTU 通信工具设计 Modbus 是一个工业上常用的通讯协议.一种通讯约定. ModBus 协议是应用层报文传输协议(OSI 模型第7层),它定义了一个与通信层无关的协议数据单元(PD ...

  7. Android学习笔记之ContentProvider

    读取其他应用程序共享的数据 以下示例为读取联系人信息 package com.jiahemeikang.helloandroid; import com.jiahemikang.service.Ech ...

  8. CodeForces 616D Longest k-Good Segment

    用队列维护一下即可 #include<cstdio> #include<cstring> #include<queue> #include<algorithm ...

  9. web项目编译出错时,原因之一,可能是build path 中order and Export引起

    build path中的order and Export,如果两个libarary中有相同功能的jar包,则编译器会选择顺序在前的jar包中相应的类作为编译所需. 所以,当项目jar包较多的时候,如果 ...

  10. 怎样让一个div高度自适应浏览器高度

    原文:http://www.jb51.net/web/79171.html 原文:http://zhidao.baidu.com/link?url=oId1sFRhiBnV37-RmRE6WQNHxi ...