!!!常用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 ...

随机推荐

JAVA条件语句：if；switch case
if(布尔表达式) { //如果布尔表达式为true将执行的语句 } 如果布尔表达式为true 执行里面的代码 if...else语句: if(布尔表达式){ //如果布尔表达式的值为true } ...
人群密度估计 CrowdCount
最近在看人群密度估计方面的东西,把博客看到的一些方法简单总结一下,后续继续添加. 1.论文<CrowdNet: A Deep Convolutional Network for DenseCro ...
jar 包启动
java -Xms256m -Xmx512m -Xmn256m -jar /home/apps/video/video.jar --spring.profiles.active=test #!/bin ...
Java容器解析系列(2) 具体化的第一步——Collection到AbstractCollection
在通向具体化的List,Queue之前,我们需要先了解一下Collection接口和AbstractCollection抽象类,这两个都是处于Collection顶层的存在. Collection接口 ...
Rsync,Linux日志及Screen工具介绍
第十六次课 Rsync,Linux日志及Screen工具介绍目录一.rsync工具介绍二.rsync常用选项三.rsync通过ssh同步四. rsync通过服务同步五.linux系统日志 ...
蓝牙协议分析(8)_BLE安全机制之白名单
1. 前言在万物联网的时代,安全问题将会受到非常严峻的挑战(相应地,也会获得最大的关注度),因为我们身边的每一个IOT设备,都是一个处于封印状态的天眼,随时都有被开启的危险.想想下面的场景吧: 凌晨 ...
scrapy初探（一）-斗鱼TV直播信息抓取
由于有相关需求,最近两天开始学了一下scrapy 这次我们就以爬取斗鱼直播间为例,我们准备爬取斗鱼所有的在线直播信息, 包括1.主播昵称 2.直播领域 3.所在页面数 4.直播观看人数 5.直播间ur ...
Linux安装软件出现 “Unable to locate package xxx”错误
使用新购入的阿里云服务器ECS,预装的Ubuntu,然后想要利用 xrdp 进行远程登陆,但是在输入命令: apt-get install xrdp 出现了 E;Unable to locate pa ...
如何用Python写一个每分每时每天的定时程序
1.计算生日是星期几当你女朋友要过生日了,你肯定要定找家饭店订个餐庆祝一下,餐馆工作日会空一些,周末位置不好定,要是能知道她的生日是星期几就好了,下面这个程序就能搞定~~ 比如girl friend ...
ue4 C++ json数据的读写
这是改变恢复机制的json文件的例子 //写入 TSharedPtr<FJsonObject> RootObject = MakeShareable(newFJsonObject); T ...