<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        html,body{margin:0px;padding:0px;height: 100%;}

        #my-svg{

            position:relative;

            height: 100%;

            width: 100%;

        }

    </style>

</head>

<body>

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

    <!--线-->

    <line x1="60" y1="20" x2="260" y2="40" stroke="red" stroke-width="4"></line>

    <!--矩形-->

    <rect id="changePosition" x="20" y="20" rx="5" ry="5" width="30" height="30" fill="#e0e0e0" />

    <rect id="changeSize" x="20" y="60" rx="5" ry="5" width="30" height="30" fill="lightgray" />

    <rect id="changeOpacity" x="20" y="100" rx="5" ry="5" width="30" height="30" fill="lightgray" />

    <!--圆形-->

    <circle cx="200" cy="200" r="50" stroke-width="2" stroke="#e0e0e0" fill="#E022FF">

        <set attributeName="fill" from="#E022FF" to="#FF220E" begin="mouseover" end="mouseout"></set>

        <set attributeName="cx" from="200" to="300" begin="changePosition.mouseover" end="changePosition.mouseout"></set>

        <set attributeName="r" from="50" to="80" begin="changeSize.mousedown" end="changeSize.mouseup"></set>

        <animate attributeName="opacity" to="0" begin="changeOpacity.mouseover" dur="1s" fill="freeze"></animate>

        <animate attributeName="opacity" to="1" begin="changeOpacity.mouseout" dur="1s" fill="freeze"></animate>

    </circle>

    <!--椭圆-->

    <ellipse cx="400" cy="300" rx="50" ry="30" stroke="#e0e0e0" stroke-width="2" fill="#FF0000"></ellipse>

    <!--多边形-->

    <polygon  points="400,20 450,50 425,90 375,90, 350,50" stroke="#e0e0e0" stroke-width="2" fill="#E942c0"></polygon>

    <!--多边-->

    <polyline points="400,120 450,150 425,190 375,190, 350,150" stroke="#cccccc" stroke-width="2" fill="white"></polyline>

    <!--路径-->

    <path d="M153 334

C153 334 151 334 151 334

C151 339 153 344 156 344

C164 344 171 339 171 334

C171 322 164 314 156 314

C142 314 131 322 131 334

C131 350 142 364 156 364

C175 364 191 350 191 334

C191 311 175 294 156 294

C131 294 111 311 111 334

C111 361 131 384 156 384

C186 384 211 361 211 334

C211 300 186 274 156 274" stroke="#FF0000" fill="white" stroke-width="1"></path>

</svg>

</body>

</html>

svg学习笔记的更多相关文章

  1. 8. svg学习笔记-文本

    毫无疑问,文本也是svg中组成的重要部分,在svg中,用<text>元素来创建文本,文本的使用格式如下: <text x="20" y="30" ...

  2. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  3. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  4. svg的基本图形与属性【小尾巴的svg学习笔记1】

    因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径 ...

  5. svg学习笔记（一）

    SVG——可扩展适量图形,基于XML PC端:IE9+   wap端:表现良好,适合使用 基础图形: line(线段)  <line x1="25" y1="150 ...

  6. svg学习笔记（二）

    SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w ...

  7. 9. svg学习笔记-裁剪和蒙版

    裁剪 在svg中进行剪切,对整个svg元素而言,可以使用<svg>元素的viewbox属性,对于单个元素则可以使用<clipPath>元素.在单个图形元素上使用裁剪,可以在&l ...

  8. 7. svg学习笔记-图案和渐变

    之前,我们仅仅使用纯色来为图形填充颜色和绘制轮廓,除此之外,我们还可以使用图案和渐变来填充图形或者是绘制轮廓. 图案 图案的效果类似于,在网页中给一个元素指定背景图像,当背景图像的尺寸小于元素的尺寸的 ...

  9. 6. svg学习笔记-路径

    路径相比于多边形<polygon>元素具有更强绘图能力,<polygon>元素可以绘制任意的多边形,而路径可以绘制任意的轮廓线,是线段,曲线,圆弧的组合形式.svg中可以使用& ...

随机推荐

  1. Win7下安装Ubuntu双系统常见问题

    [转自己以前的文章] 导航: ● win7下硬盘安装ubuntu常见问题 ●  win7下u盘安装ubuntu常见问题 吐槽: Ubuntu的安装花了我将近15个小时,网上常见的.不常见的问题基本我都 ...

  2. fedora20 播放aiv视频

    环境:fedora20 64位 下载个教程是avi的格式,用FEDORA自带的视频播放提示少插件,搜索又没有.  到网上搜索后,参考下面的方式添加软件仓库后,再打开视频播放顺利装好插件.但视频画件一闪 ...

  3. ES聚合实例

    在es中需要根据app_categor进行聚合,JSON查询语句如下: { "query": { "bool": { "must": [ { ...

  4. 测试和恢复性的争论：面向对象vs.函数式编程

    Michael Feathers最近的博文在博客社区引发了一场异常激烈的论战.Feathers发表言论说一些面向对象编程语言的内嵌特性有助于测试的进行,并且使用面向对象编程语言编写的代码更容易恢复. ...

  5. "类名.this"与"this"的区别

    "this"是指(或者说:所代表的是)当前这段代码所在的类的对象.而"类名.this"是指"类名"的对象(一般在匿名类或内部类中使用来调用外 ...

  6. C++访问权限【原创】

    可以访问private的有:1.本类的函数:2.友元函数.   可以访问protected的有:1.本类的函数:2.子类函数:3.友元函数.   可以访问public的有:1.本类的函数和对象:2.子 ...

  7. X-SCAN扫描器插件(MYSQL弱口令以及Mongodb未授权)

    因为在很多时候的内网扫描里面没有授权的WIN的好用的,稍微小点的弱口令扫描器(生成报告,多种服务),编译成了插件,再自己弄了个MONGODB的扫描插件用着. X-SCAN加载以后: MONGODB.p ...

  8. Couchbase 上手nosql for .net

    由于项目需要,准备上手nosql数据库,比对了一番之后终于决定使用 couchbase.好了开始吧: 安装 地址:http://www.couchbase.com/get-started-develo ...

  9. android手机游戏开发Cocos2d-x开发分享

    我想现在应该没有人没有玩过手机游戏了吧,当然所有人都玩过,但不是所有人都知道怎么去开发手机游戏,因为许多人都感觉做开发是一件很困难的事儿,身边的朋友也对此感觉难度很大.但是,现在我可以告诉你,手机游戏 ...

  10. BZOJ2749: [HAOI2012]外星人

    2749: [HAOI2012]外星人 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 377  Solved: 199[Submit][Status] ...