我正在创建 SVG 加载动画，需要在加载或请求网页时在前端显示，但是我不知道调用一系列 SVG 动画的最佳解决方案是什么是。
我知道我可以将 SVG 存储在 CDN 上并以这种方式请求图像
而且我知道我也可以将 SVG 原始脚本存储在 HTML 中，但是我的 SVG 动画需要在不同情况下可重用，例如 我希望它小到按钮大小或整页白色背景等。
我的想法是将一系列原始 SVG 存储在一个 html 文档中，就像一个 sprite 表一样，并包装在所有不同情况下的类中，例如一种尺寸小，一种尺寸大，一种带有白色背景等，然后进行查询，在需要时产生这些不同类型的 SVG 动画。但我觉得这是完全错误的，任何人都可以帮助我指出正确的方向吗？
感谢您的宝贵时间。
最佳答案
有几种方法可以解决这个问题。
第一种方式
将您的 SVG 文件保存为单独的 .svg文件并将其包含在您需要的任何地方 <img src="/path/to/animation.svg" /> .
第二种方式
将 SVG 存储在 sprite 中并将其包含在您的文档中。它必须在您真正想要使用 Sprite 之前包含在内，否则 Internet Explorer 会不高兴。或者使用 polyfill .
这也可以分为两种不同的方式，内联和外部。
内联
只需将原始 SVG 代码吐出到页面模板中并引用 sprite <svg xlink:href="#svganimation"></svg> .
外部
与上面非常相似，但是您将 SVG 存储在单独的文件中并引用 Sprite <svg xlink:href="/path/to/sprite.svg#animation></svg> .
这些技术的缺点是您无法使用 CSS 控制 Sprite 的样式，所有动画都必须在 SVG 文件本身或使用 JS 中完成。
第三种方式
使用模板语言并在您需要的任何地方包含原始 SVG 代码。您可以使用 CSS 设置动画和样式，但会失去缓存优势。
结论
任何技术都没有本质上的错误，但是对于较大的动画，拥有 Sprite 表可能会变得难以管理，并且您可能会无缘无故地加载更大的文件，因此您会失去一些缓存优势。它对图标更有用。使用完全内联的 SVG 会丢失任何浏览器缓存，但您可以通过 CSS 获得动画的便利性。
关于javascript - SVG 动画导入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44564876/