svg学习记录

最新推荐文章于 2024-06-24 10:16:50 发布

前端小甜

最新推荐文章于 2024-06-24 10:16:50 发布

阅读量94

点赞数

文章标签：前端 svg

本文链接：https://blog.csdn.net/qq_45226846/article/details/122015652

版权

1、svg 对比 canvas

svg：本质是文本文件；不是基于像素的。所以无论放大多少倍都不会模糊。
canvas：本质是图片；基于像素。放大会模糊。

2、svg实现环形进度条

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg-环形进度条</title>
  <style>
    body{
      text-align: center;
    }
    .text{
      text-anchor: middle;
      dominant-baseline:middle;
    }
  </style>
</head>
<body>
  <svg width="500" height="500">
    <circle cx="250" cy="250" r="200" fill="none" stroke="grey" stroke-width="40" stroke-linecap="round" />
    <!-- stroke-dasharray="0,10000" 第一个表示虚线长度 ，第二个表示虚线直接的距离 【这样足够远，我们只能看到一条虚线,只需要调整虚线长度就可以啦】-->
    <circle class="progress" cx="250" cy="250" r="200" fill="none" stroke="red" stroke-width="40" stroke-linecap="round" stroke-dasharray="0,10000" />
    <text class="text" x="250" y="250" font-size="100" fill="red" >0%</text>
  </svg>

  <script>
    let progress = document.getElementsByClassName('progress')[0]
    let txt = document.getElementsByClassName('text')[0]

    function loading(persent){
      // 获取svg圆环周长
      let zc = Math.floor(2*Math.PI*parseFloat(progress.getAttribute("r")))
      // 按照百分比,算出当前环的长度
      let curLen = persent*zc/100
      // 算出颜色
      let red = 255 + parseInt((0-255)/100*persent)
      let green = 0 + parseInt((191-0)/100*persent)
      let blue = 0 + parseInt((255-0)/100*persent)
      let rgb = `rgb(${red},${green},${blue})`
      // 设置环的长度
      progress.setAttribute("stroke-dasharray",curLen+",10000")
      // 修改文字
      txt.innerHTML = persent +'%'
      // 设置颜色
      progress.setAttribute("stroke",rgb)
      txt.setAttribute("fill",rgb)
    }
    let present=0
    setInterval(() => {
      if(present>=100){present=0}
      present+=1
      loading(present)
    }, 30);
  </script>
</body>
</html>

效果展示：
在这里插入图片描述

前端小甜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg学习记录

1、svg 对比 canvassvg：本质是文本文件；不是基于像素的。所以无论放大多少倍都不会模糊。canvas：本质是图片；基于像素。放大会模糊。2、svg实现环形进度条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
复制链接

扫一扫