使用 css 为 svg 设置动画答案

【问题标题】：Animating an svg with css使用 css 为 svg 设置动画
【发布时间】：2015-08-29 17:45:15
【问题描述】：

我需要为 SVG 制作动画（使用 css），但我不想将所有 SVG 代码嵌入到页面中。

在查看了将我的 svg 包含在页面中并且仍然能够对其进行动画处理之后，我发现没有嵌入 svg 原始数据的唯一方法是使用一个对象，但是任何对 svg 进行动画处理的 css 都需要包含在样式标签中或从 svg 文件链接到。这对我来说不是一个真正的选择。

然后我查看了运行良好的 Snap，但后来我发现我可以通过 jquery 加载外部文件并使用 CSS 制作动画：

$('.mysvg').load('path/to/my-svg.svg');

我的问题是，这样做有什么限制或我应该注意的事情吗？我是否遗漏了一些明显的东西，在阅读无数关于 svg 动画的博客文章时，我没有看到这样做的例子。

【问题讨论】：

这取决于什么类型的css动画。如果 css3 作为实现当前不一致，您可能需要检查浏览器对您想要做的任何特定事情的支持。与 Snap 相比，您失去了细粒度的控制，但您可能不需要它。这也可能取决于您是否与鼠标进行交互，那么像 css 转换之类的东西可能需要额外考虑。基本上，需要更多信息来了解您的情况是否有任何缺点。
我只是使用简单的转换，例如：transform: translateY(20%);所以我不需要使用 snap 吗？直接用jquery加载图片，然后用css做动画？
我不记得 jquery 是否可以在 svg 上为 css 设置动画，否则可能会有 jquerysvg。基本变换应该没问题，但如果你需要像 transform-origin 这样的东西来处理旋转等东西，你可能会发现不一致。

标签： javascript jquery html svg snap.svg

【解决方案1】：

您仍然应该能够使用任何 CSS3 功能（例如 transition 或 animation）为 SVG 制作动画。 <svg> 被视为与普通 DOM 元素相同的方式，只要它们具有正确的类并且它们没有任何可能覆盖 CSS 的 style 属性，你应该很好。有一个很好的演示文稿here 讨论了嵌入式样式以及需要注意的事项。

同样关于您的第一点，您可以在技术上做到这一点，但理想情况下，唯一真正的好处是它可以清理您的 HTML，因此您看不到它。这样做需要您等待 JavaScript 加载并且容器在 DOM 中，然后才能加载您的 SVG。您可以内联您的 SVG，但就像您说的那样，您不想这样做。这就是为什么人们使用服务器端的 PHP 并从那里他们可以做类似的事情

<div class="mysvg">
    <?php include_once("path/to/my-svg.svg") ?>
</div>

这样它仍然被分割，但它不是由客户端动态加载的。

将 SVG 直接放在 HTML 代码中感觉很糟糕，但我认为这是 SVG 最棒的事情之一。

【讨论】：

当然，另一个好处是缓存图像？使用编码内联不会缓存？
@panthro 虽然它不是图像，但这是一个重要的区别。 -- 当您使用load 函数时，您就像插入代码一样插入它。直接来自documentation -- 从服务器加载数据并将返回的 HTML 放入匹配的元素中。