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. How to keep Environment Variables when Using SUDO

    The trick is to add environment variables to sudoers file via sudo visudo command and add these line ...

  2. [20160725]ArithmeticTest

    public class ArithmeticTest{ public static void main(String[] args) { int [] a={1,3,5,7,9,11,13,15}; ...

  3. C#错误之 System.Threading.ThreadAbortException:正在中止线程

    参考:http://www.cnblogs.com/chendaoyin/archive/2013/06/27/3159211.html 1.开启一个子线程 //开启一个子线程,子线程调用方法 Met ...

  4. Python中下划线的使用方法

    本文将讨论Python中下划线(_)字符的使用方法.我们将会看到,正如Python中的很多事情,下划线的不同用法大多数(并非所有)只是常用惯例而已. 单下划线(_) 通常情况下,会在以下3种场景中使用 ...

  5. 如何限制一个类只在堆上分配和栈上分配(StackOnly HeapOnly)

    [本文链接] http://www.cnblogs.com/hellogiser/p/stackonly-heaponly.html [题目] 如何限制一个类只在堆上分配和栈上分配? [代码]  C+ ...

  6. ios 在ios9中 NSNotificationCenter addObserver 不会影响对象释放

    如题,ios9上,  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(test) name:@&qu ...

  7. jira与mysql的配合搭建调整

    jira与mysql数据的整合 第一步:电脑上安装mysql数据库,不做多得解释,自己搞定 第二步: 在mysql数据库中建一个名为 jiradb的数据库,账号 root 密码 root 编码格式 u ...

  8. ACM/ICPC 之 DP-基因相似度(POJ1080-ZOJ1027)

    题意:两端基因片段,各有明确的碱基序列,现有一个碱基匹配的相似度数组,设计程序使得该相似度最大. //POJ1080-ZOJ1027 //题解:将s1碱基和s2碱基看做等长,添加一个碱基为'-',即每 ...

  9. markdown 基本语法

    代码块: ```console.log(1);```--- 标题: # h1## h2### h3 --- 粗斜体: *斜体***粗体*****粗斜体*** --- 强调:`强调` --- 链接:[百 ...

  10. 用基础动画实现iOS控件循环旋转

    - (void)viewDidLoad { [super viewDidLoad]; UIButton* ag=[[UIButton alloc]initWithFrame:CGRectMake(sc ...