svg描边路径动画
<pre>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<style>

html,body{
width:100%; height:100%;
}
/*1000是线条(path)的长度 stroke-dasharray和stroke-dashoffset的值要一样 stroke-dasharray的值就是每段的长度 stroke-dashoffset每段的偏移值 */
path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 1s linear infinite;
}

@-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.svgdonghua2{
display: none;
}
</style>
</head>
<body>

<div style="width:300px; height:300px;" class="ds">
<svg class="svgdonghua svgdonghua1" version="1.1" id="huaban1" xmlns="http://www.w3.org/2000/svg" width="31rem" height="31rem" viewBox="0 0 167 167" preserveAspectRatio="xMaxYMax meet" >
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M1.2,1.011c1.885-0.986,6.254-0.182,8.395-0.182
c12.128,0,24.256,0,36.383,0c13.245,0,26.49,0,39.735,0c3.012,0,5.487,0.271,8.421,1.165c6.376,1.941,12.309,2.474,18.951,2.665
c5.468,0.157,10.894,0.001,16.298-0.724c4.636-0.622,9.396-0.374,14.094-0.374c6.421,0,12.851-0.041,19.267,0.002
c0.196,24.462,0.439,48.991,0.21,73.474c-0.063,6.69-0.391,13.389-0.367,20.103c0.031,9.434,1.144,18.918-1.417,28.075
c-0.944,3.375-0.21,4.532,0.259,7.825c0.572,4.013,0.765,7.719,0.975,11.732c0.186,3.555,3.401,8.736,0.915,12.164
c-2.479,3.416-8.678,5.368-12.396,6.45c-6.105,1.777-12.556,1.496-18.925,1.563c-6.96,0.074-13.882,0.559-20.823,0.542
c-29.13-0.067-58.268,0.183-87.387,0.183c-4.539,0-9.118,0.193-13.652,0c-1.883-0.08-5.043-0.18-6.566-1.272
c-1.454-1.043-1.981-4.339-2.145-6.046c-0.266-2.767,0.061-5.548-0.264-8.322c-0.352-3.009-0.733-6.372-0.124-9.383
c0.97-4.795,1.534-9.665,2.355-14.517c0.391-2.309,0.553-4.632,0.898-6.944c0.434-2.9,1.448-5.635,1.842-8.542
c1.016-7.5,0.352-15.428,0.352-22.993c0-12.143,0.861-24.604-1.147-36.562C3.297,38.959,2.699,26.44,2.476,14.118
C2.394,9.625,1.047,5.583,1.018,1.193"/>
</svg>
</div>
</pre>

</body>
</html>

ps:svg设置宽度并不能修改里面的宽度 viewBox 167 167是svg原本的宽度和高度 单位是像素 不能去改他 改width和height只能等比例缩放 不能拉伸

更多svg自适应的理解查看 http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

svg描边路径动画的更多相关文章

  1. SVG的路径动画效果

    使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...

  2. SVG描边动画实现过程

    准备工具:Adobe AI+PS 1.确定SVG画布的大小,在PS中切出需要描边效果的区域,以此区域的大小做为SVG容器的大小.   2.将PS中切好的图片直接拖拽到AI中     3.使用AI中的钢 ...

  3. SVG路径动画解密

    原文:SVG路径动画解密 原文链接:http://www.gbtags.com/gb/share/5581.htm SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已, ...

  4. DrawSVG - SVG 路径动画 jQuery 插件

    jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...

  5. SVG描边动画原理

    SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...

  6. css3 svg 物体跟随路径动画教程

    css3 svg 物体跟随路径动画教程https://www.jianshu.com/p/992488f3f3fc

  7. 超级强大的SVG SMIL animation动画详解

    本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...

  8. SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

随机推荐

  1. 【Linux命令】常用系统工作命令11个（echo、date、reboot、poweroff、wget、ps、top、pidof、kill、killall、pkill）

    目录 echo命令 date命令 reboot命令 poweroff命令 wget命令 ps命令 top命令 pidof命令 kill命令 killall命令 pkill命令 一.echo命令 ech ...

  2. Bag of Tricks for Image Classification with Convolutional Neural Networks

    这篇文章来自李沐大神团队,使用各种CNN tricks,将原始的resnet在imagenet上提升了四个点.记录一下,可以用到自己的网络上.如果图片显示不了,点击链接观看 baseline mode ...

  3. WPF 修改Webbrowser的IE版本小程序（32位）

    偶尔用Winform的Webbrowser,但是ie版本太低. 手改改注册表了太慢了. 弄个了程序,修改的代码时网上的,自己就是写了个界面. 支持IE11. XAML页面代码 <Window.R ...

  4. ef core SoftDelete Multi-tenancy 软删除、多租户实现 Global Query Filters

    ef core提供了Global Query Filters特性来实现多租户与软删除,收集了一些实现方法. 最简单的例子时微软官方的特性解释. https://docs.microsoft.com/e ...

  5. MyCat启动失败 Error: Exception thrown by the agent : java.net.MalformedURLException: Local host name unknown: java.net.UnknownHostException: rebirth.a: rebirth.a: unknown error

    在使用Nactive连接MyCat的时候发现怎么连接都不ok,明明已经启动了(实际上启动失败了)! 粗心的我,后来看了下日志,果然,启动失败了 Error: Exception thrown by t ...

  6. Redisson实现分布式锁(3)—项目落地实现

    Redisson实现分布式锁(3)-项目落地实现 有关Redisson实现分布式锁前面写了两篇博客作为该项目落地的铺垫. 1.Redisson实现分布式锁(1)---原理 2.Redisson实现分布 ...

  7. C# ICloneable,shallow clone,deep clone.

    [Serializable] public class Person:ICloneable { public string Name { get; set; } public int Id { get ...

  8. WPF线段式布局的一种实现

    线段式布局 有时候需要实现下面类型的布局方案,不知道有没有约定俗成的称呼,我个人强名为线段式布局.因为元素恰好放置在线段的端点上. 实现 WPF所有布局控件都直接或间接的继承自System.Windo ...

  9. CLRCore(CLR核心机制）

    JIT--第一次--标记已--存根--调用--查找存根--执行机器码 C#和CIL的关系: C#和N#都是CIL实现,但是彼此不能互通: C#和N#公开不分满足规范,我们才能互通 CLS就是描述多语言 ...

  10. E203 CSR寄存器

    RiscV架构则定义了一些控制和状态寄存器(CSR),用于配置或记录一些运行的状态.CSR寄存器是处理器内核内部的寄存器,使用专有的12位地址编码空间,对一个hart,可以配置4k的CSR寄存器. 蜂 ...