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, and polygon)
    • Attributes: position and size attributes, opacity, fill and stroke
  • Grouping and reusing: Defining an "id", g and use
  • 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 we have not seen in class)

Wiki pages: