腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >SVG动画G-元素

问SVG动画G-元素
EN

Stack Overflow用户

提问于 2016-11-25 01:27:06

回答 1查看 3.2K关注 0票数 4

我目前正在学习如何用CSS动画svg对象。

我现在知道如何用以下方法来激活一条路径：

@keyframes stroke_fill {
    0% {
        fill: white;
    }
    50% {
        fill: white;
        stroke-dashoffset: 0;
    }
    100% {
        fill: black;
        stroke-dashoffset: 0;
    }
}

.animation{
    animation: stroke_fill 4s ease forwards;
    stroke-dasharray: 324.774;
    stroke-dashoffset: 324.774; 
}

分组在一起的路径显示在<g>标记中。

是否可以对<g>标记进行动画化？

如果所有的孩子都有相同的动画和相同的时间，那就太好了。

现在，我必须给每个路径一个类，如果我运行一个复杂的svg文件，它需要花费大量的时间。

分组做这件事会节省很多时间。

下面是一个Fiddle：https://jsfiddle.net/vvvwcrdy/

css

animation

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-25 01:35:09

是的是可能的。你试过了吗？

演示：

@keyframes stroke_fill {
    0% {
        fill: white;
    }
    50% {
        fill: white;
        stroke-dashoffset: 0;
    }
    100% {
        fill: black;
        stroke-dashoffset: 0;
    }
}

.animation{
    animation: stroke_fill 4s ease forwards;
    stroke-dasharray: 324.774;
    stroke-dashoffset: 324.774; 
    stroke: red;
    stroke-width: 10;
}

<svg>
  <g class="animation">
    <rect x="20" y="20" width="120" height="120" />
    <rect x="160" y="20" width="120" height="120" />
  </g>
</svg>

票数 6

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

原文链接：

https://stackoverflow.com/questions/40801538

复制

SVG - 动画制作

svg canvas html5 xml css

SVG - 动画制作 HTML5学堂：SVG - 动画制作。上一篇文章讲解了SVG的基本属性，大家能够利用SVG的基本属性进行绘制图像，那么如何让绘制好的图像动起来呢？今天要给大家分享的是SVG的动画制作，具体我们来看看下面的内容吧。接触过HTML5的人，都知道，Canvas实现一个动画，需要不断的清除画布再重新绘制，如果没有接触过Canvas也不要紧，SVG之后我们紧接着要为大家介绍的就是Canvas。SVG提供了比较方便的API接口，动画实现起来比较方便，具体看看下面的动画命令。 SVG 动画基本命

HTML5学堂

2018/03/12

3.2K0

[译]SVG动画简介

svg html javascript css

你可以把这篇文章看做通往精通SVG动画之路的第一步，里面的链接资源也是很好的学习资料。所以赶紧收藏本文然后开始你的精通SVG之旅吧。

小刀c

2022/08/16

1.6K0

一篇文章带你了解SVG <Animation> 动画元素

svg css

SVG <Animation> 动画元素用于为SVG图形制作动画。动画元素最初是在同步多媒体集成语言（SMIL）中定义的。在动画中，必须指定属性，运动，颜色，动画的开始时间和动画的持续时间的开始和结束值。

前端进阶者

2021/01/22

3K0

SVG 动画精髓

其他

TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。例如：路径动画图形渐变：线条动画：以及，相关的动画的矩阵知识，

villainhr

2018/07/03

3.4K0

【Web动画】SVG 线条动画入门

css javascript

通常我们说的 Web 动画，包含了三大类。 CSS3 动画 javascript 动画（canvas） html 动画（SVG）个人认为 3 种动画各有优劣，实际应用中根据掌握情况作出取舍，本文讨论

Sb_Coco

2018/05/28

2.3K0

SVG与foreignObject元素

渲染 svg text 后端浏览器

可缩放矢量图形Scalable Vector Graphics - SVG基于XML标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS、DOM、JavaScript等其他网络标准无缝衔接。SVG图像及其相关行为被定义于XML文本文件之中，这意味着可以对其进行搜索、索引、编写脚本以及压缩，此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑SVG。

WindRunnerMax

2023/08/13

5540

SVG 动画精髓（下）

svg

本文作者：ivweb villainthr 接SVG 动画精髓（上）线条动画 SVG 中的线条动画常常用作过渡屏（splash screen）中。例如：或者，一些比较炫酷的 LOGO 中，比如

腾讯IVWEB团队

2017/07/07

1.8K0

SVG 动画精髓（上）

svg 图像处理

本文作者：ivweb villainthr TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。例如：路径动画图形

腾讯IVWEB团队

2017/07/06

3.6K0

【Web动画】SVG 实现复杂线条动画

svg

在上一篇文章中，我们初步实现了一些利用基本图形就能完成的线条动画：【Web动画】SVG 线条动画入门当然，事物都是朝着熵增焓减的方向发展的，复杂线条也肯定比有序线条要多。很多时候，我们无法人工去

Sb_Coco

2018/05/28

1.9K0

随便做的svg动画

网络安全

2. 以上情况下atrributeName = "height"会被微信公众号的富文本编辑器过滤掉（出现在百叶窗那个例子中）

用户3258338

2021/01/04

1.1K0

初窥 SVG Path 动画

svg css

本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题，是因为在项目中有要求用到它。所谓 SVG Path 动画，就是让图形有像人实时绘制一样的动画效果，就比如下面这种：

IMWeb前端团队

2019/12/04

2.1K0

初窥 SVG Path 动画

图像处理 svg

本文主要介绍了如何使用 SVG Path 实现绘制可循环播放的动画，包括动画的起点、终点和循环路径，以及如何使用 CSS3 的 keyframes 和 animation 实现动画效果。同时，还介绍了一些 SVG Path 的常见属性，包括 stroke-dasharray、stroke-dashoffset 等，以及如何通过修改这些属性来实现动画效果。

IMWeb前端团队

2017/12/29

2.9K0

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

其他

1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame

用户1258909

2018/07/24

3.7K0

SVG滤镜波浪动画效果

svg 动画

今天给大家分享一个用SVG实现的滤镜波浪动画效果，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <me

越陌度阡

2020/11/26

9740

SVG 路径动画简易指南

svg javascript css

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！ SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

疯狂的技术宅

2019/03/27

3.6K0

SVG 文字sin型曲线动画

其他

先上图：未命名项目.gif 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

张风捷特烈

2018/09/26

1.6K0

SVG 线条动画基础入门知识

svg flash css xml

1、CSS3 动画 2、javascript 动画（canvas） 3、html 动画（SVG）

Javanx

2019/09/04

2.9K0

元素的动画

html transform width 动画函数

转换（transform），也称变形。就是改变元素在页面中的位置，大小，角度以及形状。

云叶知秋

2023/10/16

1490

【案例】SVG卡通赛车加载动画特效

svg

点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源

用户1730674

2020/05/22

8980

带你轻松打开SVG动画的大门

数据库机器学习人工智能

初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo

练小习

2017/11/30

9000

相似问题

jQuery动画SVG元素

svg同步动画元素

SVG动画丢弃元素

115

动画SVG路径元素

JavaScript SVG连续添加动画元素到SVG元素

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问SVG动画G-元素
EN

回答 1

Stack Overflow用户

jQuery动画SVG元素

svg同步动画元素

SVG动画丢弃元素

动画SVG路径元素

JavaScript SVG连续添加动画元素到SVG元素

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG动画G-元素EN

回答 1

Stack Overflow用户

jQuery动画SVG元素

svg同步动画元素

SVG动画丢弃元素

动画SVG路径元素

JavaScript SVG连续添加动画元素到SVG元素

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG动画G-元素
EN