1. SVG and Geometry Education Xun Lai

2. SVG is XML SVG is an application language of XML; therefore, all general XML syntax rules apply to SVG documents. –XML declaration: –DOCTYPE declaration –Element Names Are Case Sensitive –Matching Start and End Tags –Quotation Marks with Attributes –Processing Instructions –Entities and Entity References –Namespace Declarations –CDATA Sections: –Comments:

3. SVG Document Structure All SVG documents have an svg element as the document element. An SVG element can take width and height attributes, which define the size of the viewport. The viewport is the area into which the SVG is to be rendered.

4. Basic SVG Elements and Shapes The line Element – The rect Element – The circle Element – The polygon Element – Other Elements: polyline, ellipse

5. Document Node and svg Element Document node of an SVG file –var svgdoc = evt.target.ownerDocument; … function svgInit( evt ) { var svgdoc = evt.target.ownerDocument; var svgroot = svgdoc.documentElement; } –Counterpart of the “document” in an xhtml file SVGSVGElement object: the root element –Refers to the element var svgroot = svgdoc.documentElement; svgroot.getAttribute( “width” );

6. Dynamically Create a Shape myShape = svgdoc.createElement("circle") myShape.setAttribute("cx", 125); myShape.setAttribute("cy", 125); myShape.setAttribute("r", 50); myShape.setAttribute("style", "fill: #FFCCCC; stroke:#FF0000"); svgroot.appendChild(myShape);

7. XML DOM and SVG DOM SVG DOM supports all the standard APIs provided by XML DOM –svgdoc.createElement( ) –someElement.setAttribute( ) –someElement.appendChild( ) SVG DOM has lots of its own objects and APIs –svgpoint = svgroot.createSVGPoint(); //return an SVGPoint object –svgpoint.setX( ); –svgpoint.setY( ); –svgpoint.matrixTransform(m); // m is of type SVGMatrix

8. Transformations in SVG I am translated vertically I am translated horizontally I am scaled text I am rotated C:\My Documents\svg\svg unleashed\code\Ch07\SimpleTransformations.svgC:\My Documents\svg\svg unleashed\code\Ch07\SimpleTransformations.svg

9. The Transformation Matrix SVG matrix transformation can be expressed as a six-value vector –transform="matrix(a b c d e f)" Translate transformation: –transform="matrix(1 0 0 1 x-displacement y- displacement)" Rotate transformation: –transform="matrix(cos(a) sin(a) -sin(a) cos(a) 0 0)" Can do combination of transforms in one matrix

10. Dynamically transform a Shape someElement.setAttribute( “transform”, “translate(” + x + “,” + y + “)” ); someElement.setAttribute( “transform”, "matrix("+m.a+" "+m.b+" "+m.c+" "+m.d+" "+m.e+" "+m.f+")" ); // m is of type SVGMatrix C:\My Documents\svg\svg unleashed\conTri.html

11. The g Element The purpose of the g element is to group SVG elements, which gives great convenience. For example, for an axis, group the axis line, unit lines, and text. Then the axis can be reposition to any place easily. –gAxis.setAttribute( "transform", "translate("+ originX + "," + originY +")" ); C:\My Documents\kimpton\algebra\newalgebra\ineq1.html

12. Where do events go Bubbling mechanism: event bubbles up the DOM tree. – Both elements can receive the onclick event. If two element are at the same level and they overlap, only the the one on the top can receive mouse events. – If two rectangles overlap, only the last declared one can receive mouse events in the overlapping area.

13. How to catch mousemove everywhere Is this code correct? <rect x=“0” y=“0” width=“500” height=“400” style="fill: none“ // make the rectangle transparent pointer-events="visible" // enable the rectangle to catch mouse events onmousemove=“fun()” />

14. How to catch mousemove everywhere (cont.) Correct Code <rect x=“0” y=“0” width=“500” height=“400” pointer-events="visible" style="fill: none" />

15. Future Work Build a library of APIs for geometry problems, such as creating axis, showing a straight line Study more advanced SVG topics, especially functions for graphics Investigate the interaction between SVG and XHTML, MathML, and MeML Generate SVG from server-side