<!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. gdb调试带参数程序(转：笑笑小白，cnblog http://www.cnblogs.com/rosesmall/archive/2012/04/10/2440514.html）

    一般来说GDB主要调试的是C/C++的程序.要调试C/C++的程序,首先在编译时,我们必须要 把调试信息加到可执行文件中.使用编译 器(cc/gcc/g++)的 -g 参数可以做到这一点.如: > ...

  2. WebForm,Winfrom下拉框添加全部行

    WebForm: dropPostalLineNo.DataSource = "数据源";        dropPostalLineNo.DataTextField = &quo ...

  3. PHP5的对象复制

    今天用yii开发程序,一个bug改了一晚上,最后发现问题出在了对象复制机制上,PHP5之前的对象复制只需要$object_a = $object_b即可,但PHP5这样得到的是浅复制,及指针指向,并不 ...

  4. Highcharts中文网

    官网地址: http://www.hcharts.cn/ http://www.hcharts.cn/p/highchartTable.php 名词解释 英文名  中文名 描述  更多 lang 语言 ...

  5. CodeForces 569A 第六周比赛C踢

    C - C Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Statu ...

  6. .NET MVC执行过程

    1.网址路由比对 2.执行Controller与Action 3.执行View并返回结果 在使用MVC中是由IgnoreRoute()辅助方法对比成功的,会导致程序直接跳离MVC的执行生命周期,将程序 ...

  7. Spark SQL Table Join(Python)

    示例   Spark SQL注册“临时表”执行“Join”(Inner Join.Left Outer Join.Right Outer Join.Full Outer Join)   代码   fr ...

  8. 关于SQL的Group By

    SELECT col1, col2, col3, sum(col3) from T1 GROUP BY col1, col2, col3, col4 ; 对于含有Group By的Sql语句,需要注意 ...

  9. [Java] JVM 在执行 main 方法前的行为

    JVM 执行一个 Java 程序时,先从某个指定的 Java 类的 main 方法开始执行代码,同时,传一个字符串数组作为 main 方法的参数.例如在 Unix 系统上,执行下面的命令 java T ...

  10. [转载]Android开发必备的21个免费资源和工具

    转载自: http://blog.csdn.net/shimiso/article/details/6788375 Android移动开发平台现在不是一个“火”字能形容的,今年Android平台在市场 ...