在我们平常的开发过程中,经常会用到svg来画图,并且它拥有非常多的好处
- 更小的体积
- 可伸缩
- 可在任何分辨率下完美打印
svg的学习
一、svg的引入方式
- 直接引入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 t="1630916331199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3229" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896.17 438.37m0 50.06l0 325.33q0 50.06-50.06 50.06l-30.38 0q-50.06 0-50.06-50.06l0-325.33q0-50.06 50.06-50.06l30.38 0q50.06 0 50.06 50.06Z" fill="#E9F1FF" p-id="3230"></path><path d="M609 438.36m0 50.06l0 325.33q0 50.06-50.06 50.06l-30.38 0q-50.06 0-50.06-50.06l0-325.33q0-50.06 50.06-50.06l30.38 0q50.06 0 50.06 50.06Z" fill="#E9F1FF" p-id="3231"></path><path d="M320.06 438.36m0 50.06l0 325.33q0 50.06-50.06 50.06l-30.38 0q-50.06 0-50.06-50.06l0-325.33q0-50.06 50.06-50.06l30.38 0q50.06 0 50.06 50.06Z" fill="#E9F1FF" p-id="3232"></path><path d="M270 895.92h-91.88a82.15 82.15 0 0 1-82.06-82.06V402a82.14 82.14 0 0 1 82.06-82.05H270A82.14 82.14 0 0 1 352.06 402v411.86A82.15 82.15 0 0 1 270 895.92z m-91.89-512A18.07 18.07 0 0 0 160.06 402v411.86a18.08 18.08 0 0 0 18.06 18.06H270a18.08 18.08 0 0 0 18.05-18.06V402A18.07 18.07 0 0 0 270 383.92zM558.94 895.92h-91.89A82.15 82.15 0 0 1 385 813.86V402a82.14 82.14 0 0 1 82.05-82.05h91.89A82.14 82.14 0 0 1 641 402v411.86a82.15 82.15 0 0 1-82.06 82.06z m-91.89-512A18.07 18.07 0 0 0 449 402v411.86a18.08 18.08 0 0 0 18.05 18.06h91.89A18.08 18.08 0 0 0 577 813.86V402a18.07 18.07 0 0 0-18.06-18.05zM846.12 895.92h-91.89a82.14 82.14 0 0 1-82.05-82.06V402a82.13 82.13 0 0 1 82.05-82.05h91.89A82.14 82.14 0 0 1 928.18 402v411.86a82.15 82.15 0 0 1-82.06 82.06z m-91.89-512A18.07 18.07 0 0 0 736.18 402v411.86a18.08 18.08 0 0 0 18.05 18.06h91.89a18.08 18.08 0 0 0 18.06-18.06V402a18.07 18.07 0 0 0-18.06-18.05z" fill="#2C5CCB" p-id="3233"></path><path d="M511.33 360.36a32 32 0 0 1-32-32V191.89H274.11a18.08 18.08 0 0 0-18.06 18.05v118.42a32 32 0 0 1-64 0V209.94a82.15 82.15 0 0 1 82.06-82h237.22a32 32 0 0 1 32 32v168.42a32 32 0 0 1-32 32z" fill="#2C5CCB" p-id="3234"></path><path d="M800.15 360.37a32 32 0 0 1-32-32v-118.4a18 18 0 0 0-18.05-18.06H509.51a32 32 0 0 1 0-64h240.63A82 82 0 0 1 832.19 210v118.4a32 32 0 0 1-32.04 31.97z" fill="#2C5CCB" p-id="3235"></path></svg>
- img标签引入
<img src="1.svg">
3.iframe引入
<iframe src="1.svg" width="300" heigth="300"></iframe>
4.object标签引入,与iframe类同
<object data="1.svg" type="images/svg+xml"></object>
5.embed标签引入
<embed src="1.svg" type="images/svg+xml">
二、语法
1.svg标签 SVG代码都放在svg标签中
<svg width="100%" height="100%">
<circle id="mycircle" cx="50" cy="50" r="50" fill="orange"/>
</svg>
//如果不指定宽高,默认就是300*150
==如果只想展示一部分,就要设置viewbox==, 分别对应横坐标,纵坐标,高,宽
<svg width="100%" height="100%" viewbox="50,50,50,50">
<circle id="mycircle" cx="50" cy="50" r="50" fill="orange"/>
</svg>
2、定义样式,使用class
<style>
.bgBlue{
fill : skyblue;
stroke : orange;//描边的颜色
stroke-width:3px;//描边的宽度
}
</style>
<svg width="100" height="100">
<circle id="mycircle" cx="50" cy="50" r="50" class="bgBlue"/>
</svg>
3.画线标签
line标签,x1,y1,代表起点坐标,x2,y2代表终点坐标
<svg>
<line x1="0" y1="0" x2="200" y2="200" style="rgba(0,0,0);stroke-width="5"></line>
</svg>
polyline标签 points代表每个端点的坐标
<polyline points="3,3,50,28,3,53" fill="none" stroke="black"></polyline>
rect标签
<svg width="100" height="100">
<rect x="0" y="0" width="200" style="stroke:pink;fill:blue;></rect>
</svg>
ellipse标签,椭圆标签
<svg width="100" height="100">
<ellipse cx="0" cy="0" r="50" style="stroke:pink;fill:blue;></rect>
</svg>
polygon标签,用于绘制多边形,points 里面就是坐标的值,用空格隔开
<svg width="400" height="400">
<polygon fill="green" stroke="green" stroke-width="1" points="0,0
"></polygon>
</svg>
path标签,用于绘制路径, d属性表示绘制顺序,每个字母表示一个绘制动作
- M: 移动到(moveto)
- L:画直线到(lineto)
- Z: 闭合路径
<svg width="400" height="400">
<path
d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
Z
"
></path>
</svg>
text标签,用于绘制文本
<svg width="400" height="400">
<text x="50" y="25">Hello World</text>
</svg>
use标签,用于复制一个形状, xy是复制后放置的位置坐标
<svg width="100" height="100">
<circle id="mycircle" cx="50" cy="50" r="50" class="bgBlue"/>
<use href="#mycircle" x="20" y="20"></use>
</svg>
g标签 组的概念,用于多个形状组成一个组(group),可以用use标签使用
<svg width="100" height="100">
<g id="miqi">
<circle id="mycircle" cx="50" cy="50" r="50"/>
<circle id="mycircle" cx="50" cy="50" r="50"/>
<circle id="mycircle" cx="50" cy="50" r="50"/>
</g>
<use href="#miqi" x="300" y="300"></use>
</svg>
defs标签 自定义形状,它内部的代码不会显示,仅供使用
<svg width="100" height="100">
//用这个标签包住的代码不会显示
<defs>
<g id="miqi">
<circle id="mycircle" cx="50" cy="50" r="50"/>
<circle id="mycircle" cx="50" cy="50" r="50"/>
<circle id="mycircle" cx="50" cy="50" r="50"/>
</g>
</defs>
<use href="#miqi" x="300" y="300"></use>
</svg>
pattern标签,用于平铺
<svg width="500" height="500">
<defs>
<pattern id="pingpu" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="20" fill="#9370DB"/>
</pattern>
</defs>
<rect x="0" y="0" fill="url(#pingpu)" width="300" height="300"></rect>
</svg>
image标签 引入图片
<svg width="500" height="500">
<image xlink:href="./images/coffee.jpg" width="100" height="100"/>
</svg>
animate 标签 动画
- animate的属性含义如下
- attributeName : 发送动画效果的属性名
- from : 单词动画的初始值
- to : 单词动画的结束值
- dur : 单词动画的持续时间
- repeatCount :动画的循环模式 无限循环用indefinite
<svg width="500" height="500">
<rect x="0" y="0" width="100" height="100" fill="red">
<animate attributeName="fill" from="red" to="skyblue" dur="2s" repeatCount="indefinite">
</animate>
</rect>
</svg>
animateTransform标签
animate标签对css的transfrom属性不起作用,如果需要变形,要使用animateTransform标签
<svg width="500" height="500">
<rect x="0" y="0" width="100" height="100" fill="red">
<animateTransfrom attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite">
</animateTransfrom>
</rect>
</svg>
==做一个圆形进度条==
<svg width="700" height="700">
<!--设置底色的圆环-->
<circle cx="350" cy="350" r="300" fill="none" stroke="grey" stroke-width="40" stroke-linecap="round"></circle>
<!--设置进度条-->
<circle class="progress" transform="rotate(-90,350,350)" class="progress" cx="350" cy="350" r="300" fill="none" stroke="red" stroke-width="40" stroke-linecap="round" stroke-dasharray="0,10000"></circle>
<!--设置文本-->
<text class="text" x="350" y="350" font-size="200" fill="red">0</text>
</svg>
//javescript
//获取dom操作
let progressDom = document.querySelector(".progress");
let textDom = document.querySelector(".text");
function rotateCircle(percent){
//获取svg圆环总长,通过获取半径长度算出总长
var circleLength = Math.floor(2*Math.PI * parseFloat(progressDom.getAttribute("r")))
//按照百分比,算出进度环的长度
var value = percent*circleLength/100;
console.log("value",);
//红色的rgb值 是255,0,0
//蓝色的是 0,191,255
let r = 255 + parseInt((0-255)/100*percent);
let g = 0 + parseInt((199-0)/100 * percent);
let b = 0 + parseInt((255-0)/100 * percent);
//stroke-dasharray第一个参数相当于长度
progressDom.setAttribute("stroke-dasharray",value + ",10000");
progressDom.setAttribute("stroke",`rgb(${r},${g},${b})`);
textDom.innerHTML = percent + '%';
textDom.setAttribute("fill",`rgb(${r},${g},${b})`);
}
//每100毫秒调用一次
let time = 0;
let interval = null;
interval = setInterval(()=>{
if(time < 100){
time +=1;
}else{
clearInterval(interval)
}
rotateCircle(time)
},100)