1 / 15

SVG and Geometry Education

Learn the fundamentals of SVG, XML syntax, document structure, basic SVG elements, transformations, and more in this detailed guide. Understand how to create dynamic shapes and utilize SVG and DOM functionalities.

cheredia
Download Presentation

SVG and Geometry Education

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: <?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: <!-- -->

  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. • <?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>

  4. 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

  5. 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” );

  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 • <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

  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. • <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.

  13. 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>

  14. 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>

  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

More Related