标签: svg-animate
如何交替反向循环 SVG 动画？
我是 SVG 的新手，特别是在 SVG 动画中，所以我不知道该怎么做。完成后我需要反转动画并重新开始。我发现了这个如何反转SVG动画的移动方向？并尝试了接受的答案，但我不知道该怎么做。请帮帮我。继承人我的代码：
.s0 {
overflow: visible;
}
.st0 {
clip-path: url(#SVGID_6_);
fill: #FF0500;
}
.st1 {
opacity: 0.6;
fill: #FF0500;
}
.st2 {
clip-path: url(#SVGID_8_);
fill: #FF0500;
}
.st3 {
clip-path: url(#SVGID_2_);
fill: none;
stroke: #000000;
stroke-width: 5;
stroke-miterlimit: 10;
}
.st4 {
clip-path: url(#SVGID_2_);
fill: none;
stroke: #000000;
stroke-width: 5;
stroke-linejoin: bevel;
stroke-miterlimit: 10;
}
.st5 {
opacity: 0.6;
clip-path: url(#SVGID_4_);
}
.st6 {
opacity: 0.7;
clip-path: url(#SVGID_4_);
}
.st7 {
clip-path: url(#SVGID_2_);
} …4
推荐指数
推荐指数
1
解决办法
解决办法
2382
查看次数
查看次数
动画增长箭头链接
嗨，我想知道如何像上面那样对 svg 箭头进行动画处理（悬停时）。
我尝试过使用 CSS 变换，但它们也会缩放箭头，这不好。我认为正确的方法是使用 SVG 动画，但我不知道从哪里开始。例如，我将使以下箭头（仅线）增长，箭头相应地移动。
<svg width="600px" height="100px">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#f00" />
</marker>
</defs>
<line x1="50" y1="50" x2="100" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>
很感谢任何形式的帮助！
4
推荐指数
推荐指数
1
解决办法
解决办法
6051
查看次数
查看次数
需要为曲线填充 Svg 动画
我在 svg 中有一条曲线，需要在悬停时沿着其路径填充曲线有人可以帮忙吗？填充动画应该是另一种颜色或可以是相同的。我尝试使用 animate 标签，但它无效并且像任何东西一样填充。下面给出了我的 SVG 路径。这是我的 Svg 代码，需要将此路径填充为 dashoffset。
<svg width="210mm" height="45mm" viewBox="0 0 744.09449 159.44881">
<path style="opacity:1;fill:#ded9d5;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1"
d="m 18.929688,529.44141 c 1.140051,2.17164 1.739409,4.60197 1.74414,7.07226 -0.0033,2.41521 -0.575072,4.79339 -1.666016,6.92969 l 36.876954,0 c 17.101683,0 11.124297,14.78094 13.525192,34.92207 7.304679,27.32129 35.935342,38.13518 62.612922,41.73111 -1.5457,-2.42739 -4.33484,-7.94712 -4.33733,-10.8524 0.005,-3.11453 0.90166,-5.74434 2.66254,-8.27277 -23.30774,-1.1068 -29.8766,-7.34118 -39.33413,-22.29658 -4.829034,-11.35821 5.68082,-49.23338 -28.703413,-49.23338 z" transform="translate(0.5714286,1.42857)" id="path4471" />
</svg>4
推荐指数
推荐指数
1
解决办法
解决办法
751
查看次数
查看次数
使滚动增长<path>变为虚线
这是我迄今为止在stackoverfow本身的朋友的帮助下所做的.
它工作正常,但我想做一个对我来说有点复杂的动画.
// Get the id of the <path> element and the length of <path>
var myline = document.getElementById("myline");
var length = myline.getTotalLength();
circle = document.getElementById("circle");
// The start position of the drawing
myline.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
myline.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() { …4
推荐指数
推荐指数
1
解决办法
解决办法
1510
查看次数
查看次数
SVG动画围绕中心点旋转路径。
目前，我无法让此SVG完美地沿其轴旋转。我试过计算我认为应该成为中心的内容。谁能为我指出正确的方向，为什么它不能完美地围绕质心旋转？还是将来如何最好地计算？
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17 17" >
<style type="text/css">
.st0{fill:#000000;}
</style>
<path id="arrow" class="st0" d="M9.3,16.4c3.2-0.4,5.8-2.9,6.2-6.1c0.5-4.2-2.8-7.7-6.9-7.8V0.6c0-0.1-0.1-0.2-0.2-0.1l-4,2.9
c-0.1,0-0.1,0.1,0,0.2l3.9,2.8c0.1,0.1,0.2,0,0.2-0.1V4.5c2.9,0,5.2,2.5,5,5.4c-0.2,2.5-2.2,4.5-4.8,4.7c-2.7,0.2-5-1.7-5.4-4.2
c-0.1-0.5-0.5-0.8-1-0.8c-0.6,0-1,0.5-1,1.1C2.1,14.2,5.4,16.9,9.3,16.4L9.3,16.4z"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.425116062164307 8.459185183048248" to="0 8.425116062164307 8.459185183048248" dur="0.5s" additive="sum" repeatCount="indefinite" />
</svg>
4
推荐指数
推荐指数
1
解决办法
解决办法
8372
查看次数
查看次数
SVG 直线动画 CSS
我试图在网站中使用 SVG 路径进行动画来实现这一点（如下图）。我看到这个https://css-tricks.com/svg-line-animation-works/并想尝试一下。但我不确定如何创建路径和动画。请帮助我！谢谢
4
推荐指数
推荐指数
1
解决办法
解决办法
3247
查看次数
查看次数
向SVG笔触动画添加箭头
我正在尝试获取包含SVG徽标的动画箭头。我使笔触动画起作用，但是我不确定如何使箭头位于该行的前面。
我想要实现的一个示例是/sf/ask/3188212121/ -drawn＃=
.shape svg {
width:100%;
height: auto;
}
.outline {
stroke-dasharray: 32050;
animation: dash 2s linear forwards;
stroke-linejoin: round;
}
@keyframes dash {
from {
stroke-dashoffset: 32050;
}
to {
stroke-dashoffset: 0;
}
}<div class="shape">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1350 370" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,540.000000) scale(0.100000,-0.100000)" fill="#2e3464" stroke="none">
<path transform="translate(13150 7150) rotate(180 180 0)" class="outline" fill="none" stroke="#2e3464" stroke-width="200" d="M338 5250 c-61 -33 -103 -83 -116 -140 -17 -72 -17 -2995 -1 -3072 14 -61 …4
推荐指数
推荐指数
1
解决办法
解决办法
210
查看次数
查看次数
Chrome不适用于线性渐变的属性偏移动画
下面的代码在中非常Firefox有用，但是对线性渐变的offset属性进行动画处理的任何尝试Chrome都没有成功。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0" y1="0" x2="900" y2="900" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="dodgerblue"/>
<stop offset="52%" stop-color="white">
<animate
attributeName="offset"
values="100%;0%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
<stop offset="100%" stop-color="gold">
<animate
attributeName="offset"
values="100%;50%;100%"
dur="4s"
repeatCount="indefinite">
</animate>
</stop>
</linearGradient>
</defs>
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="url(#bgg)" />
</svg> 也尝试使用 gradientUnits =" objectBoundingBox "
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 900 900" >
<defs>
<linearGradient id="bgg" x1="0%" y1="0%" x2="100%" …4
推荐指数
推荐指数
1
解决办法
解决办法
88
查看次数
查看次数
按照表单制作 SVG 填充形状动画
我想知道如何使用 html5/css3 连续填写表单来创建加载图标（旋转器）。
填充应遵循红线 (3) 并在到达末端时保持形状相同的方向 (6) 如果它是一条细线，我可以使用假线动画，但如何使用较粗的形状来做到这一点像这样？
<svg version="1.1" id="Loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 255 255" style="enable-background:new 0 0 255 255; width: 255px; height: 255px" xml:space="preserve">
<g>
<path d="M169.9,73.6c9,6.2,15.3,14.9,20,23.3c4.7,8.3,7.1,17.2,7.1,26.7c0,4.9-0.7,9.6-2.1,14c-1.4,4.5-3.5,8.7-6.3,12.6
c-7.1,9.8-16.7,17.7-28.7,23.6c-12.1,5.9-24.7,8.9-37.8,8.9c-7.9,0-15.5-1.6-23-4.8c-7.5-3.2-14.2-7.8-20.1-13.7
c-5.8-6-10.4-12.6-13.5-20.1c-3.2-7.4-4.8-15-4.8-22.8c0-10.4,3.1-20.1,9.2-29.1c6.1-9,15.5-17.5,28-25.5c0,0,5.8-4.2,10.9-4.2
c5.1,0,11.1,3.1,6.6,10.3c-4.5,7.2-6.8,14.3-6.8,21.1c0,6.7,2.3,12.4,6.8,16.8c4.5,4.5,10.2,6.7,17,6.7c6.2,0,11.4-2.3,15.6-7
c4.1-4.7,6.2-10.6,6.2-17.7c0-4.9-1-9.5-3-13.7c-2-4.3-1.3-10.6,4.2-11.5C160.7,66.7,169.9,73.6,169.9,73.6z"/>
</g>
</svg>4
推荐指数
推荐指数
1
解决办法
解决办法
758
查看次数
查看次数
SVG 动画在 Safari 13.1 (Mac OS & IOS) 中挣扎
我刚刚意识到 macOS 10.15.4 和 iOS 13.4 附带的最新版本的 Safari (v13.1) 不再支持 SVG 文件中的 css 动画。我使用这个技巧在我的投资组合上显示加载动画。现在只显示 sag 文件的第一帧，动画没有开始。 https://jbkaloya.com
Chrome 或 Firefox 没有问题。
编辑
这是文件嵌入页面的相应 CSS 属性
.loading {
background-color: $black-color;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
z-index: 1100;
opacity: 1;
transition: opacity .4s 0s cubic-bezier(.455,.03,.515,.955), z-index 0s 0s linear;
&::before {
content: '';
background-image: url(../images/logoanimated.svg);
background-position: center;
background-repeat: no-repeat;
position: absolute;
display: flex;
width: 100%;
height: 100%;
max-width: 22rem;
margin: auto;
left: 0; …3
推荐指数
推荐指数
1
解决办法
解决办法
3476
查看次数
查看次数