• <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
      <nav id="xcyjv"></nav>
    1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>

        html svg生成環形進度條的實現方法

          發布時間:2019-09-23 15:41:36   作者:樊一   我要評論
        這篇文章主要介紹了html svg生成環形進度條的實現方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

        之前在項目中遇到一個環形進度條的需求,要求能實時更新進度,腦海中瞬間便蹦出css,svg,canvas3中方案,對于3種方案個人更偏向于svg,用法簡單,代碼量也很少,同時也便于實時控制。具體效果如下圖:

        代碼非常簡單:

        <svg width="150px" height="150px" class="svg">
            <circle r="70" cy="75" cx="75" stroke-width="8" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
            <circle class="progress" r="70" cy="75" cx="75" stroke-width="8" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px"  stroke-dasharray="471px" />
        </svg>

        為了便于演示,我們先用css動畫控制:

        svg {
            transform: rotate(-90deg);
        }
        .progress {
            animation: rotate 1500ms linear both;
        }
        @keyframes rotate {
            from {
                stroke-dashoffset: 471px;
            }
            to {
                stroke-dashoffset: 0px;
            }
        }

        實現原理

        實現原理非常簡單,就是應用svg的stroke-dashoffset和stroke-dasharray屬性。

        stroke-dasharray

        官方解釋為可控制用來描邊的點劃線的圖案范式,即定義虛線每段長度即虛線間間隔,數與數之間用逗號或者空白隔開,指定短劃線和缺口的長度。如果提供了奇數個值,則這個值的數列重復一次,從而變成偶數個值。

        stroke-dashoffset

        標識的是整個路徑的偏移值。

        通過控制虛線的間隔與偏移值,便可以行程各種各樣的線條動畫,當然我們還可以通過js控制,如下:

        let path = document.querySelector('#path');
        // 可獲取路徑的長度
        let len = path.getTotalLength();
        path.style.cssText = `stroke-dasharray:"${number}"`;

        以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

        相關文章

        最新評論

        01彩票网app
      1. <sub id="xcyjv"></sub><nav id="xcyjv"><code id="xcyjv"><meter id="xcyjv"></meter></code></nav>
          <nav id="xcyjv"></nav>
        1. <form id="xcyjv"><th id="xcyjv"></th></form><nav id="xcyjv"><mark id="xcyjv"></mark></nav>
            天水 | 青州 | 安岳 | 张家口 | 安徽合肥 | 崇左 | 阿里 | 盐城 | 甘孜 | 毕节 | 台北 | 娄底 | 宜都 | 巴音郭楞 | 高雄 | 马鞍山 | 灌云 | 汝州 | 铜陵 | 莆田 | 玉溪 | 漳州 | 湖州 | 莱州 | 延边 | 灌南 | 昭通 | 河南郑州 | 宝应县 | 简阳 | 邹城 | 博尔塔拉 | 营口 | 天门 | 益阳 | 靖江 | 日土 | 阿拉善盟 | 改则 | 雅安 | 临猗 | 荆门 | 临海 | 中卫 | 株洲 | 陇南 | 云南昆明 | 宁波 | 吴忠 | 淄博 | 南京 | 馆陶 | 平顶山 | 杞县 | 克拉玛依 | 岳阳 | 佳木斯 | 台山 | 吴忠 | 桐城 | 松原 | 丹东 | 商丘 | 甘孜 | 鄢陵 | 长兴 | 江门 | 伊春 | 南平 | 海南海口 | 赤峰 | 文昌 | 四川成都 | 襄阳 | 金坛 | 甘孜 | 鹤壁 | 丹阳 | 巴彦淖尔市 | 五指山 | 昭通 | 台湾台湾 | 诸暨 | 十堰 | 秦皇岛 | 宜宾 | 天水 | 大兴安岭 | 清徐 | 遂宁 | 娄底 | 嘉峪关 | 朔州 | 建湖 | 丽江 | 牡丹江 | 昭通 | 邵阳 | 广西南宁 | 临汾 | 柳州 | 阳江 | 柳州 | 长治 | 苍南 | 张家界 | 淮安 | 台南 | 新泰 | 中卫 | 五家渠 | 绵阳 | 永州 | 琼海 | 大丰 | 顺德 | 霍邱 | 南阳 | 德宏 | 金华 | 基隆 | 滨州 | 岳阳 | 荆州 | 莱芜 | 镇江 | 安阳 | 诸城 | 荣成 | 泉州 | 阳泉 | 三门峡 | 仁寿 | 七台河 | 张家口 | 博尔塔拉 | 恩施 | 南阳 | 滨州 | 和田 | 绵阳 | 嘉峪关 | 临沧 | 绥化 | 许昌 | 桂林 | 内蒙古呼和浩特 | 凉山 | 宁波 | 马鞍山 | 招远 | 湖州 | 沭阳 | 江苏苏州 | 东阳 | 五家渠 | 渭南 | 三明 | 鞍山 | 自贡 | 陵水 | 黔南 | 保定 | 保定 | 邵阳 | 广饶 | 仁寿 | 宝鸡 | 陕西西安 | 沛县 | 通化 | 大连 | 莆田 | 黔西南 | 随州 | 衡水 | 郴州 | 章丘 | 伊犁 | 海西 | 云南昆明 | 宿迁 | 博罗 | 衡水 | 兴化 | 沧州 | 贵港 | 九江 | 苍南 | 邳州 | 保山 | 甘南 | 包头 | 嘉兴 | 绍兴 | 海拉尔 | 单县 | 南京 | 咸阳 | 牡丹江 | 辽阳 | 眉山 | 贵港 | 海门 | 乐平 | 宿迁 | 台中 | 海丰 | 万宁 | 日喀则 | 昌吉 | 云浮 | 怒江 | 湖州 | 苍南 | 海安 | 迪庆 | 朝阳 | 赤峰 | 基隆 | 阿里 | 晋中 | 图木舒克 | 珠海 | 宁德 | 鄂尔多斯 | 宜都 | 鹤壁 | 姜堰 | 东莞 | 安顺 | 姜堰 | 岳阳 | 阜阳 | 兴化 | 天门 | 贵港 | 宁德 | 宣城 | 资阳 | 汕尾 | 聊城 | 大丰 | 庆阳 | 营口 | 昆山 | 威海 | 仁怀 | 三亚 | 崇左 | 肇庆 | 钦州 | 河北石家庄 | 普洱 | 晋城 | 三亚 | 巴彦淖尔市 | 克孜勒苏 | 神农架 | 德州 | 宁波 | 玉林 | 许昌 | 曲靖 | 温州 | 绵阳 | 厦门 | 张家口 | 涿州 | 克孜勒苏 | 神农架 | 亳州 | 甘肃兰州 | 丹东 | 日喀则 | 莱芜 | 内蒙古呼和浩特 | 海拉尔 | 十堰 | 海拉尔 | 定州 | 营口 | 广州 | 海南海口 | 河北石家庄 | 毕节 | 禹州 | 永康 | 三沙 | 遵义 | 铁岭 | 嘉善 | 广西南宁 | 石狮 | 延边 | 三亚 | 云南昆明 | 江苏苏州 | 诸城 | 芜湖 | 盘锦 | 泉州 | 沧州 | 永州 | 焦作 | 滕州 | 漯河 | 巴彦淖尔市 | 齐齐哈尔 | 梧州 | 惠州 | 芜湖 | 中卫 | 洛阳 | 楚雄 | 连云港 | 简阳 | 山南 | 阜阳 | 固原 | 玉树 | 宜宾 | 株洲 | 玉溪 | 仁怀 | 三门峡 | 丽水 | 达州 | 云南昆明 | 云南昆明 | 南安 | 晋江 | 喀什 | 鹤岗 | 吴忠 | 海拉尔 | 大连 | 沧州 | 黑龙江哈尔滨 | 屯昌 | 临沧 | 乌海 | 泗阳 | 河北石家庄 | 佳木斯 | 肥城 | 鹰潭 | 商丘 | 甘肃兰州 | 镇江 | 涿州 | 海丰 | 马鞍山 | 滁州 | 青海西宁 | 邹平 | 河南郑州 | 清徐 | 图木舒克 | 庄河 | 漯河 | 温岭 | 江西南昌 | 凉山 | 瑞安 | 威海 | 威海 | 杞县 | 广州 | 宿州 | 丽水 | 泰州 | 驻马店 | 深圳 | 临夏 | 东营 | 吉安 | 克孜勒苏 | 山东青岛 | 达州 | 龙口 | 临汾 | 鞍山 | 基隆 | 兴化 | 攀枝花 | 南充 | 雄安新区 | 阜阳 | 漯河 | 吉安 | 鸡西 | 上饶 | 伊犁 | 保山 | 仁寿 | 丽江 | 锡林郭勒 | 咸宁 | 宿迁 | 福建福州 | 毕节 | 湖州 | 武夷山 | 贺州 | 海南海口 | 宜昌 | 乌兰察布 | 鹤岗 | 台山 | 高雄 | 塔城 | 厦门 | 阳春 | 昆山 | 黄南 | 安徽合肥 | 佳木斯 | 来宾 | 台北 | 龙岩 | 百色 | 崇左 | 南京 | 赣州 | 吴忠 | 广安 | 曲靖 | 公主岭 | 仁寿 | 塔城 | 汕尾 | 锦州 | 新余 | 东方 | 嘉兴 | 临沧 | 章丘 | 林芝 | 馆陶 | 周口 | 绵阳 | 金坛 | 邹平 | 海拉尔 | 防城港 | 仙桃 | 保定 | 临沂 | 白山 | 濮阳 | 永州 | 海宁 | 项城 | 项城 | 广西南宁 | 巴彦淖尔市 | 海西 | 莱州 | 淮安 | 鹰潭 | 禹州 | 湘西 | 云南昆明 | 金华 | 喀什 | 张家界 | 淄博 | 昌吉 | 阿拉尔 | 汉川 | 玉环 | 宣城 | 阳泉 | 临沧 | 林芝 | 喀什 | 岳阳 | 金昌 | 南安 | 毕节 | 邢台 | 荆州 | 北海 | 齐齐哈尔 | 定西 | 桐城 | 迁安市 | 博罗 | 三门峡 | 商洛 | 馆陶 | 滕州 | 泉州 | 东阳 | 南通 | 信阳 | 平潭 | 宁国 | 德宏 | 公主岭 | 建湖 | 吉林长春 | 抚州 | 博罗 | 三亚 | 六安 | 抚顺 | 基隆 | 兴化 | 白银 | 天长 | 日土 | 邹城 | 和田 | 章丘 | 毕节 | 长葛 | 大丰 | 大连 | 玉树 | 武夷山 | 大理 | 开封 | 通化 | 吕梁 | 包头 | 荆州 | 吉安 | 常德 | 石狮 | 海西 | 信阳 | 吉林 | 普洱 | 改则 | 鄂州 | 中卫 | 荆门 | 长兴 | 龙岩 | 高雄 | 内江 | 常州 | 桐城 | 洛阳 | 云南昆明 | 湘西 | 阿克苏 | 儋州 | 安岳 | 灵宝 | 定西 | 锦州 | 邹平 | 乐平 | 招远 | 邹城 | 长垣 | 伊春 | 明港 | 郴州 | 焦作 | 克孜勒苏 | 镇江 | 承德 | 铜仁 | 沛县 | 和田 | 荣成 | 衡阳 | 临汾 | 陕西西安 | 燕郊 | 佛山 | 安徽合肥 | 固原 | 韶关 | 枣阳 | 伊犁 | 龙岩 | 寿光 | 汝州 | 平顶山 | 永州 | 山东青岛 | 河南郑州 | 白城 | 石河子 | 阿勒泰 | 鸡西 | 中卫 | 上饶 | 南通 | 楚雄 | 宿州 | 阿勒泰 | 灌南 | 库尔勒 | 龙口 | 克孜勒苏 | 武夷山 | 任丘 | 长葛 | 株洲 | 黄南 | 巴中 | 石河子 | 桐城 | 乌海 | 金昌 | 台山 | 张家界 | 云南昆明 | 海西 | 长治 | 白沙 | 邢台 | 黄冈 | 金华 | 东方 | 海拉尔 | 果洛 | 新泰 | 梅州 | 恩施 | 晋中 | 荆门 | 吉林长春 | 日喀则 | 那曲 | 玉溪 | 日土 | 保亭 | 滨州 | 海南海口 | 厦门 | 建湖 | 鞍山 | 秦皇岛 | 宝应县 | 辽阳 | 海北 | 白山 | 泗阳 | 焦作 | 苍南 | 诸城 | 广汉 | 泰安 | 舟山 | 石嘴山 | 嘉兴 | 澳门澳门 | 山南 | 兴安盟 | 泉州 | 启东 | 玉环 | 迁安市 | 澳门澳门 | 喀什 | 铜川 | 巴音郭楞 | 黄山 | 凉山 | 顺德 | 新乡 | 连云港 | 陇南 | 黔西南 | 台北 | 滁州 | 日照 | 神木 | 台北 | 乐清 | 大兴安岭 | 丹阳 | 聊城 | 义乌 | 广西南宁 | 五家渠 | 如皋 | 芜湖 | 白银 | 张家口 | 忻州 | 台湾台湾 | 巴彦淖尔市 | 石嘴山 | 日喀则 | 公主岭 | 明港 | 长兴 | 张掖 | 绥化 | 宝应县 | 榆林 | 广汉 | 石嘴山 | 长葛 | 淮北 | 惠东 | 涿州 | 霍邱 | 宿州 | 和田 | 嘉善 | 遵义 | 广西南宁 | 保定 | 迁安市 | 长兴 | 天门 | 莒县 | 迁安市 | 咸阳 | 吉林长春 | 攀枝花 | 巴音郭楞 | 宜宾 | 博罗 | 鸡西 | 济南 | 阳泉 | 平潭 | 兴安盟 | 姜堰 | 禹州 | 定西 | 长葛 | 牡丹江 | 四川成都 | 嘉峪关 | 乐平 | 连云港 | 和县 | 黔西南 | 上饶 | 台北 | 岳阳 | 台州 | 沭阳 | 怀化 | 随州 | 商洛 | 濮阳 | 大兴安岭 | 咸阳 | 浙江杭州 | 汉中 | 张北 | 如东 | 仁寿 | 柳州 | 来宾 | 淮北 | 和县 | 武夷山 | 眉山 | 甘孜 | 珠海 | 揭阳 | 鄂尔多斯 | 百色 | 红河 | 乌海 | 崇左 | 衡阳 | 大理 | 防城港 | 乐清 | 屯昌 | 阳泉 | 嘉峪关 | 嘉峪关 | 泗阳 | 海丰 | 兴化 | 湛江 | 基隆 | 海安 | 改则 | 淄博 | 建湖 | 哈密 | 牡丹江 | 阿里 | 和田 | 高密 | 永康 | 宁夏银川 | 新泰 | 澳门澳门 | 威海 | 阿拉尔 | 仁寿 | 长垣 | 安阳 | 信阳 | 牡丹江 | 绵阳 | 博尔塔拉 | 琼海 | 乌兰察布 | 兴安盟 | 枣阳 | 淮南 | 东方 | 如东 | 吕梁 | 克拉玛依 | 偃师 | 盐城 | 大庆 | 新沂 | 梅州 | 莱州 | 如东 | 泰安 | 铜仁 | 南阳 | 黄山 | 南安 | 鹤岗 | 阿拉尔 | 陇南 | 屯昌 | 南通 | 招远 | 宜都 | 昭通 | 运城 | 澳门澳门 | 茂名 | 屯昌 | 焦作 | 台北 | 吉林 | 南充 | 三沙 | 抚顺 | 北海 | 琼中 | 新沂 | 三沙 | 武夷山 | 荆门 | 大兴安岭 | 黑河 | 邵阳 | 常德 | 平顶山 | 泰安 | 池州 | 建湖 | 博尔塔拉 | 灵宝 | 安庆 | 嘉峪关 | 黔西南 | 东海 | 吴忠 | 茂名 | 攀枝花 | 玉环 | 遵义 | 灌南 | 哈密 | 滨州 | 台南 | 潮州 | 赣州 | 伊春 | 临沂 | 邳州 | 本溪 | 海安 | 建湖 | 白沙 | 阿拉善盟 | 海安 | 遵义 | 乌兰察布 | 东营 | 茂名 | 海西 | 岳阳 | 台山 | 黄石 | 安岳 | 周口 | 随州 | 福建福州 | 海丰 | 天长 | 中卫 | 溧阳 | 台中 | 东方 | 海南 | 遂宁 | 铜陵 | 梅州 | 黔东南 | 青州 | 晋江 | 塔城 | 灵宝 | 辽宁沈阳 | 辽源 | 宜都 | 单县 | 天水 | 咸阳 | 湘西 | 扬州 | 中卫 | 金坛 | 昭通 | 宿州 | 黔东南 | 周口 | 云南昆明 | 乌兰察布 | 北海 | 泉州 | 台南 | 海宁 | 庄河 | 石河子 | 临汾 | 赣州 | 绍兴 | 泗洪 | 吕梁 | 昌吉 | 燕郊 | 慈溪 | 泰兴 | 天水 | 汝州 | 燕郊 | 巢湖 | 大连 | 丽水 | 淮北 | 淮安 | 霍邱 | 三亚 | 宜宾 | 台州 | 仙桃 | 攀枝花 | 保定 | 无锡 | 安庆 | 图木舒克 | 眉山 | 日土 | 库尔勒 | 库尔勒 | 兴安盟 | 潮州 | 浙江杭州 | 沭阳 | 秦皇岛 | 漯河 | 阳江 | 安康 | 曲靖 | 内蒙古呼和浩特 | 新余 | 海丰 | 馆陶 | 六盘水 | 武夷山 | 常州 | 鄂尔多斯 | 张家界 | 揭阳 | 章丘 | 石嘴山 | 运城 | 乌兰察布 | 赣州 | 临海 | 揭阳 | 温州 | 锡林郭勒 | 保定 | 昭通 | 肥城 | 姜堰 | 宜春 | 固原 | 唐山 | 海丰 | 雄安新区 | 南充 | 黄冈 | 福建福州 | 盐城 | 塔城 | 晋江 | 保山 | 寿光 | 许昌 | 景德镇 | 吴忠 | 泸州 | 安康 | 湖州 | 果洛 | 本溪 | 汕头 | 克孜勒苏 | 绥化 | 海南海口 | 大庆 | 金坛 | 济南 | 梧州 | 东台 | 赣州 | 鹤岗 | 安吉 | 济宁 | 晋中 | 巴彦淖尔市 | 保定 | 丽江 | 秦皇岛 | 铜陵 | 文山 | 鹤壁 | 玉溪 | 舟山 | 白山 | 甘南 | 甘南 | 徐州 | 垦利 | 浙江杭州 | 黄南 | 怒江 | 普洱 | 黄南 | 邢台 | 图木舒克 | 海南 | 灌南 | 广西南宁 | 基隆 | 六安 | 伊犁 | 随州 | 台南 | 达州 | 天水 | 神木 | 泰安 | 信阳 | 常州 | 临汾 | 海南 | 朔州 | 钦州 | 公主岭 | 巴中 | 邯郸 | 巴中 | 扬州 | 明港 | 文山 | 宜都 | 贵港 | 定州 | 宝应县 |