zoukankan      html  css  js  c++  java
  • html5 svg动画

    http://www.zhangxinxu.com/sp/svg/

    以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成。

    我们通过以上编辑器可以获得以下代码。

    例:

    <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
    <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
    <g>
    <title>Layer 1</title>
    <path class="path1" fill="#FF0000" stroke="#000000" stroke-width="5" d="m359,273l-179,18l293,82l1,-193l-131,16l16,77z" id="svg_10"/>
    </g>
    </svg>

    给路径path 添加 class 为 path1

    .path1 {
      stroke-dasharray: 20;   //表示虚线描边 该属性把线段变成虚线  数值越大 虚线里每个线段的长度越长
     
    stroke-dashoffset: 1000;//虚线的偏移量
    }

    1.当虚线的小线条足够长,超过图形的整个线条长度时,图像没有什么变化

    整个图像看起来完全不是虚线。只需要将stroke-dasharray属性设置的足够长,超过整个线条的长度。

    2. 给线条设置偏移量,让它不再覆盖整个图形。

    这样你就看不见图形了。

    3. 动态地慢慢将线条的偏移量设置回归到0

    .path1 {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 5s linear forwards;
    }
    
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }

    通过以上代码可以完成图片动画出现

    设置css时可能不知道图形的长度,这个时候通过以下js就可以获取path的长度
    var path = document.querySelector('.path'); var length = path.getTotalLength();
     
  • 相关阅读:
    ArcMAP操作 获取点所在栅格的高程值
    AE代码 积累
    AE 判断点是否在面内
    ArcMAP获取要素的外包多边形
    DEM消除平三角形教程
    博文目录
    Redis哨兵集群部署
    引用-各类数据库整体架构图汇总
    百度数仓Palo-Doris并发压测性能
    引用-Phoenix介绍
  • 原文地址:https://www.cnblogs.com/echolife/p/4915004.html
Copyright © 2011-2022 走看看