SVG在移动端动画卡顿怎么办？
我在用 Vue 做一个移动端的加载动画，用了 SVG 的 animateTransform，但在 iOS Safari 上特别卡，安卓也掉帧。本地开发时 Chrome 看着挺流畅的，一到真机就崩，是不是我写法有问题？
试过加 will-change 和 transform: translateZ(0)，都没啥用。下面是我用的代码：
<template>
<svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="10" fill="#333">
<animateTransform
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="1s"
repeatCount="indefinite"
/>
</circle>
</svg>
</template>- 2
回答
66浏览
如何让SVG动画在移动端流畅播放？
最近我在做一个项目，需要在手机上展示一些SVG动画。但是发现动画播放时卡顿明显，特别是在安卓设备上。 我试过优化了SVG文件大小，也减少了动画的复杂度，但效果还是不理想。想知道有没有什么特别的方法或者...
- 2
回答
25浏览
SVG路径动画在不同浏览器显示效果不一致怎么办？
我正在用SVG做加载动画，给路径加了stroke动画，代码看起来没问题，但Chrome显示正常，Firefox却有明显抖动，Safari直接偏移了。折腾了半天，但效果还是不对，求大神指点！ 代码是这样...
- 1
回答
10浏览
Figma导出的SVG在网页中显示不一致怎么办？
我从Figma导出SVG图标后，放到项目里发现颜色和间距跟设计稿对不上，明明在Figma里看起来没问题。试过直接复制SVG代码和下载文件两种方式，结果都一样。 比如这个按钮的样式，Figma里是纯黑#...
- 2
回答
25浏览
移动端用requestAnimationFrame动画卡顿怎么办？
搞不懂啊，用requestAnimationFrame写了个简单的位移动画，在手机上测试的时候滑动页面会卡顿。代码就是标准的rAF写法： let pos = 0; function animate()...
- 2
回答
69浏览
React中动态更新SVG path路径数据后图形没变化怎么办
我在用React画SVG折线图的时候遇到个奇怪问题，当通过输入框动态修改坐标数组后，虽然状态更新了但path路径就是不重新渲染。比如我改了第三个点的Y坐标，其他点都正常就是最后一个点不动。 impor...
- 1
回答
194浏览
Figma导出的SVG在网页中显示变形怎么办？
在Figma里导出的SVG图标到网页上总变形，比如原本正圆变成椭圆，调整过width/height属性也不行。用标签和直接写入HTML的inline SVG都试过了，还是有问题： 用标签这样： <...
- 1
回答
51浏览
SVG图标优化后显示模糊怎么办？
我给项目里加了好多SVG图标，压缩后反而变模糊了？ 最近在优化网页图标资源，把所有SVG图标用SVGO压缩后，虽然文件体积变小了，但在Retina屏上看明显发虚。之前直接这样引入的： <svg ...
- 2
回答
51浏览
Figma导出SVG后路径坐标错位怎么办？
我在Figma导出SVG图标时，发现部分路径坐标明显偏移了。比如导出一个简单的箭头图标，原本在设计稿居中的三角形，在浏览器里却贴到左上角去了。 试过调整viewBox属性，把原来的"0 0 100 1...
- 2
回答
54浏览
SVG图标在深色背景上显示模糊怎么办？
最近把项目里的PNG图标换成SVG后，发现图标在深色背景区域看起来特别模糊。用的是内联SVG加CSS控制颜色，但调整了fill属性好像没效果。 .icon { width: 24px; fill: c...
- 2
回答
15浏览
移动端点击按钮后动画卡顿怎么办？
我在做一个移动端的点赞按钮，点击后想让它有个缩放动画，但在真机上测试时发现动画特别卡，尤其在低端安卓机上几乎掉帧。我试过用 transform 替代 width/height 变化，也加了 will-...
animateTransform这种）在移动端性能就是不行，W3C文档都建议用CSS动画替代了。推荐的做法是把SVG动画改成CSS transform：
几个关键点：
1. 移除
animateTransform改用CSS动画2. 必须设置
transform-origin，不然旋转中心不对3. 实测加上
will-change: transform在iOS12+有用如果还卡，可以试试用requestAnimationFrame手动控制旋转，虽然代码量多点但性能最好。最近项目里用这个方案，连老款Android机都能跑60fps。
问题根源在于你用的
animateTransform是SVG的SMIL动画，这玩意儿在移动端浏览器上性能支持特别差，尤其是iOS Safari。Chrome桌面端看着流畅是因为它对SMIL做了优化，但真机上的WebView可没这待遇。而且SMIL动画很难触发GPU加速，你加will-change和translateZ(0)基本是白搭，因为那是对CSS生效的，对SMIL不管用。血泪教训：移动端做动画，能不用SMIL就别用，直接换成CSS动画搞定。
给你改好的代码：
改成CSS动画后，
will-change: transform才能真正发挥作用，GPU加速也能正常触发。这样在iOS和安卓上都会流畅很多。还有个小建议，如果这个loading动画比较简单，其实可以直接用纯CSS画个圆，连SVG都不用，性能会更好。SVG在移动端渲染本身就有一定开销，能省则省。