Upload
suzan-barber
View
223
Download
2
Embed Size (px)
Citation preview
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