svg-animate 相关问题

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

带有两个圆形边的CSS透明弯曲形状

我正在尝试创建内部弯曲的透明形状,但是我在创建这种弯曲形状时遇到了麻烦,这就是我要做的事情。body {background-color:#00a4ffb3; } ....

回答 1 投票 1

如何通过单击按钮在svg上暂停CSS动画?

我正在学习本教程:https://www.youtube.com/watch?v=y0Ic8QcvyK8,我决定我想通过单击按钮来暂停动画。我已经尝试了,也尝试了。通过...

回答 1 投票 0

Edge和IE上是否有针对动画SVG(使用CSS的解决方法?

我有一个SVG动画,该动画在Edge上不起作用,显然在IE上不起作用。我已经对该问题进行了广泛的研究,并且意识到在...

回答 1 投票 0

悬停时动画中SVG的一部分更改

[其中包括svg文件的图像(无法上传svg文件),我想将鼠标悬停在上面,并且仅从内圈到...辐射地将圆的背景(变成蓝色)...

回答 1 投票 0

SVG动画:在单个.svg文件中缩放其原点的多个图形

我想拥有一个带有三颗脉动和衰落星的装载机。我已经用CSS创建了这个加载器,但是这种技术不适用于这种情况。我想拥有一个loader.svg文件。 ...

回答 1 投票 1

CSS为SVG动画

我有一个看起来像这样的SVG

回答 2 投票 0

沿着路径的一部分移动形状

我正在寻找一种方法,可以像地铁地图那样在路径上沿路径移动元素。这是为了说明流程中的位置。任何指向库或技术的指针...

回答 1 投票 0

具有SVG 仅[]]的形状为“ 8”的环形动画,> [使用[[0]的组合 <animate attributeName="cx">和<attributeName="cy">来寻找最佳点以实现“ 8”字形动画时,我头疼不已。我想使用它,因为按照我的指标,它在FPS,CPU和GPU使用方面似乎是性能最高的。 “理想”运动路径的快速演示:https://codepen.io/ivancis/pen/eYmZowz 我非常头痛,试图通过使用 和 的组合来找到最佳点以实现“ 8”字形动画。我想... ] >> 由注释的改进引起的新解决方案 我只需要结合使用即可为svg元素设置动画<animate attributeName="cx"><animate attributeName="cy">(用于性能)以进行“ 8”形运动,循环 由于作者不想使用animateMotion命令,因此在这种情况下我只看到一种方法来实现沿无穷大符号的圆运动动画: [必须沿着无穷大符号顺序选择许多点并将其坐标分配给圆cx = "x",cy = "y" 选择的点越多,圆沿着无穷大符号的轨迹移动越近 在矢量编辑器中,我依次将圆放在无穷大符号上,并记下其在圆心的坐标。第一个圆的中心坐标为cx ="70"cy ="60"因此,对沿无穷大符号定位的所有圆进行了此操作。最后一个圆与第一个圆具有相同的坐标,从而实现闭合循环 [仅在动画公式cx,cy中替换这些值 圆周运动动画cx,半径为cy的[C0 r="5 半径 <div class="group"> <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120"> <circle fill="olive" cx="70" cy="60" r="5"> <animate attributeName="cx" attributeType="XML" repeatCount="indefinite" begin="0s" dur="2s" values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69; 73;76;79;81;80;78;74;70"> </animate> <animate attributeName="cy" attributeType="XML" repeatCount="indefinite" begin="0" dur="2s" values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79; 80;80;79;76;72;67;64;61;60"> </animate> </circle> <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/> </svg> </div> ,例如在问题作者的示例中 r = 40 您没有说您真正想要哪种动画。 因此,我将提供不同类型的动画的示例,您可以选择它们中的任何一个并以某种方式自行修改。 无限符号移动动画 <div class="group"> <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120"> <circle fill="olive" cx="70" cy="60" r="40"> <animate attributeName="cx" attributeType="XML" repeatCount="indefinite" begin="0s" dur="2s" values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69; 73;76;79;81;80;78;74;70"> </animate> <animate attributeName="cy" attributeType="XML" repeatCount="indefinite" begin="0" dur="2s" values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79; 80;80;79;76;72;67;64;61;60"> </animate> </circle> <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/> </svg> </div> Rotation 鼠标悬停在符号上 <svg xmlns="http://www.w3.org/2000/svg" width="400" height="100" viewBox="0 0 100 100"> <path fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10"> <animateTransform attributeName="transform" type="translate" values="0; 150; 0" begin="0s" dur="4s" repeatCount="indefinite" /> </path> </svg> .infinity1{ transform-box: fill-box; transform-origin: center center; transition: rotate 2s linear ; } .infinity1:hover { animation: spin 2s linear infinite; } @keyframes spin { 100% {transform :rotate(360deg);} } 绕Y轴旋转 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> <path class="infinity1" fill="none" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" /> </svg> .infinity1{ transform-box: fill-box; transform-origin: center center; transition: rotate 2s linear ; fill:transparent; } .infinity1:hover { animation: spin 2s linear infinite; } @keyframes spin { 100% {transform :rotateY(360deg);} } 通过更改属性stroke-dasharray填充无穷大符号的动画 单击圆圈中的彩色字母 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" > <path class="infinity1" stroke="dodgerblue" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" /> </svg> .container { width:40%; height="40%"; background:black; } <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 20 100 100"> <path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" /> <!-- The midpoint of the beginning of the animation in the center of the figure. stroke-dashoffset="31.1" --> <path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" /> </path> <!-- Middle point on the left stroke-dashoffset="-159.5" --> <path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" /> </path> <!-- Midpoint left top stroke-dashoffset="128.5" --> <path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" /> </path> <!-- Midpoint lower right stroke-dashoffset="192.7" --> <path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" /> </path> <!-- Middle point on the right stroke-dashoffset="223.9" --> <path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" > <animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" /> </path> <g id="btn_L" transform="translate(-17 0)" > <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="25" y="95" font-size="10" fill="green" >L</text> </g> <g id="btn_C" transform="translate(3 0)"> <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="24" y="95" font-size="10" fill="crimson" >C</text> </g> <g id="btn_T" transform="translate(23 0)"> <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="24" y="95" font-size="10" fill="orange" >T</text> </g> <g id="btn_B" transform="translate(43 0)"> <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="25" y="95" font-size="10" fill="dodgerblue" >B</text> </g> <g id="btn_R" transform="translate(63 0)"> <rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/> <text x="25" y="95" font-size="10" fill="purple" >R</text> </g> </svg> </div>

的组合来找到最佳点以实现“ 8”字形动画。我想...

回答 2 投票 0

SVG动画在Firefox和Edge中不起作用

我正在使用以下SVG作为HTML文档中的微调器: [

回答 1 投票 0

““ 8”形状为SVG的环形动画 仅

和 的组合来找到最佳点以实现“ 8”字形动画。我想... ] >>

回答 2 投票 0

是否可以将动画GIF转换为SVG?

每个人!希望你一切都好。我有一个gif文件,该文件将用作主页背景。但是它的分辨率不好,所以我认为如果将GIF用作SVG会更好。是...

回答 1 投票 0

是否可以将动画GIF图像转换为SVG?

每个人!希望你一切都好。我有一个gif文件,该文件将用作主页背景。但是它的分辨率不好,所以我认为如果将GIF用作SVG会更好。...

回答 1 投票 0

如何使用蒙版制作svg填充箭头

我希望圆形路径(遮罩)填充0到100%的长度并不断重复。我正在尝试在SVG文件中进行所有操作以使其更整洁。我一直在关注......>

回答 1 投票 0

根据svg路径旋转图像

看我所附的图像。 svg路径转弯时,我需要转弯汽车图像吗?这可能吗?这是我的代码:

回答 1 投票 4

在屏幕上和屏幕外对SVG对象进行动画处理,并动态生成

我正在尝试使用我拥有的SVG对象创建动画,借此,单行中的每个单独的SVG矩形都以滚动方式(向上或向下)进行动画处理。我正在努力寻找...

回答 1 投票 0

svg淡入文本,淡出文本,并在设置的时间段内继续对新文本执行相同操作

我想按以下方式修改与代码相关的内容:我希望Word 1淡入0.2秒,然后在屏幕上停留4.6秒,然后淡出0.2秒(即总共5秒),Word 1停留关闭...

回答 1 投票 0

如何使用倾斜文本创建倾斜的SVG图像

我正在尝试用倾斜文本在svg中创建倾斜图像,如下图所示。我试图创建相同的格式,但无法创建与整体文本显示相同的设计,可以...

回答 1 投票 0

每张独立图纸的SVG改变圆周速度持续时间

我有两个使用 ]的SVG路径动画>

回答 1 投票 0

将SVG path d字符串重新使用并组合为动画值

我正在为通过多个d值的路径设置动画,并不断重复使用相同的形状。在下面的简化示例中,我将一个主三角形M 1,5 L 9,1 9,9 Z变形为3个较小的三角形。要做...

回答 1 投票 0

启动对象从随机点沿着SVG路径移动

这里试图深入了解SVG。有什么方法可以沿SVG路径移动圆,即圆从从路径长度确定的特定点开始移动?对于...

回答 1 投票 1

© www.soinside.com 2019 - 2024. All rights reserved.