基于css3 clip-path创建文字元素内区域显示，区外隐藏。svg填充火焰动画背景，来制作逼真的火焰文字燃烧动画特效。ps：选一款不错的背景填充很重要！

使用方法

1、head引入css文件

<link rel="stylesheet" href="css/style.css">

2、body引入部分

<div class="contents">
  <div class="svg-wrapper">
    <svg class="svg" width="400" height="200" viewBox="0, 0, 400, 200">
      <clipPath id="svg-clippath">
        <text class="svg__text" x="8" y="51">SVG 绘制</text>
        <text class="svg__text" x="8" y="128">火焰 文字</text>
      </clipPath>
      <image class="js-svg-image" x="0" y="0" width="800" height="200" clip-path="url(#svg-clippath)" xlink:href="img/tex_20190618.png"></image>
    </svg>
  </div>
</div>
 
<script src="js/script.js"></script>

资源出处：https://www.moyublog.com/codes/9341.html