CSS & SVG foreignObject 实现文字镂空波浪动画

之前看过一篇文章：CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果，非常巧妙，将 CSS 动画融入文本内部，主要利用了混合模式，效果是这样的

Kapture 2022-02-24 at 11.09.36

为什么要用到混合模式呢？因为这是文本，文本内部不可能放入 HTML 节点，所以下面介绍将另一种方式，在 HTML 完全受限的情况下，借助 SVG foreignObject 也能很轻松的实现这一效果，而且会有更好的效果，一起看看吧

一、SVG foreignObject 是什么

首先， foreignObject 是 SVG 中的一个元素，允许包含来自不同的XML命名空间的元素。在浏览器的上下文中，一般是 XHTML / HTML。什么意思呢？比如通常我们在各种设计软件中导出的 SVG 可能是这样

<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.1785 10.9999C2.1785 6.12799..." fill="#7A7A7A"/>
</svg>
复制代码

如果直接另存为 map.svg，然后放到浏览器中

注意到SVG 有个属性xmlns，这个就是命名空间，它规定这段内容在浏览器中是如何渲染的，这里的http://www.w3.org/2000/svg 就是 SVG 的命名空间。假如没有这个属性，浏览器中就直接以普通 xml 文档渲染了，如下

不过有一种情况可以不用指定这个命名空间：如果我们的SVG文件是直接内联在XHTML页面中或者直接以.html作为后缀名，是可以不指定命名空间的，浏览器会自动识别。

那么，回到这里，foreignObject 可以干什么呢？相信你已经猜到了，就是可以在 SVG 内部渲染 HTML 标签！具体的做法就是，给foreignObject 内部加上 xml 的命名空间就可以了，例如

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <style>
          p{
            color: red
          }
        </style>
        <p>xboxyan</p>
      </body>
    </foreignObject>
</svg>
复制代码

注意，body标签有一个属性xmlns="http://www.w3.org/1999/xhtml"，这个就是html的命名空间，渲染结果如下

和普通HTML几乎一样，下面重点来了，还能再加一些 CSS 动画

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <style>
          p{
            color: red;
            animation: hue 5s infinite
          }
          @keyframes hue{
              to {
                  filter: hue-rotate(1turn)
              }
          }
        </style>
        <p>xboxyan</p>
      </body>
    </foreignObject>
</svg>
复制代码

这样就得到了一个有动画的 SVG

Kapture 2022-02-23 at 20.24.00

一般情况下，我们都可以把 SVG 当做一种图片，可以很方便地用在网页中的各种地方，比如 img的src属性，或者直接当做 CSS 背景图片。简单一句话，借助 foreignObject，可以很轻易地将一段 HTML 转换为图片，包括 CSS 动画。

这样就有趣了，很多受 HTML 结构限制的场景就可以用这种方式解决了，比如文章开头提到的文本镂空波浪动画

二、文本背景图片

在文本中嵌入背景图是有固定套路的，借助-webkit-background-clip裁切和透明文字，可以轻易的将任意背景置入文字中，例如

<p>CSS TEXT</p>
复制代码

p{
    -webkit-background-clip: text;
    color: transparent;
  	background: linear-gradient( #f44336, #ffc107);
}
复制代码

效果如下

试想一下，如果上面的波浪动画做成了一张图片，是不是可以直接用在这里？

p{
    -webkit-background-clip: text;
    color: transparent;
  	background: url(wave.svg);
}
复制代码

三、CSS 动画转 SVG 图片

假设我们已经实现这样一个波浪动画（本文重点不在这），详细原理可以参考 coco的文章纯 CSS 实现波浪效果，这里稍微做了修改

body::before, body::after {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 400vw;
  height: 400vw;
  border-radius: 45% 48% 43% 47%;
  transform: translate(-50%, 0);
  box-shadow: 0 0 0 50vw #54caff9e;
  animation: rotate 10s infinite linear;
}
body::after {
  border-radius: 43% 47% 44% 48%;
  animation: rotate 10s infinite -1s linear;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotate(0);
  }
  100% {
    transform: translate(-50%, 0) rotate(360deg);
  }
}
复制代码

可以得到这样的效果

Kapture 2022-02-24 at 15.09.13

然后将这个放入一个 SVG foreignObject 中，就变成了这样

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <foreignObject width="100%" height="100%">
    <style>
      html,body{
          width: 100%;
          height: 100%
      }
        body{
            margin: 0;
            background:transparent;
            transition: .3s;
        }
        body::before, body::after {
        content: '';
        position: absolute;
        bottom: 50%;
        left: 50%;
        width: 400vw;
        height: 400vw;
        border-radius: 45% 48% 43% 47%;
        transform: translate(-50%, 0);
        box-shadow: 0 0 0 50vw #54caff9e;
                animation: rotate 10s infinite linear;
      }
      body::after {
        border-radius: 43% 47% 44% 48%;
        animation: rotate 10s infinite -1s linear;
      }
      @keyframes rotate {
        0% {
          transform: translate(-50%, 0) rotate(0);
        }
        100% {
          transform: translate(-50%, 0) rotate(360deg);
        }
      }
    </style>
      <body xmlns="http://www.w3.org/1999/xhtml">
      </body>
    </foreignObject>
</svg>
复制代码

将这段 SVG 另存为 wave.svg，在浏览器中就可以直接打开预览了！

Kapture 2022-02-24 at 15.18.22

这样就得到了一张“动图”

四、SVG 图片的使用

回到前面的文本，直接将渐变改为这张图就可以了

p{
  	-webkit-text-stroke: 1px #333;
    -webkit-background-clip: text;
    color: transparent;
  	background: url(wave.svg);
}
复制代码

效果如下

Kapture 2022-02-24 at 15.27.32

当然，你也可以将这段 SVG 直接转成 base 64 格式（推荐大家使用张鑫旭老师的 SVG 转换工具，非常赞）

转换完就是这样，完全没有任何依赖了（依稀还能看得明白）

p{
  	-webkit-text-stroke: 1px #333;
    -webkit-background-clip: text;
    color: transparent;
  	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cstyle%3E@keyframes rotate%7B0%25%7Btransform:translate(-50%25,0) rotate(0)%7Dto%7Btransform:translate(-50%25,0) rotate(360deg)%7D%7Dbody%7Bwidth:100%25;height:100%25;margin:0;background:0 0;transition:.3s%7Dbody::after,body::before%7Bcontent:'';position:absolute;bottom:50%25;left:50%25;width:400vw;height:400vw;border-radius:45%25 48%25 43%25 47%25;transform:translate(-50%25,0);box-shadow:0 0 0 50vw %2354caff9e;animation:rotate 10s infinite linear;z-index:1%7Dbody::after%7Bborder-radius:43%25 47%25 44%25 48%25;animation:rotate 10s infinite -1s linear%7D%3C/style%3E%3Cbody xmlns='http://www.w3.org/1999/xhtml'/%3E%3C/foreignObject%3E%3C/svg%3E");
}
复制代码