15
SVG and Geometry Education Xun Lai

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

Embed Size (px)

Citation preview

Page 1: 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

SVG and Geometry Education

Xun Lai

Page 2: 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

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

Page 3: 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

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>

Page 4: 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

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

Page 5: 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

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

Page 6: 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

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);

Page 7: 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 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

Page 8: 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

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

Page 9: 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

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

Page 10: 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

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

Page 11: 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

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

Page 12: 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

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.

Page 13: 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

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>

Page 14: 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

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>

Page 15: 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

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