<!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. indexof()方法

    w3c手册定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置 stringObject.indexOf(searchvalue,fromindex) searchva ...

  2. window.location.href/replace/reload()--页面跳转+替换+刷新

    一.最外层top跳转页面,适合用于iframe框架集 top.window.location.href("${pageContext.request.contextPath}/Login_g ...

  3. elasticsearch 安装

    ### USAGE ### ### ./ElasticSearch.sh 1.5.0 will install Elasticsearch 1.5.0 ### ./ElasticSearch.sh 1 ...

  4. 运维小东西：每天备份sql到远程服务器上

    首先两台服务器可以无密码登录(这个方式比较简单,当然安全系数会降低) #ssh-keygen -t rsa #生成密钥发送给远程服务器上 #ssh-copy-id ~/root/id_rsa.pub ...

  5. Extjs4.1.x使用Application动态按需加载MVC各模块

    我们知道Extjs4之后提出了MVC模块开发,将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等],通过controller拼接黏合, ...

  6. ClipDrawable 资源

    ClipDrawable 代表从其他位图上截取的一个“图片片段”. 示例: main.xml <?xml version="1.0" encoding="utf-8 ...

  7. POJ Round Numbers(数位DP)

    题目大意: Round Number:  将一个整数转化为二进制数字后,(不含前导0) 要是0的个数 大于等于1的个数 则是 Round Number 问从L-R之中有多少个Round Number ...

  8. ubuntu14.04 为Firefox安装flash插件

    Ubuntu系统装好后,发现火狐浏览器播放不了视频,一直提示安装flash,但按照火狐浏览器上的提示Flash插件安装总是失败,那就只能手动安装了. (1) 去flash官网:http://get.a ...

  9. 【最短路】Vijos P1046 观光旅游

    题目链接: https://vijos.org/p/1046 题目大意: 给n个点(n<=100),m条无向边(m<=10000),问这张图的最小环长度. (注意:无自环,同一个点对之间的 ...

  10. 蓝牙4.0 BLE 开发

    在BLE开发中的一些随记,供大家参考: 凡事皆有状态 低功耗蓝牙背后有个基本的概念:任何事务都有状态.状态可以是任何东西:当前的温度,设备里电池的状态,设备名称或者对测量温度的地点的描述.它通过属性服 ...