svg-animate 相关问题

是否可以创建一个 SVG 笔画动画，无论笔画长度如何，其动画持续时间都相同？

在提供的示例中，较小的形状比较大的形状动画快得多，因为其笔画长度要短得多。 我的理解是将中风破折号设置为 100% 而不是......

有没有办法使用行程破折号阵列制作 svg 圆形进度条？ [已关闭]

我一直在尝试重新创建这个进度条，但我一直坚持可以实现线之间的破折号的步骤。如果您有任何想法那就太好了。 这就是我所拥有的

有没有办法使用行程破折号数组制作 svg 时钟

我一直在尝试重新创建这个时钟，但我一直坚持可以实现线之间的破折号的步骤。如果你有任何想法那就太好了。 这就是我所完成的...

SVG 标记的惊人动画

是否可以交错 SVG 标记的动画以与线条动画同步，即标记在其后面的线条可见的同时变得可见？ 我尝试过瞄准...

折线的连续 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/ 在这个小提琴中我使用...