Table of Contents
元素的用法介绍
元素的用法介绍
用法介绍
元素的用法介绍
Home Web Front-end HTML Tutorial SVG里的几个动画元素的用法介绍

SVG里的几个动画元素的用法介绍

Jun 01, 2016 am 09:53 AM
svg animation

VG是英文Scalable Vector Graphics的缩写,意为可缩放矢量图形。随着浏览器技术的进步,SVG在网页上的运用越来越多。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>
Copy after login

其中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>
Copy after login

 

用法介绍

元素对图形的运动和变换有更多的控制,它可以指定图形的变换、缩放、旋转和扭曲等。

<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>
Copy after login

其中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>
Copy after login

上面这些演示了用到的只是一些常用的属性,这些元素里还有很多复杂的用法和各种各样的属性。以后会慢慢介绍给大家。

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to speed up animation effects in Windows 11: 2 methods explained How to speed up animation effects in Windows 11: 2 methods explained Apr 24, 2023 pm 04:55 PM

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

CSS Animation: How to Achieve the Flash Effect of Elements CSS Animation: How to Achieve the Flash Effect of Elements Nov 21, 2023 am 10:56 AM

CSS Animation: How to Achieve the Flash Effect of Elements

Animation not working in PowerPoint [Fixed] Animation not working in PowerPoint [Fixed] Feb 19, 2024 am 11:12 AM

Animation not working in PowerPoint [Fixed]

How to set up ppt animation to enter first and then exit How to set up ppt animation to enter first and then exit Mar 20, 2024 am 09:30 AM

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 Let's talk about how to use SVG to achieve image mosaic effect Sep 01, 2022 am 11:05 AM

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 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 Jan 26, 2024 am 09:42 AM

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 use Vue to implement typewriter animation effects Sep 19, 2023 am 09:33 AM

How to use Vue to implement typewriter animation effects

How to disable animations in Windows 11 How to disable animations in Windows 11 Apr 16, 2023 pm 11:34 PM

How to disable animations in Windows 11

See all articles