svg-animate 相关问题

如何在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>

SVG 动画在 Safari 上性能低下

我正在研究具有更改路径的 svg 动画，我最大的问题是 safari，它在其他浏览器上非常流畅，但 safari 却很糟糕 我正在研究具有更改路径的 svg 动画，我最大的问题是 safari，它在其他浏览器上非常流畅，但 safari 却很糟糕 <svg xmlns="http://www.w3.org/2000/svg" width="1215" height="719" viewBox="0 0 1215 719" fill="none" overflow="visible" > <g filter="url(#filter0_bi_5278_11355)"> <path fill="black" fill-opacity="0.3"> <animate attributeName="d" dur="15s" repeatCount="indefinite" values=" M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z; M533.673 100.16C827 286.5 822.85 299 827 340.5C837 440.5 784.944 397.906 419 468.5C53.0563 539.094 133.457 430.241 216 357.5C296 287 201.996 128.5 27.4981 43.9996C-102.004 -14.5005 265.5 -30.5 533.673 100.16Z; M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z" /> </path> </g> <defs> <filter id="filter0_bi_5278_11355" x="-33.6094" y="-33.176" width="1282.4" height="785.486" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" > <feFlood flood-opacity="0" result="BackgroundImageFix" /> <feGaussianBlur in="BackgroundImageFix" stdDeviation="17" /> <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_5278_11355" /> <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_5278_11355" result="shape" /> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" /> <feOffset dy="4" /> <feGaussianBlur stdDeviation="41.5" /> <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /> <feColorMatrix type="matrix" values="0 0 0 0 0.890196 0 0 0 0 0.0313726 0 0 0 0 0.478431 0 0 0 1 0" /> <feBlend mode="normal" in2="shape" result="effect2_innerShadow_5278_11355" /> </filter> </defs> </svg> 我尝试过一些研究如何在画布上或使用一些库来制作它，但我什至没有接触过这些东西，我认为以我的实际知识来说这对我来说太多了。我还没有找到任何解决堆栈溢出问题的方法 我有点怀疑你的性能问题是由 Safari 引起的，还是由它运行的硬件引起的。如果是装有 iOS 的移动设备，处理能力下降也可能是一个原因。因此，在没有进一步证据的情况下，让我们看看优化您的过滤器定义。 一半的过滤器除了浪费处理时间之外什么也没做。 <feBlend result="shape" /> 之前的所有内容都可以删除。使用 SourceGraphic 作为输入，结果不会有任何差异。 注意将滤镜效果区域限制到所需的最小值。所需的图像缓冲区越小，计算速度就越快。 x="-5" y="-5" width="860" height="710"就够了。 <svg xmlns="http://www.w3.org/2000/svg" width="1215" height="719" viewBox="0 0 1215 719" fill="none" overflow="visible" > <g filter="url(#filter0_bi_5278_11355)"> <path fill="black" fill-opacity="0.3"> <animate attributeName="d" dur="15s" repeatCount="indefinite" values=" M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z; M533.673 100.16C827 286.5 822.85 299 827 340.5C837 440.5 784.944 397.906 419 468.5C53.0563 539.094 133.457 430.241 216 357.5C296 287 201.996 128.5 27.4981 43.9996C-102.004 -14.5005 265.5 -30.5 533.673 100.16Z; M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z" /> </path> </g> <defs> <filter id="filter0_bi_5278_11355" x="-5" y="-5" width="860" height="710" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" > <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" /> <feOffset dy="4" /> <feGaussianBlur stdDeviation="41.5" /> <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /> <feColorMatrix type="matrix" values="0 0 0 0 0.890196 0 0 0 0 0.0313726 0 0 0 0 0.478431 0 0 0 1 0" /> <feBlend mode="normal" in2="SourceGraphic" result="effect2_innerShadow_5278_11355" /> </filter> </defs> </svg> 生成的动画形状是部分透明的。这意味着需要额外的计算步骤将其与其背景混合。真的需要这样吗？如果形状的背景是单色的，您可以从 <path> 与 fill-opacity="1" 和已经是颜色混合的 fill 开始（例如，对于白色背景，#b2b2b2）。然后第一个feColorMatrix就可以完全删除了。 第二个feColorMatrix的值可能需要一些调整，但从视觉上看，我看不出任何区别。 <svg xmlns="http://www.w3.org/2000/svg" width="1215" height="719" viewBox="0 0 1215 719" fill="none" overflow="visible" > <g filter="url(#filter0_bi_5278_11355)"> <path fill="#b2b2b2"> <animate attributeName="d" dur="15s" repeatCount="indefinite" values=" M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z; M533.673 100.16C827 286.5 822.85 299 827 340.5C837 440.5 784.944 397.906 419 468.5C53.0563 539.094 133.457 430.241 216 357.5C296 287 201.996 128.5 27.4981 43.9996C-102.004 -14.5005 265.5 -30.5 533.673 100.16Z; M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z" /> </path> </g> <defs> <filter id="filter0_bi_5278_11355" x="-5" y="-5" width="860" height="710" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" > <feOffset dy="4" /> <feGaussianBlur stdDeviation="41.5" /> <feComposite in2="SourceGraphic" operator="arithmetic" k2="-1" k3="1" /> <feColorMatrix type="matrix" values="0 0 0 0 0.890196 0 0 0 0 0.0313726 0 0 0 0 0.478431 0 0 0 1 0" /> <feBlend mode="normal" in2="SourceGraphic" result="effect2_innerShadow_5278_11355" /> </filter> </defs> </svg>

在 SVG 中单击时隐藏和显示子树元素

我正在尝试将一些父级和子级实现为一棵树。当我单击父元素时，它的所有子元素都应该隐藏。当我单击同一个父级时，它的所有子级都应该出现。 我已经实施了...

SVG 的无限无缝滚动部分

我正在尝试在 SVG 中复制此 GIF： .barsBox { 溢出：隐藏； 显示：柔性； 宽度：108px； 保证金：0 自动； } .bars { 动画：滚动0.7ssteps(7)无限； } @关键帧scro...

绘制包含多个路径的 SVG，一次一个路径，使用 Javascript 制作动画

我是 SVG 动画的新手，我查看了 SNAP SVG 和其他库，但我找不到实现我的目标的方法。 我有一个 SVG 文件（或者 SVG 直接集成在 HTML 中），其中包含多个...

Flutter 中的动画 svg

需求：需要在Flutter中渲染动画SVG图像。 描述：我尝试在 Flutter 应用程序中渲染动画 SVG 图像，但不幸的是，我无法实现。因为大多数情况下

如何在使用 JavaScript 在路径之间变形时保持 SVG 样式（颜色）？

我正在制作一张动画地图：https://codepen.io/robertsaget/pen/WNaJWmM 我有 23 个图标，它们从警报信号（红色和白色）变成语音气泡（各种颜色）作为你...

如何在 React native 中跟踪 Svg 徽标

我刚开始使用 React native，我的项目具有“徽标跟踪解锁”功能。这意味着首先我必须在触摸时跟踪 svg 形状（徽标），并在成功跟踪下一页之后......

在动画中保持 SVG 图案的填充

我有一个以原点为中心的动画 SVG。有以原点为中心的 256x256 路径。这条路径有一个填充，它是一个同样为 256x256 的渐变矩形图案。 ...

我想在我的 SVG 上反转动画方向

我有这个codepen动画：Codepen SVG测试 .动画{ 宽度：500px； 高度：281.25px； 保证金：0； 填充：0； } svg { 宽度：100%； 高度：100%； 描边宽度：10px； 行程：#ff00...

如何在 raphael js 的矩形左边缘中间创建点

我想在矩形的左边缘中点创建一个圆。但它没有创造。需要帮忙： window.onload = 函数 () { ...</desc> <question vote="0"> <p>我想在矩形的左边缘中点创建一个圆。但它没有创造。需要帮助：</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; window.onload = function () { var paper = Raphael(0,0, 500, 500); //var rect2 = paper.rect(20, 50, 100, 50).attr({ fill: &#34;orange&#34; }); var cx =100, cy = 100; var w =120, h = 80; var lmx = cx - w/2; var lmy = cy;// - h/2; var rec = paper.rect(cx, cy, w, h, 20); //Mid point circle var cir = paper.circle(lmx, lmy, 1); // var cir = paper.circle(cx, cy, 20); // to position in the middle, just do this //var rec = paper.rect(cx - 120/2, cy - 80/2, 120, 80); }; &lt;/script&gt; </code></pre> <p>它创造了一些其他地方。</p> <p><a href="https://i.stack.imgur.com/r7M3x.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL3I3TTN4LnBuZw==" alt=""/></a></p> <p>红色 - 它在那里创造 绿色 - 我需要在左边缘中间点创建。</p> <p>需要帮助。</p> </question> <answer tick="false" vote="0"> <p><pre><code>&lt;rect&gt;</code></pre> 元素是从由 <pre><code>x</code></pre> 和 <pre><code>y</code></pre> 属性定义的点绘制的——不像 <pre><code>&lt;circle&gt;</code></pre> 元素是围绕 cx/cy 中心点绘制的。</p> <p>所以你当前的<pre><code>cx</code></pre>变量实际上是<pre><code>x</code></pre>.</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>window.onload = function() { var paper = Raphael(0, 0, 500, 500); //var rect2 = paper.rect(20, 50, 100, 50).attr({ fill: &#34;orange&#34; }); var x = 100, y = 100; var w = 120, h = 80; var lmx = x; var lmy = y + h / 2; // - h/2; var rec = paper.rect(x, y, w, h, 20); //Mid point circle var cir = paper.circle(x, lmy, 3).attr({ fill: &#39;green&#39; }); };</code></pre> <pre><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js&#34;&gt;&lt;/script&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

SVG <animate> 标签的值属性可以引用 CSS 变量吗？

在 SVG 标签中使用 values="var(--color1);var(--color2)" 在 Firefox 中有效，但在 Chrome 中无效（见下面的代码片段）。有没有办法让它在 Chrome 中工作？ ：根 { ...

使用 react-spring 为 React 中的一个点设置 SVG 组件的动画

我正在做这个项目，我需要给定的 SVG 组件像跷跷板一样围绕中心的一个点摆动。摆动是连续的，即像典型的跷跷板一样上下摆动。我正在尝试...

当我有位置时，Svg 动画不起作用：绝对

我正在尝试同时使用 2 个不同的动画为悬停时的卡片制作动画。第一个使卡向上移动，另一个是我尝试缩放卡内的 svg 当我...

用javascript或jquery旋转svg元素的3D。

在我的网页应用中，我有如下的svg：当用户点击每个按钮时，我有两个按钮将这个元素通过y轴顺时针方向旋转3d，我该怎么做呢？ 有jQuery插件吗？

如何让SVG动画无缝流畅？

我把SVG做成了动画，给人一种手写的效果，我想让动画更加无缝，当字母 "W "出现在动画中时，它会让字母的其他部分也出现，并且...

一个SVG的JQuery函数，可以在第一个动画完成后立即执行第二个动画？

我应用了动画延迟技术，但要实现手写效果的动画，我必须在对象相交的地方进行剪切，并画出一个路径，并将其转换为剪切蒙版，例如...。