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

 

posted on 2014-08-25 14:04 bjhhh 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qq21270/p/3934822.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值