html5 svg

<html >

<body>

<p>canvas 用js 绘画，是整幅画布，适合游戏   svg可放大，支持dom 操作，js事件 线性渐变、高斯模糊、动画实例</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="300" height="300" style="border:1px solid red;" >

    <!--圆形 cx cy 圆心 stroke 线条颜色 -->

    <circle cx="32" cy="32" r="30" stroke="black" stroke-width="1" fill="red" fill-opacity="0.5" />

    <!--矩形-->

    <rect x="80" y="10" width="100" height="100" stroke="black" stroke-width="2" fill="red" stroke-opacity="0.5"/>

    <!--矩形 rx ry 圆角大小-->

    <rect x="200" y="10" rx="20" ry="20" width="100" height="100" stroke="black" stroke-width="2" fill="red" stroke-opacity="0.5"/>

    <!--椭圆  cx cy 圆点 rx水平半径  ry 垂直半径-->

    <ellipse cx="100" cy="160" rx="80" ry="40" style="fill:#abcdef;stroke:#ccc;stroke-width:2"/>

    <!--线条 x1 y1 线条开始  x2 y2 线条结束-->

    <line x1="190" y1="170" x2="190" y2="150" style="stroke: red;stroke-width:2"/>

    <!--多边形 至少3条边  points 指各个顶点的坐标-->

    <polygon points="220,120 300,210 170,250" style="stroke:green;stroke-width:1;fill:green;"/>

    <!--只划线条-->

    <polyline points="10,200 10,220 20,220 20,240 40,240 40,260"style="fill:white;stroke:red;stroke-width:2"/>

    <!--  它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

    M = moveto

    L = lineto

    H = horizontal lineto

    V = vertical lineto

    C = curveto

    S = smooth curveto

    Q = quadratic Belzier curve

    T = smooth quadratic Belzier curveto

    A = elliptical Arc

    Z = closepath

    注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

    由于绘制路径的复杂性，因此强烈建议您使用 SVG 编辑器来创建复杂的图形。

    -->

    <path d="M50 250 L70 290 L90 300 Z" />

</svg>

</body>

</html>

高斯模糊 线性渐变

<html >

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="300" height="300" style="border:1px solid red;" >

    <!--高斯模糊 stdDeviation 模糊程度-->

    <defs>

        <filter id="Gaussian_Blur">

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

        </filter>

    </defs>

    <ellipse cx="70" cy="40" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

    <!--线性渐变-->

    <defs>

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

            <stop offset="0%" style="stop-color:red;stop-opacity:1"/>

            <stop offset="100%" style="stop-color:yellow;stop-opacity:1"/>

        </linearGradient>

    </defs>

    <ellipse cx="230" cy="50" rx="65" ry="35"style="fill:url(#orange_red)"/>

    <!--放射性渐变-->

    <defs>

        <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

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

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

        </radialGradient>

    </defs>

    <ellipse cx="50" cy="120" rx="40" ry="30"style="fill:url(#grey_blue)"/>

</svg>

</body>

</html>

html5 svg的更多相关文章

  1. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. 基于HTML5 SVG炫酷文字爆炸特效

    这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.该文字特效用SVG path属性将文字路径切割为很多小块,然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果. 在线 ...

  3. 9款基于HTML5/SVG/Canvas的折线图表应用

    1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...

  4. 12种超酷HTML5 SVG和CSS3浮动标签效果

    这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

  5. 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

    这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...

  6. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  7. 基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

    今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图 ...

  8. HTML5 SVG实现过山车动画

    HTML5 SVG实现过山车动画是一款jQuery特效很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷. http://www.hui ...

  9. 7种炫酷HTML5 SVG液态水滴融合分解动画特效

    这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效.这些SVG动画特效使一些HTML元素.如菜单.分页button.APP.选择框等元素的过渡动画像几粒水滴一样融合分解.效果很的酷 ...

随机推荐

  1. 3D音效

    摘自:http://baike.baidu.com/view/1330437.htm?fr=aladdin 3D音效就是用扬声器仿造出似乎存在但是虚构的声音.例如扬声器仿造头顶上有一架飞机从左至右飞过 ...

  2. 转：安装MySQL遇到MySQL Server Instance Configuration Wizard未响应的解决办法

    问题:安装了MySQL之后进入配置界面的时候,总会显示“MySQL Server Instance Configuration Wizard未响应”,一直卡死. 解决办法:Win7系统中,以管理员的权 ...

  3. 关闭CENTOS不必要的默认服务

    CentOS关闭服务的方法: 图形界面,运行ntsysv chkconfig –level 2345 服务名称 off 服務名稱 建議 說明 acpid 停用 Advanced Configurati ...

  4. 一致性哈希算法以及其PHP实现

    在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括:  轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法(Respons ...

  5. devstack两次以上重装提高成功率的方法

    1) /opt/stack/requirements/ git reset --hard 2) rm -rf /usr/local/lib/python2.7/dist-packages/*

  6. JavaScript变量声明

    javascript是一种无类型语言,无类型只是意味着用户不必显示地声明变量的数据类型,但是javascript仍然将根据需要自动进行数据类型转换的. javascript的数据类型可以分为简单数据类 ...

  7. HTML 返回顶部的样式

    .fhdb{ width:50px; height:50px; position:fixed;   //可以用来定义元素的固定定位. right:20px;      //距离右侧20像素 botto ...

  8. Tesseract-OCR text2image.exe [ x86 支持 XP ]

    Tesseract-OCR 工具中的 text2image.exe ,下载其他人编译的在 win 系统都无法正常运行. 折腾了好久终于编译出能正常运行的. --font="font name ...

  9. Bestcoder13 1003.Find Sequence（hdu 5064） 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5064 题目意思:给出n个数:a1, a2, ..., an,然后需要从中找出一个最长的序列 b1, b ...

  10. 【leetcode】Insertion Sort List （middle）

    Sort a linked list using insertion sort. 思路: 用插入排序对链表排序.插入排序是指每次在一个排好序的链表中插入一个新的值. 注意:把排好序的部分和未排序的部分 ...