svg-animate 相关问题

给出以下示例：给出以下示例： <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