开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >使用css为svg设置动画

问使用css为svg设置动画
EN

Stack Overflow用户

提问于 2015-08-30 01:45:15

回答 1查看 123关注 0票数 0

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

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

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

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

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

EN

回答 1

Stack Overflow用户

发布于 2015-08-30 02: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最棒的事情之一。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32289030

复制

相似问题