目录

SVG 学习<一>基础图形及线段

SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

SVG 学习<三>渐变

SVG 学习<四> 基础API

SVG 学习<五> SVG动画

SVG 学习<六> SVG的transform

SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

(转)利用 SVG 和 CSS3 实现有趣的边框动画

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

svg标签用来绘制sgv图片(矢量图);
svg和H5中的canvas类似,svg也可以绘制任意图形或文字;

svg标签默认大小为 300 * 150,svg也可设置css样式任意定义大小,颜色,边框,背景色等等;

注:svg默认为行级标签

绘制svg图形仅仅能在svg标签内显示,超出部分不会被显示;
  举个例子,若svg为300 * 150,rect则为 600 * 300那么矩形只会显示300 * 150的大小

矩形

HTML代码

<svg class="svg">
<rect class="rect" />
</svg>

rect 绘制矩形

CSS代码

.rect{
width:200px;
height:200px;
x:20px; /*x轴距*/
y:30px; /*y轴距*/
/*x,y皆以SVG左上角点为起始 及 svg左上角点左边为0,0*/
fill:rgb(0,0,255); /*填充色(同背景色)*/
stroke-width:; /*笔触宽度(边框宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(边框颜色)*/
fill-opacity:.8; /*填充色透明度(背景透明度)*/
stroke-opacity:.5; /*笔触透明度(边框透明度)*/
rx:20px; /*x轴弧度*/
ry:50px; /*y轴弧度*/
}

圆形

HTML代码

<svg class="svg">
<circle class="circle" />
</svg>

circle绘制圆形

css代码

.circle{
cx:100px; /*圆心x轴距*/
cy:100px; /*圆心y轴距*/
fill:rgb(0,0,255); /*填充色(同背景色)*/
stroke-width:; /*笔触宽度(边框宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(边框颜色)*/
r:80px; /*半径*/
}

椭圆

HTML代码

    <svg class="svg">
<ellipse class="ellipse" />
</svg>

ellipse绘制圆形

CSS代码

.ellipse{
cx:300px; /*圆心x轴距*/
cy:150px; /*圆心y轴距*/
rx:200px; /*x轴半径*/
ry:100px; /*y轴半径*/
fill:rgb(0,0,255); /*填充色(同背景色)*/
stroke-width:; /*笔触宽度(边框宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(边框颜色)*/
}

直线

HTML代码

    <svg class="svg">
<line x1="2" y1="5" x2="90" y2="180" class="line" />
</svg>

line绘制直线,x1 y1直线起点坐标, x2  y2 直线终点坐标,注意,x1 y1 x2 y2是标签属性,且不可在css中生效。

CSS代码

.line{
stroke-width:; /*笔触宽度(直线宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(直线颜色)*/
}

多边形

HTML代码

    <svg class="svg">
<polygon points="100,10 40,180 190,60 10,60 160,180" class="polygon" />
</svg>

polygon表示对变形

CSS代码

.polygon{
stroke-width:; /*笔触宽度(边框宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(边框颜色)*/
fill:rgb(255,0,255); /*填充色(同背景色)*/
fill-rule:evenodd; /*填充规则*/
}

fill-rule为填充色规则,evenodd 类似table的隔行变色。

折线

HTML代码

    <svg class="svg">
<polyline points="100,10 40,180 190,60 10,60 160,180" class="polygon" />
</svg>

CSS代码

.polygon{
stroke-width:; /*笔触宽度(线段宽度)*/
stroke:rgb(0,255,0); /*笔触颜色(线段颜色)*/
fill:none;
}

折线和多边形几乎一样,折线标签是polyline 多边形是polygon 。

本文介绍svg的几个基本图形和线段。下一篇介绍svg进阶玩法。

SVG 学习<一>基础图形及线段的更多相关文章

  1. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  2. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  4. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  5. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG 学习<三>渐变

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  9. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

随机推荐

  1. C#:匿名类型

    匿名类型和var关键字是Visual C# 3.0提供的一个新特性,var是隐式类型而并不是类型javascript中的var. var user = new { Id = 1, Name = &qu ...

  2. F5负载均衡原理

    一. 负载均衡技术 负载均衡技术在现有网络结构之上提供了一种廉价.有效.透明的方法,来扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用性. 1.负载均衡发生的流程图 ...

  3. MAC JDK默认安装路径 JAVA路径

    打开终端,执行     /usr/libexec/java_home -V 默认JDK1.6(Apple自带JDK)路径:   /System/Library/Java/JavaVirtualMach ...

  4. Windows 消息【二】窗口函数

    前一篇文章讲到非队列消息会直接把消息Dispatch到窗口函数上,窗口函数长什么样? //就是一个大case分支 //要想拦截消息,override窗口函数是一个办法! procedure TCust ...

  5. 【springboot】之整合ActiveMQ

    1.引入依赖的jar <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...

  6. python之全局安装包管理工具pip

    1.curl 'https://bootstrap.pypa.io/get-pip.py' > get-pip.py 2.sudo python get-pip.py 3.sudo easy_i ...

  7. 关于Eclipse无法显示package Explorer 内容的解决方法

    今天电脑不知道怎么搞的抽风了, package explorer等内容完全无法显示.用window->view方法手动添加还是setpreView都没有办法解决. 网上搜了半天也没有解决办法.无 ...

  8. 阿里云服务器 ECS Linux SWAP 配置概要说明

    SWAP 简介 Linux 中的 SWAP(交换分区),类似于 Windows 的虚拟内存.系统会把一部分硬盘空间虚拟成内存使用,将系统内非活动内存换页到 SWAP,以提高系统可用内存. 注:参阅 E ...

  9. MyBatis的入门案例

    1.MyBatis的结构 2.MyBatis入门案例 a.创建java项目,并在其中导入相关开发包 b.导入约束文件 http://mybatis.org/dtd/mybatis-3-config.d ...

  10. Feign api调用方式

    Feign使用简介 基本用法 基本的使用如下所示,一个对于canonical Retrofit sample的适配. interface GitHub { // RequestLine注解声明请求方法 ...