COAP:COAP-2100/week5: Difference between revisions
Jump to navigation
Jump to search
m (→Wednesday) |
m (→Monday) |
||
| Line 15: | Line 15: | ||
* You can find a PDF of an SVG book in the worldclassroom / Documents folder | * You can find a PDF of an SVG book in the worldclassroom / Documents folder | ||
Motion | Simple Motion example using mpath: | ||
<source lang="XML"> | <source lang="XML"> | ||
<?xml version="1.0" encoding="UTF-8"?> | <?xml version="1.0" encoding="UTF-8"?> | ||
| Line 27: | Line 27: | ||
</animateMotion> | </animateMotion> | ||
</rect> | </rect> | ||
<path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12" stroke-width="5" stroke="#000000" fill="none"/> | <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32, | ||
52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12" | |||
stroke-width="5" stroke="#000000" fill="none"/> | |||
</svg> | </svg> | ||
</source> | </source> | ||
Simple Motion example using path | |||
<source lang="XML"> | <source lang="XML"> | ||
<?xml version="1.0" encoding="UTF-8"?> | <?xml version="1.0" encoding="UTF-8"?> | ||
| Line 39: | Line 41: | ||
<rect x="15" y="5" rx="5" ry="5" width="20" height="10" | <rect x="15" y="5" rx="5" ry="5" width="20" height="10" | ||
style="fill:#CCCCFF;stroke:#000099"> | style="fill:#CCCCFF;stroke:#000099"> | ||
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" | |||
path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/> | path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32, | ||
52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/> | |||
</rect> | </rect> | ||
</svg> | </svg> | ||
Revision as of 19:05, 16 April 2012
Week 5
Topics covered
- Dynamic SVG (part II, continued)
Monday
- Static SVG tutorial (grouping constructs)
- SVG/SMIL animation tutorial
- SVG Essentials/Animating and Scripting SVG
- SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly
- You can find a PDF of an SVG book in the worldclassroom / Documents folder
Simple Motion example using mpath:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Simple Motion animation example</title>
<rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#path1"/>
</animateMotion>
</rect>
<path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"
stroke-width="5" stroke="#000000" fill="none"/>
</svg>
Simple Motion example using path
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Simple Motion animation example</title>
<rect x="15" y="5" rx="5" ry="5" width="20" height="10"
style="fill:#CCCCFF;stroke:#000099">
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
</rect>
</svg>
Wednesday
Midterm exam
Subject area: SVG
- Embedding in HTML
- Graphic primitives (only the ones shown in my examples)
- Grouping and reusing
- Simple animation (only the animate tag):
- to/from/values/dur/begin/etc
Reading (Textbook chapters, ignore elements that we have not seen in class)
- http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Basic_Shapes
- http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Document_Structure
- http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG (ignore the scripting)
Reading Wiki pages: