SVG里的几个动画元素的用法介绍
Jun 01, 2016 am 09:53 AMVG是英文Scalable Vector Graphics的缩写,意为可缩放矢量图形。随着浏览器技术的进步,SVG在网页上的运用越来越多。SVG有很多优点,比如体积小、缩放时不失真、可以动态的改变,适合制作动画、格式可读,易于使用,搜索引擎优化等。
SVG在动画方面的表现格外优秀,本文主要是介绍SVG中的几个用于动画的元素,它们分别是:
我将用具有坚定的演示里让大家明白这几个元素的具体用法。
元素的用法介绍
<code class="language-html"><?xml version="1.0"?> <svg width="120" height="120" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="XML" attributename="x" from="-100" to="120" dur="10s" repeatcount="indefinite"></animate> </rect> </svg></code>
其中repeatCount
属性的取值可以是一数字,也可以是“indefinite”,意为无限循环。
元素的用法介绍
<code class="language-html"><?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"> <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points --> <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"></path> <circle cx="10" cy="110" r="3" fill="lightgrey"></circle> <circle cx="110" cy="10" r="3" fill="lightgrey"></circle> <!-- Here is a red circle which will be moved along the motion path. --> <circle cx="" cy="" r="5" fill="red"> <!-- Define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite"> <mpath xlink:href="#theMotionPath"></mpath> </animatemotion> </circle> </svg></code>
用法介绍
<code class="language-html"><?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"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"></animatetransform> </polygon> </svg></code>
其中type
属性的取值可以是translate | scale | rotate | skewX | skewY
等。
元素的用法介绍
<code class="language-html"><svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2"></rect> <!-- Draw the outline of the motion path in blue, along with three small circles at the start, middle and end. --> <path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06"></path> <circle cx="100" cy="250" r="17.64" fill="blue"></circle> <circle cx="250" cy="100" r="17.64" fill="blue"></circle> <circle cx="400" cy="250" r="17.64" fill="blue"></circle> <!-- Here is a triangle which will be moved about the motion path. It is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. --> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06"> <!-- Define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath xlink:href="#path1"></mpath> </animatemotion> </path> </svg></code>
上面这些演示了用到的只是一些常用的属性,这些元素里还有很多复杂的用法和各种各样的属性。以后会慢慢介绍给大家。

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to speed up animation effects in Windows 11: 2 methods explained

CSS Animation: How to Achieve the Flash Effect of Elements
![Animation not working in PowerPoint [Fixed]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Animation not working in PowerPoint [Fixed]

How to set up ppt animation to enter first and then exit

Let's talk about how to use SVG to achieve image mosaic effect

After a two-year delay, the domestic 3D animated film 'Er Lang Shen: The Deep Sea Dragon' is scheduled to be released on July 13

How to use Vue to implement typewriter animation effects

How to disable animations in Windows 11
