使用css为svg设置动画
提问于 2015-08-29 17:45:15
我需要(使用css)制作SVG动画，但我不想将所有SVG代码嵌入到页面中。
在寻找了在页面中包含我的svg并且仍然能够使其具有动画效果的方法之后，我发现唯一不嵌入svg原始数据的方法是使用一个对象，但是任何制作svg动画效果的css都需要包含在样式标签中或者从svg文件链接到它。这对我来说并不是一个真正的选择。
然后我看了一下Snap，它工作得很好，但后来我发现我可以通过jquery加载外部文件，并使用CSS动画：
$('.mysvg').load('path/to/my-svg.svg');我的问题是，这样做有什么限制或需要注意的地方吗？我是否遗漏了一些明显的东西，当我阅读了无数关于svg动画的博客文章时，我没有看到这样做的例子。
回答 1
Stack Overflow用户
发布于 2015-08-29 18:10:52
您应该仍然能够使用transition或animation等任何CSS3特性来制作SVG动画。<svg>的处理方式与普通的DOM元素相同，所以只要它们有正确的类，并且没有任何可能覆盖style的属性，就应该是好的。有一个很好的演示文稿here，它谈到了嵌入式样式，以及要注意的东西。
同样关于你的第一点，你可以从技术上做到这一点，但理想情况下，唯一真正的好处是它清理了你的HTML，使你看不到它。使用这种方法需要等待JavaScript加载完成，容器位于DOM中，然后才能加载SVG。你可以内联你的SVG，但是就像你说的，你不想这样做。这就是为什么人们使用服务器端的PHP，从服务器端他们可以做像这样的事情
<div class="mysvg">
<?php include_once("path/to/my-svg.svg") ?>
</div>因此，它仍然被分割，但它不是由客户端动态加载的。
将SVG直接放在HTML代码中感觉很麻烦，但我认为这是SVG最棒的事情之一。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32289030
复制相关文章
点击加载更多
腾讯云开发者
