Question

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

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

然后我看了一下效果很好的Snap，但后来我发现我可以通过jquery加载外部文件并使用CSS动画：

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

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

Answer 1

您仍然可以使用transition或animation等任何CSS3功能为SVG制作动画。 <svg>的处理方式与普通的DOM元素相同，只要它们具有适当的类，并且它们没有任何可能覆盖CSS的style属性，那么你应该是好的。有一个很好的演示文稿here，讨论嵌入式样式，以及需要注意的内容。

另外关于你的第一点，你可以在技术上做到这一点，但理想情况下唯一真正的好处是它清理你的HTML，所以你不会看到它。这样做需要您在加载SVG之前等待JavaScript加载并将容器放在DOM中。你可以内联你的SVG，但就像你说你不想要的那样。这就是为什么人们使用服务器端的PHP，从那里他们可以做像

这样的事情

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

这样它仍然被切断了，但它没有被客户端动态加载。

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

用css动画svg

1 个答案: