Sideway
output.to from Sideway
Draft for Information Only

Content

<animate>
Example
Attributes
  Animation Attributes
  Global attributes
Usage notes
Accessibility concerns
Specifications
 Sources and References

<animate>

The SVG <animate> element provides a way to animate an attribute of an element over time.

Example

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='480' height='450' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='426' height='426' viewBox='-25, -25, 426, 426' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
  
   <svg transform='scale(0.938967136150235)' preserveAspectRatio='xMinYMin' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'>
       <rect width='10' height='10'>
           <animate attributeName='rx' values='0;5;0' dur='10s' repeatCount='indefinite' />
       </rect>
   </svg>
  </svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='395' y='17' font-size='20'>(10,0)</text>
<text x='5' y='445' font-size='20'>(0,10)</text>
<text x='395' y='445' font-size='20'>(10,10)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='425' cy='25' r='2' fill='black'/>
<circle cx='25' cy='425' r='2' fill='black'/>
<circle cx='425' cy='425' r='2' fill='black'/>
</svg>
    
HTML Web Page Embedded Output:

Attributes

Animation Attributes

Global attributes

Usage notes

This element implements the SVGAnimateElement interface.

Accessibility concerns

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

Specifications

SVG Animations Level 2 (SVG Animations 2)

Sources and References

  • https://svgwg.org/specs/animations/
  • https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

©sideway

ID: 220100016 Last Updated: 1/16/2022 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019