How to Animate a SVG with border-image

使用CSS的border-image属性和动画SVG创建动态边框效果

本文将介绍如何结合CSS的border-image属性和动画SVG，创建出环绕边框的动态SVG动画效果。我们将学习如何手工制作可调整大小的九宫格动画SVG，不仅可以重现这种效果，还可以根据自己的需求进行定制。

最终效果如下所示：

这个动画实际上是我正在开发的一个名为“The Skull”的夺旗谜题的一部分，旨在探索Arduino及其微控制器的内部结构。我搜索了如何创建这样的动画边框，但找不到任何有用的示例。我找到的大多数内容都与“蚂蚁行军”效果有关，但不幸的是， stroke-dasharray技巧不适用于骷髅头，更不用说更复杂的形状了。

因此，本着学习和分享的精神，我将在这里与大家分享我的经验！

是使用background还是border-image ？

起初，我什至不知道border-image属性的存在。在我的第一次尝试中，我尝试使用::before伪元素并对其background-position属性进行动画处理。结果如下：

可以看到，这种方法有效，但是要完成整个边框，至少需要八个不同的元素（或伪元素）。这样会使HTML代码变得混乱，并不理想。

我在以色列CSS开发者Facebook群组中发布了一个问题，每个人都向我指出了border-image属性。它完全符合它的名称：使用图像（或CSS渐变）作为元素的边框。

要使用border-image ，您必须提供一个图像，该图像以九宫格的方式使用（可以想象一下在图像上叠加一个井字格）。这九个区域中的每一个都代表边框的不同部分：顶部、右侧、左侧和底部，四个角以及中间（中间部分会被忽略）。

例如，如果我们只需要静态的骷髅头，我们可以利用SVG图案将骷髅头重复九次。首先，我们使用骷髅头的路径定义一个24×24的图案，然后使用此图案作为72×72矩形的填充：

<svg height="72" version="1.1" width="72" xmlns="http://www.w3.org/2000/svg"><defs><pattern height="24" patternunits="userSpaceOnUse" width="24"><path d="..." fill="red"></path></pattern></defs><rect fill="url(#skull-fill)" height="72" width="72"></rect></svg>

接下来，我们定义一个边框并设置目标元素的border-image ：

 .skulls {
  border: 24px solid transparent;
  border-image: url("https://skullctf.com/images/skull-9.svg") 24 round;
}

这样我们就得到了一个由骷髅头组成的边框：

添加SVG动画

现在我们可以为这些骷髅头添加动画了！它大部分情况下都能正常工作。

其思路是为边框图像中的每个区域创建不同的动画。例如，在左上角，我们有一个骷髅头从右向左移动，而另一个骷髅头同时从上向下移动。

我们将对transform属性进行动画处理以实现移动效果。我们还将利用SVG的<use></use>元素来避免为每个骷髅头重复冗长的<path></path>定义：

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @keyframes left {to {transform: translate(-32px, 0)}}
  @keyframes down {to {transform: translate(0, 32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use></svg>

这里的SVG动画语法可能看起来很熟悉，因为它不是某种SVG特定的语法，例如SMIL，而是使用了CSS动画。很酷，对吧？

最终效果如下：

如果我们添加一个网格，我们可以看到此动画也覆盖了部分顶部和左侧边缘：

在我们添加其余三个边缘后，它看起来更令人印象深刻，从而完全覆盖了边框图像的八个区域：

<svg height="96" version="1.1" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  @keyframes left {to {transform: translate(-32px, 0)}}
  @keyframes down {to {transform: translate(0, 32px)}}
  @keyframes right {to {transform: translate(32px, 0)}}
  @keyframes up {to {transform: translate(0, -32px)}}
 <defs><path d="..." fill="red"></path></defs><use href="#skull" style="animation: down .4s infinite linear" x="0" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="32" y="0"></use><use href="#skull" style="animation: left .4s infinite linear" x="64" y="0"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="32"></use><use href="#skull" style="animation: down .4s infinite linear" x="0" y="32"></use><use href="#skull" style="animation: right .4s infinite linear" x="0" y="64"></use><use href="#skull" style="animation: right .4s infinite linear" x="32" y="64"></use><use href="#skull" style="animation: up .4s infinite linear" x="64" y="64"></use></svg>

这为我们提供了一个完整的循环：

将所有内容组合在一起，我们将刚刚创建的动画SVG用作border-image ，即可获得所需的结果：

我可以整天玩这个……

当我第一次让它工作时，我开始调整动画属性。这是使用SVG而不是GIF的优势之一：更改动画的性质就像更改SVG源文件中的一个CSS属性一样简单，您可以立即看到结果，更不用说更小的文件大小（尤其是在处理渐变时）、全彩色支持和清晰的缩放了。

首先，我尝试查看如果我将动画计时函数更改为ease会是什么样子：

我们还可以使骷髅头在红色和绿色之间淡入淡出：

我们甚至可以使骷髅头在绕高分表移动时改变方向：

您可以访问JavaScript选项卡，在其中可以调整SVG源代码并自己尝试。

房间里的大象（咳咳，Firefox）

当我第一次让它工作时，我非常高兴。但是，您应该注意一些注意事项。首先也是最重要的一点是，由于某种原因，Firefox不会渲染边框边缘的动画，只渲染角上的动画：

有趣的是，如果我将SVG更改为具有相同动画的GIF，它可以完美运行。但是，Chrome上的边缘动画停止了！ ?‍♂️

无论如何，这似乎是一个浏览器错误，因为如果我们将border-image-repeat属性更改为stretch ，Firefox确实会对边缘进行动画处理，但结果有点古怪（尽管它可能适合页面的主题）：

将border-image-repeat值更改为space似乎也有效，但前提是元素的宽度不是骷髅头大小（在本例中为32像素）的整数倍，这意味着动画中会有一些间隙。

我还发现，当容器大小不是补丁大小（在本例中为32像素）的倍数时，会出现一些视觉问题，例如骷髅头上的细小黑线。我怀疑这与某些浮点舍入问题有关。在放大时，它也往往会中断。

并不完美，但绝对完成了！如果您想查看最终版本，您可以访问“The Skull”的高分页面。希望很快就能看到您的名字！

以上是How to Animate a SVG with border-image的详细内容。更多信息请关注PHP中文网其他相关文章！