<!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. javascript权威指南学习笔记2

    Javascript语言核心(2~12章) 第三章:类型.值.变量 1.数字: overflow(Infinity, -Infinity).underflow(+0,-0) 非数字值:它和任何值都不相 ...

  2. 深入Java虚拟机读书笔记第三章安全

    为什么需要安全性 Java的安全模型是其多个重要结构特点之一,它使Java成为适于网络环境的技术.Java安全模型侧重于保护终端用户免受从网络下载的.来自不可靠来源的.恶意程序(以及善于程序中的bug ...

  3. PS抠图神器：KNOCKOUT 2.0

    从优设上转载~~太好用了,保存下来以备不时之需. 本人亲身实践~~先看使用成果~~哈哈~~ 原版图 : 抠过的图: 主要看飘逸的发丝~~~而且全程操作不超过5分钟!! 下载地址: http://vdi ...

  4. Python新手学习基础之数据结构-序列1

    序列概念 序列,顾名思义就是有顺序的列,在Python里序列类型的数据结构包括字符串,列表和元组.既然都是序列类型,说明他们有很多共通点,他们的每一个元素都可以通过指定的偏移量方式(索引操作)来获得, ...

  5. SpringMVC入门1

    SpringMVC核心类与接口 •DispatcherServlet 前端控制器(也称总控制器),把请求给转发到具体的控制类 •HandlerMapping 映射处理器,负责映射中央处理器转发给con ...

  6. 机器学习(1)之梯度下降(gradient descent)

    机器学习(1)之梯度下降(gradient descent) 题记:最近零碎的时间都在学习Andrew Ng的machine learning,因此就有了这些笔记. 梯度下降是线性回归的一种(Line ...

  7. 『GitHub』Git常用命令记录

    Commands: git init 把当前目录变成Git可以管理的仓库 随后出现.git目录,这个目录是Git来跟踪管理版本库的git commit -m "change message& ...

  8. asp.net api 使用SSL 加密登陆 思路

    < ![CDATA[ 1. 首先 是 要设置iis 2.更改站点使用htpps 3.如果使用的是 iis express 4.如果不是使用https访问.就返回提示信息, 这个要写代码了 pub ...

  9. KEIL C51 中嵌入汇编以及C51与A51间的相互调用

    如何在 KEIL C51(v6.21) 中调用汇编函数的一个示例 有关c51调用汇编的方法已经有很多帖子讲到,但是一般只讲要点,很少有对整个过程作详细描述,对于初学者是不够的,这里笔者通过一个简单例子 ...

  10. vmware压缩磁盘空间的方法

    家里笔记本40G,可用空间怎么挤都只剩7G,从单位copy回来的linux虚拟机要10G,经检查实际使用空间5.7,也就是其他都是空余空间,可以释放掉.(只适合independent.Persiste ...