svg-animate 相关问题

折线的连续 svg 动画

我有以下代码（在 TypeScript 中）创建一条折线（基于 4 个不同的点 x1y1、xCy1、xCy1、x2y2，其中 Xc 是平面上 x1 和 x2 之间的一半距离），所以它不是

使用成帧器运动的 svg 动画

我需要创建这个基本形状和那些弯曲的灰线，这些灰线应该始终存在，因为它们是静态的，并且在这些灰线之上应该无限地流动蓝色球......

如何将我的动画 SVG 转换为 GIF

我目前没有找到任何可行的解决方案， 我可以用 puppeteer 和 ffmpge 来做到这一点，但这需要时间 也没有得到我想要的解决方案。 目前这个方法在眉毛中启动 svg...

如何在 SVG 上从中心动画进行显示动画？

我有这个标志，看起来像一个S。 ...

为什么不在另一个 LinearGradient 作品引用的 LinearGradient 内设置动画？

示例 SVG： SVG 示例： <svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"> <linearGradient id="reuseme" gradientUnits="userSpaceOnUse" spreadMethod="reflect"> <stop offset="0" stop-color="red"/> <stop offset="1" stop-color="black"/> <animate attributeName="y1" dur="2s" repeatCount="indefinite" values="0%;150%;0%"/> </linearGradient> <linearGradient id="a" x1="22.677" x2="132.625" y1="338.835" y2="338.835" href="#reuseme"/> <rect fill="url(#a)" x="10" y="10" width="130" height="130"/> </svg> 为什么我不能在上面的可重复使用的 <animate> 中使用 <linearGradient id="reuseme">？当我尝试时，动画无法播放。如果我将 <animate> 标签移动到底部 <linearGradient id="a"> 它可以工作： <svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"> <linearGradient id="reuseme" gradientUnits="userSpaceOnUse" spreadMethod="reflect"> <stop offset="0" stop-color="red"/> <stop offset="1" stop-color="black"/> </linearGradient> <linearGradient id="a" x1="22.677" x2="132.625" y1="338.835" y2="338.835" href="#reuseme"> <animate attributeName="y1" dur="2s" repeatCount="indefinite" values="0%;150%;0%"/> </linearGradient> <rect fill="url(#a)" x="10" y="10" width="130" height="130"/> </svg> 我想这样做的原因是因为我有很多使用相同渐变和相同动画的形状。按理说，如果我可以重用渐变，我也应该能够重用它的动画。我也尝试过 <use> 和 <animate href="#foo"> 试图实现同样的目标，但惨败。 因为你在渐变中使用 id="a" 设置 y1 ，并且它会覆盖 id="reuseme" 中的任何设置。 任何属性/属性/停止点均从参考链中遇到的第一个梯度开始使用。 我已从下面的 id="a" 中删除了 y1，因此另一个渐变现在已动画化，因为它的 y1 不再被覆盖。 <svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"> <linearGradient id="reuseme" gradientUnits="userSpaceOnUse" spreadMethod="reflect"> <stop offset="0" stop-color="red"/> <stop offset="1" stop-color="black"/> <animate attributeName="y1" dur="2s" repeatCount="indefinite" values="0%;150%;0%"/> </linearGradient> <linearGradient id="a" x1="22.677" x2="132.625" y2="338.835" href="#reuseme"> <!-- moving <animate/> here does work --> </linearGradient> <rect fill="url(#a)" x="10" y="10" width="130" height="130"/> </svg>

SVG 渐变偏移动画

我正在制作 SVG 动画。但我遇到了一个问题...我想在我的 SVG 中为变化的渐变偏移设置动画。我为此使用这个 SVG。我已经制作了变色动画...

SVG 变换动画在 Safari 中不起作用

我有一个简单的动画 SVG，在 Chrome/Firefox 中运行良好，但在 Safari 中根本没有动画。我知道这是由于 SVG 1.1 与 2.0（Safari 尚不支持 2.0）造成的，并且...

如何实现像 deno.com 上那样的 SVG 路径动画？

我在Deno官网上看到了一个SVG路径动画效果。 我想知道如何达到类似的效果。 能否请您给我一些实现思路，如果可以的话，...

无限交替CSS动画之间的未知延迟

我正在创建一个简单的CSS文本动画，天知道为什么，最后却被延迟了，我非常累，只需要完成这项工作。 基本上我有一个带有 标签的 SVG...

无限交替CSS动画之间的未知延迟

所以我正在做一个简单的CSS文本动画，并且在最后被延迟了，天知道为什么，我非常累，只需要完成这项工作。 基本上我有一个带有 ta...

Safari 不显示 svg

我的index.html 文件中有一个svg 代码，但它没有出现在Safari 上。我尝试了不同的解决方案，但这些解决方案对我不起作用 我的index.html 文件中有一个svg 代码，但它没有出现在Safari 上。我尝试了不同的解决方案，但这些解决方案对我不起作用 <svg class="blob" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg class="blob" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" style="overflow: visible; filter:blur(18px)" > <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color: rgb(23, 248, 194);"></stop> <stop offset="100%" style="stop-color: rgb(78, 50, 195);"></stop> </linearGradient> </defs> <path fill="url(#gradient)"> <animate attributeName="d" dur="20000ms" repeatCount="indefinite" animationTimingFunction="ease-out" values=" M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z; M440.5,315Q405,380,343,402Q281,424,228,402Q175,380,100,356Q25,332,51,259.5Q77,187,117,137.5Q157,88,222.5,62Q288,36,350.5,74.5Q413,113,444.5,181.5Q476,250,440.5,315Z; M413,307Q386,364,334.5,399Q283,434,210.5,439Q138,444,79.5,388.5Q21,333,61,264.5Q101,196,122.5,131Q144,66,218,39.5Q292,13,359,58Q426,103,433,176.5Q440,250,413,307Z; M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z; "></animate> </path> </svg> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color: rgb(23, 248, 194);"></stop> <stop offset="100%" style="stop-color: rgb(78, 50, 195);"></stop> </linearGradient> </defs> <path fill="url(#gradient)"> <animate attributeName="d" dur="20000ms" repeatCount="indefinite" animationTimingFunction="ease-out" values=" M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z; M440.5,315Q405,380,343,402Q281,424,228,402Q175,380,100,356Q25,332,51,259.5Q77,187,117,137.5Q157,88,222.5,62Q288,36,350.5,74.5Q413,113,444.5,181.5Q476,250,440.5,315Z; M413,307Q386,364,334.5,399Q283,434,210.5,439Q138,444,79.5,388.5Q21,333,61,264.5Q101,196,122.5,131Q144,66,218,39.5Q292,13,359,58Q426,103,433,176.5Q440,250,413,307Z; M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z; "></animate> </path> </svg>` 应该有一个基于 svg 改变形状的小斑点动画 正如 Robert 在评论中所说，SVG 有一个奇怪的重复项。看起来你复制粘贴了同一个SVG中的一些行 清理了SVG；对我来说在 FireFox 中运行得很好： <style> svg { height: 160px } </style> <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color: rgb(23, 248, 194);"></stop> <stop offset="100%" style="stop-color: rgb(78, 50, 195);"></stop> </linearGradient> </defs> <path fill="url(#gradient)"> <animate attributeName="d" dur="20000ms" repeatCount="indefinite" animationTimingFunction="ease-out" values=" M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z; M440.5,315Q405,380,343,402Q281,424,228,402Q175,380,100,356Q25,332,51,259.5Q77,187,117,137.5Q157,88,222.5,62Q288,36,350.5,74.5Q413,113,444.5,181.5Q476,250,440.5,315Z; M413,307Q386,364,334.5,399Q283,434,210.5,439Q138,444,79.5,388.5Q21,333,61,264.5Q101,196,122.5,131Q144,66,218,39.5Q292,13,359,58Q426,103,433,176.5Q440,250,413,307Z; M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z"> </animate> </path> </svg>`

React.js - 使用 svg 线性渐变不起作用

我有一个圆圈和一个渐变来填充它， 我放入渐变并按样式填充在路径中调用他。 从 'react' 导入 React,{PropTyoes}; 从'react-redux'导入{connect}； 导入 * 作为 Ac...

svg 的每个路径上的波浪动画

在我的反应项目中，我有一个包含水平线（路径）的SVG，当我将鼠标悬停在每个路径上时，我想启动从悬停点开始并连续的波浪动画......

如何在不使用 UIWebView 的情况下在 iOS 中显示动画 svg 文件

目前我正在使用 UIWebView 在我的本机 iOS 应用程序中显示动画 svg 文件。 这工作得很好，只是只要应用程序位于前台，CPU 使用率就会不断升高。 ...

如何使用蒙版创建手绘 SVG 动画

我正在尝试使用蒙版创建以下 SVG 动画。我尝试过使用 CSS 笔划属性，但无法按照我想要的方式获得它。 这是我创建的 W 形 SVG。 小路 { 行程：

如何使用animateMotion更改svg图像的开始位置？

我正在尝试更改 svg 图像的起始位置，以使用 animateMotion 沿路径为其设置动画 您可以在此处查看当前结果 https://jsfiddle.net/7espvwuz/ 在这个小提琴中我使用...

如何在framer-motion中将svg的pathLength完全动画化为0？

我正在尝试对 svg 路径进行动画处理，使其在单击时消失。动画有效，但在动画结束时留下了一个点。 这是我的代码 导出默认函数 App() { 常量 [showPass...

带有彩色片段和时钟动画的SVG甜甜圈

我是 SVG 新手，正在尝试熟悉它。我想创建一个 SVG 甜甜圈，其中包含多个片段，每个片段具有不同的颜色。重要的是这些段应该是

想要在 python 中为 svg 图像制作动画

我有两个 svg 文件，my_avatar.svg 和 my_avatar1.svg，其中一张图像的头像睁着眼睛，一张图像闭着眼睛我想对这两个 svg 文件进行动画处理，以便动画会显示眼睛...

像加载栏一样动画 svg 填充

我正在尝试对 svg 进行动画填充，就像我们加载它一样，但我似乎在网上找不到任何有效的东西。 我正在尝试对 svg 进行动画填充，就像我们加载它一样，但我似乎在网上找不到任何有效的东西。 <svg width="302" height="245" viewBox="0 0 302 245" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="#D9EBCD"/> <mask id="mask0_2797_493" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="302" height="245"> <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="#D9EBCD"/> </mask> <g mask="url(#mask0_2797_493)"> </g> </svg> 这就是我想要制作动画的 svg。感谢您的帮助。 我试过这个... <svg width="302" height="245" viewBox="0 0 302 245" fill="#D9EBCD" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="green-fill"> <stop offset="0" stop-color="#11453B"> <animate dur="4s" attributeName="offset" from="0" to="1" id="myLoop" /> </stop> <stop offset="0" stop-color="#D9EBCD"> <animate dur="4s" attributeName="offset" from="0" to="1" /> </stop> </linearGradient> </defs> <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="#url(green-fill)"/> <mask id="mask0_2797_493" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="302" height="245"> <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667C5.72336 244.667 0.947723 239.891 0.947723 234C0.947723 228.109 5.72336 223.333 11.6144 223.333C17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="#D9EBCD"/> </mask> <g mask="url(#mask0_2797_493)"> </g> </svg> 因为我在网上找到了它，但它不起作用。 是这样的吗？该形状是使用矩形上的蒙版制作的。蒙版内部有一条宽描边的路径，覆盖了形状的路径。对路径进行动画处理将“显示”蒙版的白色部分。 <svg width="302" height="245" viewBox="0 0 302 245" fill="#D9EBCD" xmlns="http://www.w3.org/2000/svg"> <defs> <mask id="mask01"> <path d="M22.281 234C22.281 239.891 17.5054 244.667 11.6144 244.667 5.7234 244.667.9477 239.891.9477 234 .9477 228.109 5.7234 223.333 11.6144 223.333 17.5054 223.333 22.281 228.109 22.281 234ZM11.6144 0H275.614V4H11.6144V0ZM301.614 26V210H297.614V26H301.614ZM275.614 236H11.6144V232H275.614V236ZM301.614 210C301.614 224.359 289.974 236 275.614 236V232C287.765 232 297.614 222.15 297.614 210H301.614ZM275.614 0C289.974 0 301.614 11.6406 301.614 26H297.614C297.614 13.8497 287.765 4 275.614 4V0Z" fill="white"/> <path d="M 10 2 H 276 C 288 2 300 12 300 26 V 210 C 300 220 292 234 276 234 H 0" stroke="black" stroke-width="25" fill="none" stroke-dasharray="100 100" pathLength="100"> <animate dur="4s" attributeName="stroke-dasharray" from="100 100" to="0 100" fill="freeze" /> </path> </mask> </defs> <rect width="302" height="245" mask="url(#mask01)" fill="#D9EBCD" /> </svg>