如何使用 CSS 为带有边框图像的 SVG 设置动画？
Scalable Vector Graphics 或 SVG 用于为 Web 设置基于矢量的图形。在本文中，我们将学习如何使用 CSS 为带有边框图像的 SVG 设置动画。
方法：使用 border-image属性，有一个 SVG 元素，其中定义了一个 rect 元素来表示一个设置宽度和高度的矩形。此 SVG 的边框图像是另一个 SVG 元素，指定为边框图像属性的 URL（统一资源定位器）。这可以通过将边框图像 SVG 编码为数据 URI 来实现。新的border-image SVG 元素通过定义内联CSS 来设置动画。
注意：数据 URI（统一资源标识符）是表示文件的 base64 编码字符串（即，您可以在网页中插入文件的内容，而不是指定文件的 URL）。
示例 1：
动画边框 SVG：
动画边框 SVG 的数据 URI：
data:image/svg+xml;charset=utf-8,%3Csvg width=’100′ height=’100′ viewBox=’0 0 100 100′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id=’g’ x1=’0%25′ y1=’0%25′ x2=’0%25′ y2=’100%25’%3E%3Cstop offset=’0%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’25%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’50%25′ stop-color=’%2338ef7d’ /%3E%3Cstop offset=’100%25′ stop-color=’%2338ef7d’ /%3E%3C/linearGradient%3E %3Cpath d=’M1.5 1.5 l97 0l0 97l-97 0 l0 -97′ stroke-linecap=’square’ stroke=’url(%23g)’ stroke-width=’3′ stroke-dasharray=’385’/%3E %3C/svg%3E
文件名： index.html
HTML
GeeksforGeeks
HTML
GeeksforGeeks
输出：
示例 2：此示例与前面的示例非常相似，但唯一的区别是stroke-dasharray 的值只是50而不是385 ，这会在边框图像中添加更多的破折号。此外，动画在正向和反向之间交替。
动画边框 SVG：
动画边框 SVG 的数据 URI：
data:image/svg+xml;charset=utf-8,%3Csvg width=’100′ height=’100′ viewBox=’0 0 100 100′ fill=’none’ xmlns=’http://www.w3.org/2000/svg’%3E %3Cstyle%3Epath%7Banimation:stroke 5s linear alternate infinite%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id=’g’ x1=’0%25′ y1=’0%25′ x2=’0%25′ y2=’100%25’%3E%3Cstop offset=’0%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’25%25′ stop-color=’%2324FE41′ /%3E%3Cstop offset=’50%25′ stop-color=’%2338ef7d’ /%3E%3Cstop offset=’100%25′ stop-color=’%2338ef7d’ /%3E%3C/linearGradient%3E %3Cpath d=’M1.5 1.5 l97 0l0 97l-97 0 l0 -97′ stroke-linecap=’square’ stroke=’url(%23g)’ stroke-width=’3′ stroke-dasharray=’50’/%3E %3C/svg%3E
文件名： index.html
HTML
GeeksforGeeks
输出：
