SVG & PDF We met SVG already with a pdf transformated xml document: page

SVG & PDFSVG & PDF

We met SVG already with a pdf transformated xml document:



<fo:static-content flow-name="xsl-region-after">



<fo:block>

<fo:leader leader-pattern="rule" leader-length="18cm" />

</fo:block>



<fo:block text-align = "center">

page <fo:page-number />

  </g></g>

(See chapter 7.6 W3C SVG Recommendation, http://www.w3.org/TR/SVG11/)

Ex2: Container ElementEx2: Container ElementThe g element acts as a container, so any instructions, such as the translate() transformation, apply to any elements within it. The end result is that the transformation moves all three cabinss 350 pixels to the left, leaving the middle cabin showing in the viewport.

<svg xmlns="http://www.w3.org/2000/svg" width="1050px" height="200px" viewBox="0 0 350 200" id="CabinInfo"> <g id="slider" transform="translate(-350,0)"> <svg id="Cabin701" width="350px" height="200px" x="0px" y="0px"> <rect id="Cabin701Rect" width="100%" height="100%" fill="#CCCCFF" stroke="red" stroke-width="7"/> <text id="Cabin701Label" font-size="20pt" x="55px" y="100px" fill="black">Cabin 701</text> <text id="Cabin701Class" font-size="14pt" x="55px" y="150px" fill="black">A2</text> <text id="Cabin701Deck" font-size="14pt" x="55px" y="180px" fill="black">Deck 7</text> </svg> <svg id="Cabin702" width="350px" height="200px" x="350px" y="0px”> ... </svg> <svg id="Cabin703" width="350px" height="200px" x="700px" y="0px"> ... </svg> </g></svg>

Example 3: LinksExample 3: Links

Add links from each cabin on the first floor to the deck plan for the 6th deck.

<svg id="Cabin701" width="350px" height="200px" x="0px" y="0px">

…

<text id="Cabin701Deck" font-size="14pt" x="55px" y="180px"

fill="black">Deck 7</text>

<a xlink:href="Ex3Deck6.html"><text id="Cabin701Link"

font-size="8pt" x="155px" y="50px"

fill="black">Click to view the 6th Deck</text></a>

</svg>

…

Ex3: xlink TagEx3: xlink Tag

Linking in SVG is similar to linking in HTML, in that it uses an a tag and an href attribute. But SVG actually refers back to the XLink recommendation, so the document must declare the xlink namespace and use it for the href attribute. Otherwise, the link works just like a normal HTML link, as when the SVG image is embedded in the HTML page.

Example 4-> JavaScriptExample 4-> JavaScript

If You are not keen on programming You can continue with the labnotes!!

Example 4: Scaling and MovingExample 4: Scaling and Moving

Moving the viewport: Rather than moving the image, you can simply move the viewport so that it is over the part of the image you wish to view, much like moving a magnifying glass over a page in the phone book. Because the actual boundaries of the viewport are fixed in place by the browser, it appears to the user as though the image itself is moving, but it's actually the viewport moving with respect to the image.

Scaling the image: In addition to moving the image, you can also make it larger or smaller to determine the area of the picture that is still visible through the viewport, which remains the same size.

Move the viewport in order to see different parts of the image and scale the image to see more or less of it.

Example 4: Scaling and movingExample 4: Scaling and moving

Moving the viewport: Rather than moving the image, you can simply move the viewport so that it is over the part of the image you wish to view, much like moving a magnifying glass over a page in the phone book. Because the actual boundaries of the viewport are fixed in place by the browser, it appears to the user as though the image itself is moving, but it's actually the viewport moving with respect to the image.

Scaling the image: In addition to moving the image, you can also make it larger or smaller to determine the area of the picture that is still visible through the viewport, which remains the same size.

Ex4: User InterfaceEx4: User Interface

<style type="text/css"> input {width: 145px;} </style> <form action=""> <table width="600"> <tr> <td colspan="4" height=”60" align="center"><b>Current room to edit is: </b> <span id="currentCabin"></span> </td> </tr> <tr> <td> <input type="button" onclick="goLeft=true; panDoc()" value="<< Scroll Left" /> </td> <td> <input type="button" onclick="toNo()" value=”Set Cabin not in use" /> </td> <td> <input type="button" onclick="toNormal()" value=”Set cabin to normal" /> </td> <td> <input type="button" onclick="goRight=true; panDoc()" value="Scroll Right >>" /> </td> </tr> <tr> <td> <input type="button" onclick="zoomIn()" value="Zoom In" /> </td> <td> <input type="button" onclick="increaseHeight()" value="Increase Height" /> </td> <td> <input type="button" onclick="decreaseHeight() " value="Decrease Height" /> </td> <td> <input type="button" onclick="zoomOut()" value="Zoom Out" /> </td> </tr> </table> </form>

input button style

The document also has a span element to tell the user which room is currently active. Scripting determines the contents of the element.

input buttons

Ex4: Global VariablesEx4: Global Variables

The htmlObj variable is used later as a reference to the embed element that accesses the SVG image.

The htmlObj variable uses the getElementById() method of the HTML document to identify the embed element. Finally, the script associates the SVGRoot variable with the document element of the SVG image.

The SVGDoc variable represents the root node of the SVG image, the main svg element.

The SVGRoot variable is used to represent the document element of the SVG image.

The viewBox variable is used to hold the value of the viewBox attribute on the document element svg element.

<html>

<head>

<title>Cabin map Ex4 </title>

</head>

<script type="text/ecmascript">

// set global variables

var htmlObj, SVGDoc, SVGRoot, viewBox, goLeft, goRight, innerSVG;

var currentSize, currentPosition, currentCabinId, currentCabinLabel;

var svgns = "http://www.w3.org/2000/svg";

function Initialize(){

htmlObj = document.getElementById("CabinHere");

SVGDoc = htmlObj.getSVGDocument();

SVGRoot = SVGDoc.documentElement;

} // end function Initialize()

</script>

</head>

<body onload="Initialize()" bgcolor="#f2fbfe">All of this information is needed to scroll the image.

Ex4: Current PositionEx4: Current Position

The script assigns the viewBox variable the value of the viewBox attribute of the svg document element. The SVGRoot element represents the main svg element of the image, so the getAttribute() method works just as it would on any other XML document, retrieving the string value of the viewBox attribute.

viewBox is actually a set of space-delimited values, of which you only want the first. So the script creates an array variable, viewVals, by using the ECMAScript split() function to extract each component of the value 0 0 350 200.

The parseFloat() method then converts the string value 0 so that it can be used as a numeric value 0.

Now the current position is known and it can be changed.

function panDoc(evt){

viewBox = SVGRoot.getAttribute('viewBox');

var viewVals = viewBox.split(' ');

currentPosition = parseFloat(viewVals[0]);

} // end function panDoc()

</script>

Ex4: Moving the ViewportEx4: Moving the Viewport

If goLeft is true, then panDoc() decreases currentPosition's value by 175, if the value is greater than -350. This prevents the SVG image from scrolling further to the left than the left edge of Cabin 701. The goLeft variable is then assigned the value false. Similarly, if you are moving to the right.

It's the viewport moved, so the new value of the current position has to go back into the viewBox attribute. Once the new value has been added back into the array, the join() function puts the altered value of the viewBox variable back together again. The value is then assigned to the viewBox attribute of the svg element.

The SVG image appears to be scrolled 175 pixels (1/2 of the Cabin size) in the desired direction.





if (goLeft == true){

if (currentPosition > -350) {

currentPosition = currentPosition - 175;

}

goLeft = false;

}

if (goRight == true){

if (currentPosition < 350) {

currentPosition = currentPosition + 175;

}

goRight = false;

}

viewVals[0] = currentPosition;

SVGRoot.setAttribute('viewBox', viewVals.join(' '));


It's also possible to pan an image in the Adobe SVG viewer by holding down the ALT key, pressing down the left mouse button, and moving the mouse.

Ex4: ZoomingEx4: Zooming

The SVGRoot variable has already been assigned the svg document element of the SVG image in the Initialize() function, and when an SVG image is first loaded the value of the currentScale property of the SVGRoot variable is 1.0.

function zoomOut(){

if (SVGRoot.currentScale > 0.3){

SVGRoot.currentScale = SVGRoot.currentScale * 0.67;

}

} // end function zoomOut

function zoomIn(){

if (SVGRoot.currentScale < 5){

SVGRoot.currentScale = SVGRoot.currentScale * 1.5;

}

} // end function zoomIn

It's also possible to zoom an image in the Adobe SVG viewer by holding down the Ctrl key, pressing down the left mouse button and mouse right button gives a menu too.

Example 5: Show Current CabinExample 5: Show Current Cabin

Show current cabin

Indicate if not exactly scrolled

Ex5: Show Initial CabinEx5: Show Initial Cabinfunction setCurrentCabin(){




if (currentPosition % 350 != 0) {

currentCabinId = null;

currentCabinLabel = "None. Please scroll to desired cabin.";

} else if (currentPosition / 350 == 0) {

currentCabinId = "Cabin702";

currentCabinLabel = "Cabin 702";

} else if (currentPosition / 350 == -1) {



} else if (currentPosition / 350 == 1) {



}

document.getElementById("currentCabin").innerHTML = currentCabinLabel;

}

When the page is initialized:

function Initialize(){

htmlObj = document.getElementById("CabinHere");

SVGDoc = htmlObj.getSVGDocument();

SVGRoot = SVGDoc.documentElement;

setCurrentCabin();

} // end function Initialize()

Within the HTML document, a span element has an id value of currentRoom:... <tr> <td colspan="4" height="40" align="center"><b>Current room to edit is: </b> <span id="currentRoom"></span></td> </tr> ...

Ex5: Set and Show Cabin when MovingEx5: Set and Show Cabin when Moving

B: When the cabin is moved:


…. viewVals[0] = currentPosition;

SVGRoot.setAttribute('viewBox', viewVals.join(' '));

setCurrentCabin();


Once the viewport has been moved, you need to re-set the current cabin to the new value.

Example 6: Change Image propertyExample 6: Change Image property

Red color means ”not in use”

Test also proper position

Example 6: Change Cabin BackcolorExample 6: Change Cabin Backcolor

function toNo(){

if (currentCabinId == null) {

alert("Ambiguous cabin position! \n Please align a cabin "+

"precisely before attempting to change cabin not in use.");

} else {

SVGDoc.getElementById(currentCabinId+"Rect").setAttribute("fill", "#FF0000");

}

}

function toNormal(){

if (currentCabinId == null) {

alert("Ambiguous cabin position! \n Please align a cabin "+

"precisely before attempting to cabin back in use.");

} else {

SVGDoc.getElementById(currentCabinId+"Rect").setAttribute("fill", "#CCCCFF");

}

}

At this stage, the background color is red but everything else remains the same.

Too ComplexToo Complex

Continue with simpler Lab Note

tasks.

Documents

SVG & PDF We met SVG already with a pdf transformated xml document: page