!!!常用SVG代码
http://www.w3school.com.cn/svg/svg_examples.asp svg实例
http://www.w3school.com.cn/svg/svg_reference.asp svg元素 2015-6-25
http://www.cnblogs.com/qq21270/p/3421491.html js控制svg例子
http://isux.tencent.com/16292.html 使用SVG中的Symbol元素制作Icon 2015-4-1
http://www.w3cplus.com/svg/why-the-svg-filter-is-awesome.html SVG滤镜的艺术以及它为什么这么棒 2015-6-25
直接放在网页里：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
svg{width:600px;height:400px;border:1px solid #999;}
.abbbb{fill:#ffa;}/*css可控制svg*/
.abccc{fill:#f90;font-size:80px;font-family:"微软雅黑";}
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50%" cy="50%" r="200" fill="#999999" class="abbbb"/>
<text x="0" y="50%" class="abccc" style="font-family:'微软雅黑';font-size:24;">画个圈圈诅咒你</text>
</svg>
</body>
</html>
以图象方式引入：
<style type="text/css">
.img1{width:400px;height:400px;border:1px solid #999;}
</style>
<img src="1.svg" class="img1">
注意：要想正常显示svg效果需要ie10及以上。（svg ie8及以下不支持。svg滤镜 ie9及以下不支持）
优雅降级： http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/
<svg width="96" height="96">
<image xlink:href="http://www.zhangxinxu.com/study/image/svg/svg.svg" src="http://www.zhangxinxu.com/study/image/svg/svg.png" width="96" height="96" />
</svg>
=============================================================
圆形
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- <circle cx="50%" cy="50%" r="48%" stroke="#cc0000" stroke-width="2" fill="#ff0000"/> -->
<circle cx="50%" cy="50%" r="48%" style="stroke:#ff00ff;stroke-width:3;fill:#fafafa"/>
</svg>
圆形（style设定颜色）：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100%" height="100%" xml:space="preserve">
<g>
<!-- <circle fill-rule="evenodd" clip-rule="evenodd" fill="#fafafa" cx="50%" cy="50%" r="50%" style="stroke:#fcfcfc;stroke-width:2"/> -->
<circle fill-rule="evenodd" clip-rule="evenodd" cx="50%" cy="50%" r="48%" style="stroke:#ff0000;stroke-width:3;fill:#fafafa"/>
</g>
</svg>
圆形（circle圆形、clipPath剪裁）
http://www.zhangxinxu.com/wordpress/2014/12/css3-svg-clip-path/ CSS3/SVG clip-path路径剪裁遮罩属性简介
<svg>
<defs>
<clipPath id="clipPath">
<rect x="0" y="0" width="80" height="80" />
</clipPath>
</defs>
<circle cx="60" cy="60" r="50" fill="#34538b" clip-path="url(#clipPath)" />
</svg>
手机图标：目录（三横线）
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="1" x2="16" y2="1" style="stroke:#ffffff;stroke-width:2"/>
<line x1="0" y1="8" x2="16" y2="8" style="stroke:#ffffff;stroke-width:2"/>
<line x1="0" y1="15" x2="16" y2="15" style="stroke:#ffffff;stroke-width:2"/>
</svg>
polyline
对勾（polyline 一系列连接的直线）
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="3,14 8,19 20,7" style="fill:white;stroke:red;stroke-width:5"/>
</svg> <img src="ok.svg" width="24" height="24">
多边形（倒三角）（polyline 一系列连接的直线）
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="15" height="9" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 15,0 7,8" style="fill:#f94325;"/>
</svg>
半星（五角星）（polyline 一系列连接的直线）
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,2 61,36 96,36 67,57 79,92 50,71 20,92 32,57 2,36 39,36 50,2" style="fill:#ff0000;stroke:#ff0000;stroke-width:6;"/>
<polygon points="50,2 61,36 96,36 67,57 79,92 50,71 50,2" style="fill:#ffffff;"/>
</svg>
文字（text）
<style type="text/css">
svg{width:400px;height:400px;border:1px solid #999;}
.abc{fill:#f0f;}
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="0" y="15" fill="red" font-size="20" class="abc">svg里面显示文字。注意这段文字是可以受网页中的css控制的</text>
</svg>
路径文字（text、 path）
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#SVG222").click(function(){
console.dir($(".abccc"));
});
});
</script>
<style type="text/css">
svg{width:600px;height:400px;border:1px solid #999;}
.abccc{fill:#f90;font-size:32px;font-family:"微软雅黑";}
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="SVG222">
<path id="mypath" d="M50 100Q350 50 350 250T450 250" style="fill:none;stroke:red;stroke-width:5;" />
<text x="10" y="20" class="abccc">
<textPath xlink:href="#mypath">路径文字。注意：点击svg后，可以通过console.dir()观看text的属性</textPath>
</text>
</svg>
轮播图，向左、向右大按钮
向左
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="93" height="93" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="48%" stroke="#9e9e9e" stroke-width="2" fill="#ffffff"/>
<polyline points="52,21 33,47 52,73 33,47" style="stroke:#9e9e9e;stroke-width:3"/>
</svg>
向右
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="93" height="93" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="48%" stroke="#9e9e9e" stroke-width="2" fill="#ffffff"/>
<polyline points="41,21 60,47 41,73 60,47" style="stroke:#9e9e9e;stroke-width:3"/>
</svg>
画曲线
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<!--
fill属性是否填充
stroke为绘制，颜色#AAAAAA
stroke-width为绘制线的粗细
d是具体数据，这里看到的数据代表了坐标，以及折线等等，可以使用工具生成
-->
<path fill="none"
stroke = "#AAA"
stroke-width = "2"
d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"
/>
</svg>
http://www.cnblogs.com/qq21270/p/4048383.html 中国地图
阅读：
http://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/ 未来必热：SVG Sprite技术介绍 zxx
http://www.zhangxinxu.com/wordpress/2014/07/svg-sprites-fill-color-currentcolor/ SVG图标颜色文字般继承与填充 zxx
!!!常用SVG代码的更多相关文章
- 工作中总结的常用PHP代码
[目录] ◆PHP常用的代码 ◆HTML常用代码 [值传递 和 引用传递] [单例模式] [魔术常量] [代码调试(自定义一个简单的debug函数)] [thinkphp多表查询] [获取客户端IP地 ...
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- IOS开发效率之为Xcode添加常用的代码片段
IOS开发效率之为Xcode添加常用的代码片段 原文地址:http://blog.csdn.net/pingchangtan367/article/details/30041285 tableview ...
- IOS开发－OC学习－常用功能代码片段整理
IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是 ...
- 记录C#常用的代码片段
时间一久,常用的代码会有点忘记,还是贴在这里方便查找! 1.将信息写入文件中 //将字符串写入到文本中 void writeToText(string msg) { try { msg = DateT ...
- SAP FI CO模块常用事务代码
...
- 73种网页常用Javascript代码
73种网页常用Javascript代码 转载自:前端丶灵魂工程师 1.后退 前进 <input type="button" value="后退" o ...
- legend3---lavarel常用操作代码2
legend3---lavarel常用操作代码2 一.总结 一句话总结: 对于王思cong被执法人的感悟:失意时 莫心伤,得意时 莫膨胀 1.lavarel自动事务? DB::transaction方 ...
- less 经典范例 bootstrap 的 less 版本 常用 less 代码
1. bootstrap 的 less 版本 2.less 文件分布 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011 ...
随机推荐
- 阶段01Java基础day22IO流03
22.01_IO流(序列流) 1.什么是序列流 序列流可以把多个字节输入流整合成一个, 从序列流中读取数据时, 将从被整合的第一个流开始读, 读完一个之后继续读第二个, 以此类推. 2.使用方式 整合 ...
- NOIP2012提高组 Day 2 Problem 2 借教室
原题 题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我 ...
- 51单片机数据类型int,float,指针所占字节数
1.int===2个字节 2.sfr===特殊功能寄存器,也是一种扩充数据类型,占用1个内存单元,利用它可以访问51单片机内的所有特殊功能寄存器. sfr P1 = 0x90;/////////这一句 ...
- SVG的用法
三种添加方式 <iframe src="图的地址" frameborder="0"></iframe> <object width ...
- 二进制安装MySQL数据库
今天安装的是二进制的mysql包5.7.21的包,在配置文件的时候采了好多坑,左后还是搞定了,来和大家分享一下 二进制msyql5.7.21版本的主从复制安装 新建/picclife目录 mkdir ...
- 负载均衡集群相关、LVS介绍、LVS调度算法、LVS NAT模式搭建
1.负载均衡集群相关 2.LVS的三种模式:NAT.DR .IP tunnel 3. LVS的调度算法(共有8种) 4.LVS NAT模式搭建准备条件: 在分发服务器上安装:yum install ...
- cordova日期插件的使用：cordova-plugin-datepicker
1. 添加插件:cordova plugin add cordova-plugin-datepicker; 2.插件的主体样式设置: 3.以上5中样式的截图: THEME_TRADITIONAL的样式 ...
- 第二节《Git暂存区》
在上一节中我们的demo版本库经历了一次提交,我们可以使用git og --stat查看一下提交日志. [root@git demo]# git log --statcommit 986a1bd458 ...
- zombodb 数据类型映射
zombodb 与es 数据类型的映射处理 通用数据类型映射 Postgres 类型 Elasticsearch JSON 映射定义 bytea {"type": "bi ...
- PHP批量保存图片到服务器再上传阿里云
/* * 批量传输产品主图到阿里云 */ public function transferImage(){ $num = 50; $p = isset($this->request->ge ...