css:

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; image { animation: step 1.2s steps(5) infinite; } } @keyframes step { 100% { transform: translate3d(-1800px, 0, 0); } } 方案C的改良

实现方案C很好地解决了方案A和方案B的缺陷，不过方案C也有它的问题：不利于自动化工具去处理图片。

自动化工具一般是怎么处理图片的？
自动化工具一般是扫描 CSS 文件找出所有的 url(…) 语句，然后再处理这些语句指向的图片文件。

如果 <image> 可以改用 CSS 的 background-image 就可以解决这个问题，不过 SVG 不支持 CSS 的 background-image。但是，SVG有一个扩展标签：foreignObject，它允许向 <svg></svg> 插入 html 代码。在使用它前，先看一下它的兼容情况：

iOS 与 Android 4.3 一片草绿兼容情况算是良好，笔者实机测试腾讯 X5 内核的浏览器兼容仍旧良好。以下是改良后的方案。

html:

css:

.steps_anim { position: absolute; width: 9rem; height: 13.5rem; top: 50%; left: 50%; margin: -5.625rem 0 0 -5.625rem; } .html { width: 360px; height: 540px; } .img { width: 1800px; height: 540px; background: url() 0 0 no-repeat; background-size: 1800px 540px; animation: step 1.2s steps(5) infinite; } @keyframes step { 100% { background-position: -1800px 0; } }

改良后的方案DEMO:

结语

感谢阅读完本文章的读者。本文是笔者的个人观点，希望能帮助到有相关问题的朋友，如果本文有不妥之处请不吝赐教。

参考资料

https://stackoverflow.com/questions/9946604/insert-html-code-inside-svg-text-element
https://www.w3.org/TR/SVG/extend.html
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

感谢您的阅读，本文由 凹凸实验室 版权所有。如若转载，请注明出处：凹凸实验室（https://aotu.io/notes/2017/08/14/fix-sprite-anim/）