svg-animate 相关问题

svg-animate是动画标签<animate>，用于随时间动画单个属性或属性。

我正在尝试在 React-Native 中围绕 SVG 路径制作一个球的动画，但不太确定如何去做，SVG 路径是一个药丸形状。这是到目前为止我的代码，我正在尝试在 React-Native 中围绕 SVG 路径制作一个球的动画，但不太确定如何去做，SVG 路径是一个药丸形状。这是到目前为止我的代码， <View style={styles.container}> <Svg height="500" width="400"> <Path d="M80 340 A100 100 0 0 0 320 340 v-200 A100 100 0 0 0 80 140 v200" fill="none" stroke="#eaeaea" strokeWidth="16" /> <Circle cx="320" cy="160" r="16" fill="#512468" /> </Svg> </View> 这是一个视觉效果： <body> <Svg height="500" width="400"> <Path d="M80 340 A100 100 0 0 0 320 340 v-200 A100 100 0 0 0 80 140 v200" fill="none" stroke="#eaeaea" strokeWidth="16" id="move-path" /> <Circle r="16" fill="#512468" > <animateMotion dur="10s" repeatCount="indefinite"> <mpath href="#move-path" /> </animateMotion> </Circle> </Svg> </body>

javascript react-native animation svg-animate

回答 1 投票 0

我想在我的 svg 上添加一个签名动画，我已经尝试过了，但只显示了一半？

html css svg css-animations svg-animate

回答 1 投票 0

SVG动画高度

我尝试制作高度动画，以便图表中的条形从 100% 高度变为 30%，然后回到 100%。我以为我可以用属性“height”来做到这一点，但显然不是......

html svg svg-animate

回答 1 投票 0

SVG 图动画 HTML

我想要为 svg 图形制作动画。我想为条形图制作动画，以便条形从 0 开始并在 4 秒时达到高度，我似乎无法弄清楚。把它想象成一个加载栏，但是

html svg svg-animate svg-animationelements

回答 1 投票 0

如何在使用 calcMode="linear" 时在 chrome 上模拟 firefox 动画行为？

我有两张图表，第一个绘制了两个函数：捕食者和猎物。每个都包含一个带有沿着函数路径的 animateMotion 的圆。另一张图是生成的相位曲线...

javascript math d3.js svg-animate

回答 1 投票 0

使用 CSS 将 SVG 图标的路径动画化以从中心顺时针旋转

我正在尝试旋转/旋转此 SVG 的内部路径，使其顺时针旋转。是否有任何好的资源可以展示 CSS 可用的不同类型的动画方法？现在...

css svg svg-animate

回答 1 投票 0

如何生成动态 SVG 路径，其中点坐标固定到 HTML 元素并且项目遵循路径？

我的目标是创建这样的东西：最终结果草图黄色框代表数量是动态的div。我需要生成一条贝塞尔曲线，其循环固定在图像下方...

javascript html animation svg svg-animate

回答 4 投票 0

复杂的SVG进度条动画

我有一个来自两条路径的 svg 屏蔽复合物。我需要像这样创建进度条：护罩应从顶部中心开始顺时针填充绿色。可惜我没有

javascript svg highcharts css-animations svg-animate

回答 1 投票 0

如何从 <animate> 元素 (SVG) 切换特定 <use> 标签

给出以下示例：给出以下示例： <svg xmlns="http://www.w3.org/2000/svg"> <defs> <rect id="rectangle" fill="red" width="25" height="25"> <animate attributeName="fill" values="red;blue;green;red" dur="1s" repeatCount="indefinite" /> <animate attributeName="x" values="0;50;0" dur="1s" repeatCount="indefinite" /> </rect> </defs>  <use id="rect1" href="#rectangle" />  <use id="rect2" href="#rectangle" y="50" /> </svg> 如何才能让“rect2”只继承“fill”动画？ OBS：我不想做的是在 defs 内创建一个中间“use”元素，因此主矩形将具有填充动画，中间 use 元素将引用主矩形，并声明“x “ 动画片。当然，在外部元素上使用不同的“hrefs”。 <svg xmlns="http://www.w3.org/2000/svg"> <defs> <rect id="rectangle" fill="red" width="25" height="25"> <animate attributeName="fill" values="red;blue;green;red" dur="1s" repeatCount="indefinite" /> </rect> </defs>  <use id="rect1" href="#rectangle" > <animate attributeName="x" values="0;50;0" dur="1s" repeatCount="indefinite" /> </use>  <use id="rect2" href="#rectangle" y="50" /> </svg>

svg svg-animate

回答 1 投票 0

沿水平响应路径制作 SVG 动画

我有一个水平响应式 SVG 路径，可以在不保持其比例的情况下进行拉伸，并且在标签上使用preserveAspectRatio =“none”和vector-effect =“non-scaling-st...”时它可以工作

html css svg svg-animate

回答 1 投票 0

动画 SVG 边框图像不遵循边框半径

我正在尝试通过使用带有边框图像的 SVG 来制作动画边框半径，并用边框半径将其舍入。我有溢出：隐藏；但边框好像并没有受到这个pro的影响...

css svg css-animations border svg-animate

回答 1 投票 0

如何增加旋转圆SVG的笔划高度（如何使其更粗）

我正在尝试增加这个旋转 SVG 圆圈的厚度。不知道是冲程高度还是什么。我已尽我所能，但似乎网站中的 SVG 编辑器不包含

svg svg-animate

回答 1 投票 0

使用CSS/Javascript的笔触效果

我想在我的网页上添加画笔描边效果动画。我尝试使用转换，但没有成功。我希望画笔描边具有从左到右的擦除动画，以便它显示自己......

javascript css svg svg-animate clip-path

回答 2 投票 0

径向 SVG 渐变在悬停时没有动画

径向渐变应该在悬停时从 10% 增长到 100%，但它只是没有做任何事情。无法理解我做错了什么。径向渐变应该在悬停时从 10% 增长到 100%，但它只是没有做任何事情。无法理解我做错了什么。 <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"> <style><![CDATA[ #svgDoc { pointer-events: all } #svgDoc:hover #svgGrad { animation: svgGrad_f_p 3000ms linear 1 normal forwards } @keyframes svgGrad_f_p { 0% { offset: 10% } 100% { offset: 100% } } ]]> </style> <defs> <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"> <stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000"/> <stop id="svgGrad-fill-1" offset="10%" stop-color="#000"/> </radialGradient> </defs> <rect id="svgGrad" width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)"/> </svg> 要在 SVG 中对径向渐变进行动画处理，您需要确保动画属性与 CSS 动画兼容。在 SVG 中，您无法使用 CSS 直接对渐变停止点的偏移属性进行动画处理。相反，您需要使用 SMIL（同步多媒体集成语言）来动画 $VG 属性。以下是如何修改 SVG 以使用 SMIL 制作径向渐变动画： <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"> 您无法通过 CSS 操作 stop 属性，因为它与同名的 CSS offset-path 相关属性发生“冲突”。解决方法 1：由 begin 属性触发的 SMIL 动画一种解决方法可能是通过 SMIL 动画对渐变进行动画处理，如下所示： <h3>Hover me</h3> <svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <defs> <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"> <stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000" /> <stop id="svgGrad-fill-1" offset="10%" stop-color="#000" > <animate attributeName="offset" fill="freeze" values="0.1;1" dur="1s" repeatCount="1" begin="svgGrad.mouseover" /> <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout" /> </stop> </radialGradient> </defs> <rect id="svgGrad" width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)" /> </svg> 幸运的是，SVG 的 <animate> 元素允许您添加事件以开始（或停止）播放。请参阅 “mdn 文档：开始” <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout" /> 解决方法 2：CSS 自定义 @property 通过定义开始和结束偏移的自定义属性，我们还可以实现平滑的渐变过渡。 @property --offset1 { syntax: "<percentage>"; inherits: false; initial-value: 0%; } @property --offset2 { syntax: "<percentage>"; inherits: false; initial-value: 10%; } .gradient{ background: radial-gradient( #FF0000 var(--offset1), #000 var(--offset2)); transition:1s --offset1, 1s --offset2; } .gradient:hover{ --offset1: 5%; --offset2:100%; } <h3>Gradient CSS</h3> <svg id="svgDoc2" class="gradient" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> </svg> 这不适用于 CSS 变量，因为我们无法转换 background 属性本身。在这种方法中，我们将 CSS 渐变应用于最外层（父）SVG 元素 - 就像 HTML 元素一样接受 CSS 渐变样式（与内部 SVG 元素不同）。但是，SMIL 方法可能仍然提供最佳的跨浏览器兼容性。另请参阅： “mdn 文档：@property” “css-tricks：使用 @property 进行 CSS 自定义属性” Temani Afif 的回答：“如何使用 CSS 制作径向渐变动画？”

css svg hover svg-animate radial-gradients

回答 2 投票 0

有人可以告诉我为什么我的径向渐变 SVG 悬停时没有动画吗？

css svg hover svg-animate radial-gradients

回答 1 投票 0

svg 内联 css 动画关键帧计时

我想使用带有关键帧的 css 动画制作一个动画 svg 徽标。动画效果很好，但我找不到正确计算关键帧时间的方法。我想实现以下时间表：斯特...

css svg css-animations svg-animate

回答 1 投票 0

如何使SVG运动在1轴上以完美正弦（t）移动位置

我正在尝试使动画 SVG 图像中的对象沿一个轴（上下或左右）以完美的正弦运动移动。例如：x(t) = a + b * sin(t * 2PI*f) （我也在尝试动画...

svg svg-animate