svg基础
2019-06-20 本文已影响0人
locky丶
随着各大浏览器对svg标准支持的越来越完备，svg在网页及移动端成为了前端工程师们的首选。
svg 基础形状
svg基础图形包括圆形、矩形、多边形、直线、折现、绘制路径、文本。
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
理解viewBox
在svg标签上有个很重要的属性我们会经常用到
<svg width="300" height="100" viewBox="0 0 300 100"></svg>
没错，就是viewBox。
viewBox需要设置4个属性，前两位是起始坐标点（0 0），后两位是宽、高 （300 100）。
动画
要让svg元素动起来最好的方式就是使用greensock推出的动效库，可以在cdnjs.com搜索TweenMax.min.js
// html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
</head>
<body>
<div class="round"></div>
</body>
</html>
// stylus
.round
position:absolute
top:140px
left:20px
width:100px
height:100px
border-radius: 50px
background:#F2FF40
// javascript
window.onload = function () {
TweenMax.to(".round", 6, {x:800});
}
