COAP:COAP-2100/week5

The educational technology and digital learning wiki
Jump to navigation Jump to search

Week 5

Topics covered

  • Dynamic SVG (part II, continued)

Monday

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
  • Type of exam: SVG file that you will have to complete according to instructions
  • Open book. You may use both print texts and the Internet

Items that may be tested

  • SVG embedding in HTML
  • Graphic primitives (only the ones shown in my examples): rect, circle, ellipse, line, polyline, polygon and text)
    • Attributes you should know: position and size attributes, opacity, fill and stroke
  • Grouping and reusing: Defining an "id", g and use
    • Make sure to master the transform attribute (scaling, rotation, and translation)
  • Simple animation: animate
    • Attributes for animate: to, from, values, dur, begin, end, fill, attributeName, xlink:href, repeatCount

Not tested

  • The "path" language. However, I may ask you to copy/paste a path from the online SVG-edit tool or change its style (e.g. the color).

Preparation:

Textbook chapters (you can ignore elements that did not present in class)

Important: If you want to print these textbook chapters, use the PDF that is in the Documents folder of the World Classroom. You are allowed to bring it to the exam ....

Wiki pages:

Homework

None for this week. See homework 4, week4