<!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. .ctor，.cctor 以及 对象的构造过程

    摘要: .ctor,.cctor 以及 对象的构造过程.ctor:简述:构造函数,在类被实例化时,它会被自动调用.当C#的类被编译后,在IL代码中会出现一个名为.ctor的方法,它就是我们的构造函数, ...

  2. C语言基础学习运算符-逻辑运算符

    逻辑运算符 逻辑运算符是根据表达式的值来返回真值或是假值.C语言中的逻辑运算符就三种,如下表所示: 列如: 更多学习内容,就在码芽网http://www.mayacoder.com/lesson/in ...

  3. weekly review

    鉴于某位昔日工作在我身边的大师一直在写review,所以为了能靠近大师,我也要开始写review了. 无名师曾经说过,想要成为大师的话,要先找到一个大师,然后追随大师,再然后与大师通行,之后成为大师, ...

  4. CSS实现table td中文字的省略与显示

    所谓省略就是把多余的字以“...”显示出来,而显示则是当鼠标移动到td上时,把省略的字重新显示出来.对于一个table,兼容IE与FF.Chrome的省略方式CSS写法: table{ width:2 ...

  5. iOS8之后CoreLocation定位的使用

    在Info.plist文件中添加如下配置: //始终允许访问位置信息 (1)NSLocationAlwaysUsageDescription //使用应用程序期间允许访问位置数据 (2)NSLocat ...

  6. 简单又强大的联发科手机PhilZ Touch Recovery安装器，详细教程 - 本文出自高州吧

    原文地址:http://bbs.gaozhouba.com/thread-19355-1-1.html * * * * * * * * * * * * * * * * * * * * * * * * ...

  7. AnimationDrawable 资源

    AnimationDrawable代表一个动画,Android 既支持传统的逐帧动画(类 似于电影方式,一张图片.一张图片地切换),也支持通过平移.变换计算出来的补间动画. 下面以补间动画为例来介绍如 ...

  8. VitamioBundle-master

    1. 下载资源 (1) 核心插件 VitamioBundle 下载地址:https://github.com/yixia/VitamioBundle (2) 官方示例 VitamioDemo 下载地址 ...

  9. HDOJ 1048 The Hardest Problem Ever(加密解密类)

    Problem Description Julius Caesar lived in a time of danger and intrigue. The hardest situation Caes ...

  10. springMVC+ mongdb + redis +Jedis 环境搭建

    环境信息: JDK1.7 : Eclipse 4.4.1 ; mongdb + mongVUE:mongDB的安装 redis的下载和安装:window下安装redis maven3.0.5 新建ma ...