常⽤SVG代码
直接放在⽹页⾥：
svg图<!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="/2000/svg" xmlns:xlink="/1999/xlink">
<circle cx="50%" cy="50%" r="200" fill="#999999" class="abbbb"/>
<text x="0" y="50%" class="abccc" >画个圈圈诅咒你</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及以下不⽀持）
<svg width="96" height="96">
<image xlink:href="www.zhangxinxu/study/image/svg/svg.svg" src="www.zhangxinxu/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" "/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="/2000/svg">
<!-- <circle cx="50%" cy="50%" r="48%" stroke="#cc0000" stroke-width="2" fill="#ff0000"/> -->
<circle cx="50%" cy="50%" r="48%" />
</svg>
圆形（style设定颜⾊）：
<svg version="1.1" xmlns="/2000/svg" xmlns:xlink="/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%" /> --> <circle fill-rule="evenodd" clip-rule="evenodd" cx="50%" cy="50%" r="48%" />
</g>
</svg>
圆形（circle圆形、clipPath剪裁）
<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" "/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="16" height="16" version="1.1" xmlns="/2000/svg">
<line x1="0" y1="1" x2="16" y2="1" />
<line x1="0" y1="8" x2="16" y2="8" />
<line x1="0" y1="15" x2="16" y2="15" />
</svg>
polyline
对勾（polyline ⼀系列连接的直线）
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="/2000/svg">
<polyline points="3,14 8,19 20,7" />
</svg>
<img src="ok.svg" width="24" height="24">
多边形（倒三⾓）（polyline ⼀系列连接的直线）
<svg width="15" height="9" version="1.1" xmlns="/2000/svg">
<polygon points="0,0 15,0 7,8" />
</svg>
半星（五⾓星）（polyline ⼀系列连接的直线）
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="100" version="1.1" xmlns="/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" /> <polygon points="50,2 61,36 96,36 67,57 79,92 50,71 50,2" />
</svg>
⽂字（text）
<style type="text/css">
svg{width:400px;height:400px;border:1px solid #999;}
.abc{fill:#f0f;}
</style>
<svg version="1.1" xmlns="/2000/svg" xmlns:xlink="/1999/xlink">
<text x="0" y="15" fill="red" font-size="20" class="abc">svg⾥⾯显⽰⽂字。注意这段⽂字是可以受⽹页中的css控制的</text>
</svg>
路径⽂字（text、 path）
<script src="cdn.bootcss/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="/2000/svg" xmlns:xlink="/1999/xlink" id="SVG222">
<path id="mypath" d="M50 100Q350 50 350 250T450 250" />
<text x="10" y="20" class="abccc">
<textPath xlink:href="#mypath">路径⽂字。注意：点击svg后，可以通过console.dir()观看text的属性</textPath>
</text>
</svg>
轮播图，向左、向右⼤按钮
向左
<svg width="93" height="93" version="1.1" xmlns="/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" />
</svg>
向右
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="93" height="93" version="1.1" xmlns="/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" />
</svg>
画曲线
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="/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>
阅读：
posted on 2014-08-25 14:04 阅读( ...) 评论( ...)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论