150 likes | 155 Vues
SVG and Geometry Education. Xun Lai. SVG is XML. SVG is an application language of XML; therefore, all general XML syntax rules apply to SVG documents. XML declaration: <?xml version="1.0"?> DOCTYPE declaration Element Names Are Case Sensitive Matching Start and End Tags
E N D
SVG and Geometry Education Xun Lai
SVG is XML SVG is an application language of XML; therefore, all general XML syntax rules apply to SVG documents. XML declaration: <?xml version="1.0"?> 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: <![CDATA[ ]]> Comments: <!-- -->
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. • <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="300px" height="200px"> <!-- Other content can be added here. --> </svg>
Basic SVG Elements and Shapes • The line Element • <line x1="50px" y1="100px" x2="350px" y2="100px" stroke="black"/> • The rect Element • <rect x="50" y="50" width="150" height="50" style="stroke:#FF0000; fill:#FF0000"/> • The circle Element • <circle cx="100" cy="100" r="50" style="stroke:#FF0000; stroke-width:2; fill:#CCCCFF"/> • The polygon Element • <polygon style="stroke:#000000; stroke-width:2; fill:#CCCCCC;" points="30,200 30,50 130,50 30,200" /> • Other Elements: polyline, ellipse
Document Node and svg Element • Document node of an SVG file • var svgdoc = evt.target.ownerDocument; • <svg onload=“svgInit(evt)”> … </svg> • 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 <svg> element • var svgroot = svgdoc.documentElement; svgroot.getAttribute( “width” );
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);
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
Transformations in SVG • <text x="30px" y="50px" transform="translate(0,300px)"> I am translated vertically </text> <text x="30px" y="50px" transform="translate(200px,0)"> I am translated horizontally </text> <text x="30px" y="50px" transform="scale(5)"> I am scaled text </text> <text x="30px" y="50px" transform="rotate(315, 100px, 100px)"> I am rotated </text> • C:\My Documents\svg\svg unleashed\code\Ch07\SimpleTransformations.svg
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
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
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
Where do events go • Bubbling mechanism: event bubbles up the DOM tree. • <g onclick=“fun1()” … > <rect onclick=“fun2()” … /> </g> 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. • <rect …/> <rect …/> If two rectangles overlap, only the last declared one can receive mouse events in the overlapping area.
How to catch mousemove everywhere • Is this code correct? <svg width=“500” height=“400”> <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()” /> <!-- Other content can be added here. --> </svg>
How to catch mousemove everywhere (cont.) • Correct Code <svg width=“500” height=“400”> <g onmousemove=“fun()”> <rect x=“0” y=“0” width=“500” height=“400” pointer-events="visible" style="fill: none" /> <!-- Other content can be added here. --> </g> </svg>
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