`
天梯梦
  • 浏览: 13763440 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

SVG动画入门（二）

 
阅读更多

Usage context

Categories Value Animatable Normative document
Animation timing attribute
<begin-value-list>
No
SVG 1.1 (2nd Edition)

Each value from the <begin-value-list> can be one of the following:

<offset-value>
A Clock-value that represents a point in time relative to the beginning of the SVG document (usually the load or DOMReady event). Negative values are valid.
<syncbase-value>
Describes a syncbase and an optional offset from that syncbase. The element's animation start time is defined relative to the begin or active end of another animation. A syncbase consists of an ID reference to another animation element followed by either .begin or .end to identify whether to synchronize with the beginning or active end of the referenced animation element.
<event-value>
Describes an event and an optional offset that determines the time at which the element's animation should begin. The animation start time is defined relative to the time that the specified event is fired. A valid event-value consists of an element ID followed by a dot and one of the supported events for that element. All the valid events (not necessarily supported by all elements) are: focusin, focusout, activate, click, mousedown, mouseup, mouseover, mousemove, mouseout, DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified, SVGLoad, SVGUnload, SVGAbort, SVGError, SVGResize, SVGScroll, SVGZoom, beginEvent, endEvent and repeatEvent.
<repeat-value>
Describes a qualified repeat event. The element animation start time is defined relative to the time that the repeat event is raised with the specified iteration value.
<accessKey-value>
Describes an accessKey that should trigger the animation. The element animation will begin when the user presses the specified key.
<wallclock-sync-value>
Describes the animation start time as a real-world clock time. The time syntax is based upon the syntax defined in ISO8601.

 

Examples

 

Offset example

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

	<rect x="10" y="35" height="15" width="0">
		<animate attributeType="XML"
				 attributeName="width"
				 to="100"
				 dur="8s"
		         begin="0s"
				 fill="freeze" />
	</rect>
	
	<rect x="35" y="60" height="15" width="0">
		<animate attributeType="XML"
				 attributeName="width"
				 to="75"
				 dur="6s"
		         begin="2s"
				 fill="freeze" />
	</rect>
	
	<rect x="60" y="85" height="15" width="0">
		<animate attributeType="XML"
				 attributeName="width"
				 to="50"
				 dur="4s"
		         begin="4s"
				 fill="freeze" />
	</rect>
	
	<!-- steps -->
	
	<text x="10" y="20" text-anchor="middle">0s</text>
	<line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
	<text x="35" y="20" text-anchor="middle">2s</text>
	<line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
	<text x="60" y="20" text-anchor="middle">4s</text>
	<line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
	<text x="85" y="20" text-anchor="middle">6s</text>
	<line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
	<text x="110" y="20" text-anchor="middle">8s</text>
	<line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
	
	<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
	<line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>

 

» begin-1-offset.svg

 

Syncbase example

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

	<rect x="10" y="35" height="15" width="0">
		<animate id="first"
		         attributeType="XML"
				 attributeName="width"
				 to="50"
				 dur="4s"
		         begin="0s;third.end" />
	</rect>
	
	<rect x="60" y="60" height="15" width="0">
		<animate id="second"
		         attributeType="XML"
				 attributeName="width"
				 to="25"
				 dur="2s"
		         begin="first.end" />
	</rect>
	
	<rect x="85" y="85" height="15" width="0">
		<animate id="third"
		         attributeType="XML"
				 attributeName="width"
				 to="25"
				 dur="2s"
		         begin="second.end" />
	</rect>
	
	<!-- steps -->
	
	<text x="10" y="20" text-anchor="middle">0s</text>
	<line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
	<text x="35" y="20" text-anchor="middle">2s</text>
	<line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
	<text x="60" y="20" text-anchor="middle">4s</text>
	<line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
	<text x="85" y="20" text-anchor="middle">6s</text>
	<line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
	<text x="110" y="20" text-anchor="middle">8s</text>
	<line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
	
	<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
	<line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>

 

» begin-2-syncbase.svg

 

Event example

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

	<rect x="10" y="35" height="15" width="0">
		<animate begin="startButton.click"
		         attributeType="XML"
				 attributeName="width"
				 from="0"
				 to="100"
				 dur="8s"
				 fill="freeze" />
	</rect>
	
	<rect id="startButton" style="cursor:pointer;"
	      x="19.5" y="62.5" rx="5" height="25" width="80"
		  fill="#EFEFEF" stroke="black" stroke-width="1" />
	
	<text x="60" y="80" text-anchor="middle"
	      style="pointer-events:none;">Click me.</text>
	
	<!-- steps -->
	
	<text x="10" y="20" text-anchor="middle">0s</text>
	<line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
	<text x="35" y="20" text-anchor="middle">2s</text>
	<line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
	<text x="60" y="20" text-anchor="middle">4s</text>
	<line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
	<text x="85" y="20" text-anchor="middle">6s</text>
	<line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
	<text x="110" y="20" text-anchor="middle">8s</text>
	<line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
	
	<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
	<line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

 

» begin-3-event.svg

 

Repeat example

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

	<rect x="10" y="35" height="15" width="0">
		<animate id="myLoop"
		         begin="0s;myLoop.end"
		         attributeType="XML"
				 attributeName="width"
				 from="0"
				 to="100"
				 dur="4s"
				 repeatCount="3" />

		<set begin="myLoop.begin"
		     attributeType="CSS"
		     attributeName="fill"
		     to="green" />
		
		<set begin="myLoop.repeat(1)"
		     attributeType="CSS"
		     attributeName="fill"
		     to="gold" />
		
		<set begin="myLoop.repeat(2)"
		     attributeType="CSS"
		     attributeName="fill"
		     to="red" />
	</rect>
	
	<!-- steps -->
	
	<text x="10" y="20" text-anchor="middle">0s</text>
	<line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
	<text x="35" y="20" text-anchor="middle">1s</text>
	<line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
	<text x="60" y="20" text-anchor="middle">2s</text>
	<line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
	<text x="85" y="20" text-anchor="middle">3s</text>
	<line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
	<text x="110" y="20" text-anchor="middle">4s</text>
	<line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
	
	<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
	<line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

 

» begin-4-repeat.svg

 

Accesskey example

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

	<rect x="10" y="35" height="15" width="0">
		<animate begin="accessKey(s)"
		         attributeType="XML"
				 attributeName="width"
				 from="0"
				 to="100"
				 dur="8s"
				 fill="freeze" />
	</rect>
	
	<text x="60" y="80" text-anchor="middle"
	      style="pointer-events:none;">Hit the "s" key</text>
	
	<!-- steps -->
	
	<text x="10" y="20" text-anchor="middle">0s</text>
	<line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
	<text x="35" y="20" text-anchor="middle">2s</text>
	<line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
	<text x="60" y="20" text-anchor="middle">4s</text>
	<line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
	<text x="85" y="20" text-anchor="middle">6s</text>
	<line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
	<text x="110" y="20" text-anchor="middle">8s</text>
	<line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
	
	<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
	<line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

 

» begin-5-accesskey.svg

 

Elements

The following elements can use the begin attribute:

 

原文：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin

本文：SVG动画入门（二）

 

分享到：
| SVG技术入门：线条动画实现原理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    SVG经典入门(SVG应用指南) 完整带目录

    SVG，全称为Scalable Vector Graphics，即可缩放矢量图形，是一种基于XML标准的图像格式，用于描述二维矢量图形。SVG格式属于矢量图形的标准，具备了矢量图的所有特点，如无限放大缩小不失真、基于路径而非像素的...

    svg经典入门书籍.pdf

    5. **SVG动画**：介绍`&lt;animate&gt;`元素和其他动画技术，以及如何实现时间线和交互式动画。 6. **SVG与HTML的集成**：讲解如何在HTML文档中嵌入SVG，以及如何利用JavaScript进行交互。 7. **SVG优化与性能**：讨论如何...

    SVG经典教程1 (SVG从入门到精通)

    这个“SVG经典教程1 (SVG从入门到精通)”上册，作为初级教程，旨在帮助读者快速掌握SVG的基本概念和实践技巧。 教程可能涵盖以下关键知识点： 1. SVG基础知识：解释SVG的定义，以及与位图（如JPEG或PNG）的区别。...

    SVG经典教程2 (SVG从入门到精通)

    SVG通过`&lt;animate&gt;`、`&lt;animateTransform&gt;`等元素实现动画效果，结合JavaScript还可以实现更丰富的交互功能。 ### 11. 集成到HTML SVG可以通过内联方式直接嵌入HTML，也可以作为外部资源引用，利用`&lt;object&gt;`或`...

    svg入门pdf文档

    ### SVG入门PDF文档知识点梳理 #### 一、SVG简介 - **定义**：SVG（Scalable Vector Graphics）是一种基于XML的语言，用于描述二维矢量图形。它由W3C组织制定并维护，当前版本为1.1。 - **特点**： - 可缩放性：...

    SVG基础入门教材(doc版)

    3. **JavaScript库**：如Snap.svg、d3.js等库提供了更高级的SVG动画和交互功能。 **SVG的优点：** 1. **矢量图形**：无论放大多少倍，图像始终清晰。 2. **轻量级**：SVG代码简洁，文件小，加载速度快。 3. **跨...

    SVG快速入门简介文档

    **SVG（Scalable Vector Graphics）**是一种基于XML（Extensible Markup Language）的二维矢量图像格式，用于在Web上创建和展示图形。它允许开发者和设计师创建清晰、可缩放且不失真的图像，无论放大多少倍都能保持...

    WorkFlow SVG 入门与提高

    - **SVG动画**：SVG不仅支持静态图像，还支持动画，这使得SVG成为创建动态图表和动画的良好选择。可以使用SMIL（Synchronized Multimedia Integration Language）或者CSS动画来实现。 - **SVG的安全性**：由于SVG...

    SVG 入门教程(二) 定义和组

    在本篇SVG入门教程(二)中，我们将深入探讨SVG（Scalable Vector Graphics）的基本概念，以及如何在SVG中定义和组织元素。SVG是一种基于XML的矢量图像格式，它允许我们创建可缩放、高质量的图形，适用于网页和其他...

    使用CSS3实现SVG路径描边动画效果入门教程

    在CSS3中，SVG（可缩放矢量图形）提供了丰富的样式和动画功能，使得创建动态、美观的图形成为可能。本教程将介绍如何利用CSS3实现SVG路径的描边动画效果，无需依赖JavaScript，完全使用CSS来完成。首先，我们要理解...

    SVG经典入门

    SVG，全称Scalable Vector Graphics，是一种使用XML（可扩展标记语言）描述二维图形的矢量图格式。它的核心优势在于，无论放大多少倍，图像都能保持清晰，不会出现像素化的现象，这对于网页设计、移动应用以及需要高...

    smil2css:SVG动画支持IE10 +和

    支持IE10 +和的SVG动画。 不幸的是，Internet Explorer不支持SVG动画（SMIL）。 其他解决方案（例如使用JavaScript重新创建动画。 这不仅关闭了禁用JavaScript的用户，而且需要额外的下载，并且比CSS动画的执行...

    SVG 入门教程(一) 基本形状

    在这个SVG入门教程的第一部分，我们将探讨SVG的基本形状。 SVG图像由一系列几何形状构成，包括矩形、圆形、椭圆、线条、多边形和路径等。这些形状可以通过SVG的XML语法来定义。下面我们将逐一详细介绍这些基本形状...

    用于vue引入SVG入门的学习材料

    8. **CSS与SVG结合**：利用CSS可以实现SVG的动画效果，如变换、过渡和关键帧动画。此外，CSS还可以用来控制SVG的填充色、描边宽度等属性，实现图形的动态变化。 通过上述方法，你可以在Vue项目中灵活地引入和管理...

    HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用

    SVG拥有良好的用户交互性：SVG能响应大部分的DOM2事件,SVG能通过cursor良好的捕捉用户鼠标的移动等等，感兴趣的朋友可以了解下啊，或许本文对你学习动画有所帮助

    HTML SVG绘图.zip_zip压缩包

    1. **10 个非常有用的 SVG 动画的 JavaScript 库**：这些库可能提供了丰富的预设动画效果，简化了开发者创建SVG动画的难度。 2. **html5 svg绘图制作绘制卡通树动画特效**：这个教程可能讲解了如何使用SVG和...

    svg.zip_qt svg_svg_svg qt_矢量图

    5. **SVG动画**：虽然SVG本身支持动画，但在QT中，可能需要手动解析和更新SVG的动画属性来实现动画效果。 6. **优化性能**：处理大型或复杂的SVG文件时，可能需要注意性能优化，例如预加载图像，或者使用QImage将...

    svg开发实践PDF电子书

    12. **动画**：深入讲解SVG动画，包括`&lt;animate&gt;`、`&lt;animateTransform&gt;`等元素以及SMIL动画，以及如何使用JavaScript库如Snap.svg实现更复杂的动画。 13. **SVG与Web的集成**：探讨如何在HTML中内联使用SVG，以及...

Magicbox
Global site tag (gtag.js) - Google Analytics