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. mysql+mybatis+存储过程+事务 + 多并发流水号获取

    数据库存储过程 drop PROCEDURE generate_serial_number; CREATE PROCEDURE generate_serial_number( ), IN param_ ...

  2. JavaScript Coding 模式荟萃

    1.自运行的匿名函数 <script type="text/javascript" src="./js/jquery-1.7.2.js"></ ...

  3. phpcms模块开发简易教程

    简介: 在phpcms中,各个功能是以模块为单位定义的(对应modules目录),如果需要新增功能最好的办法就是开发一个模块,然后复制到phpcms目录下,然后进入后台安装即可. 官方说明: phpc ...

  4. 转：js中this关键字详解

    this指向哪里? 一般而言,在Javascript中,this指向函数执行时的当前对象. In JavaScript, as in most object-oriented programming ...

  5. Course Schedule I & II

    There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...

  6. Interleaving Positive and Negative Numbers

    Given an array with positive and negative integers. Re-range it to interleaving with positive and ne ...

  7. 【leetcode】Unique Binary Search Trees

    Unique Binary Search Trees Given n, how many structurally unique BST's (binary search trees) that st ...

  8. gcc-5.4.0 static dwarf2 compile

    ------------------------------------------------------------------------------- 又开始折腾了, 静态编译 gcc-5.4 ...

  9. MAC系统下配置环境变量

    环境变量初始值 /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 使用export 可以设置暂时的环境变量 如果要追加PATH的话添加新的变量到文件中expor ...

  10. 【leetcode】Palindrome Partitioning II(hard) ☆

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...