svg文本路径爱心动画效果-html代码-BFW代码库

svg文本路径爱心动画效果

代码语言：html

所属分类：表白

代码描述：svg文本路径爱心动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{background: #be0e2e;font-family: consolas; color:white; }
svg {
  
  width: 110vmin;
  display:block;
  position:absolute;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
  z-index:1;
}
text {
  fill: white;
  font-family: consolas;
  font-size: 9px;
}

p{position:absolute;z-index:2}

label{-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;opacity:.8}
</style>

</head>
<body translate="no">
<p><label><input type="checkbox" id="cb" />See the path</label></p>
<svg id="theSvg" viewBox="-120 -30 240 180" enable-background="new 0 0 174 148" xml:space="preserve">
<defs>
<filter id="f" filterUnits="userSpaceOnUse" x="-120" y="-30" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="5" result="shadow"></feOffset>
<feFlood flood-color="rgba(3,0,0,1)" result="color" />
<feComposite in="color" in2="shadow" operator="in" />
<feComposite in="SourceGraphic" />
</filter>
<path id="shape" d="M0, 21.054 
   C0, 21.054 24.618, -15.165 60.750, 8.554 
   C93.249, 29.888 57.749, 96.888 0, 117.388
   C-57.749, 96.888  -93.249, 29.888 -60.750, 8.554
   C-24.618, -15.165  -0, 21.054 -0, 21.054z    
" />
<path id="partialPath" />
</defs>
<text dy="-2" filter="url(#f)">
<textPath xlink:href="#partialPath" startOffset="12">What's in a name? That which we call a rose By any other word would smell as sweet...</textPath>
</text>
<use id="useThePath" xlink:href="#partialPath" stroke="white" stroke-width=".5" stroke-opacity=".5" fill="none" style="display:none;" />
</svg>

<script>
let rid = null; // request animation id
const SVG_NS = "http://www.w3.org/2000/svg";
const pathlength = shape.getTotalLength();

let t = 0; // at the begining of the path
let lengthAtT = pathlength * t;

let d = shape.getAttribute("d");

// 1. build the d array
let n = d.match(/C/gi).length; // how many times

let pos = 0; // the position, used to find the indexOf the nth C

class subPath {
  constructor(d) {
    this.d = d;
    this.get_PointsRy();
    this.previous = subpaths.length > 0 ? subpaths[subpaths.length - 1] : null;
    this.measurePath();
    this.get_M_Point(); //lastPoint
    this.lastCubicBezier;
    this.get_lastCubicBezier();
  }

  get_PointsRy() {
    this.pointsRy = [];
    let temp = this.d.split(/[A-Z,a-z\s,]/).filter(v => v); // remove empty elements
    temp.map(item => {
      this.pointsRy.push(parseFloat(item));
    }); //this.pointsRy numbers not strings
  }

  measurePath() {
    let path = document.createElementNS(SVG_NS, "path");
    path.setAttributeNS(null, "d", this.d);
    // no need to append it to the SVG
    // the lengths of every path in dry
    this.pathLength = path.getTotalLength();
  }

  get_M_Point() {
    if (this.previous) {
      let p = this.previous.pointsRy;
      let l = p.length;
      this.M_point = [p[l - 2], p[l - 1]];
    } else {
      let p = this.pointsRy;
      this.M_point = [p[0], p[1]];
    }
  }

  get_lastCubicBezier() {
    let lastIndexOfC = this.d.lastIndexOf("C");
    let temp = this.d.
    substring(lastIndexOfC + 1).
    split(/[\s,]/).
    filter(v => v);
    let _temp = [];
    temp.map(item => {
      _temp.push(parseFloat(item));
    });
.........完整代码请登录后点击上方下载按钮下载查看