Hey there,
I've been building web sites for going on 6 years now and just
recently discovered SVG graphics. So, I decided to learn them to
see what they really can do. I need some basic help, and I figured
that this was a good place to go.
I'm going through the book SVG Programming-The Graphical Web, and am
running through the examples and discovered that when I try to serve
what I wrote through a web server (either apache or IIS), the pages
do not work correctly, but when I open the directly in an IE browser
off of the file system, they work fine.
The end of this post has sample files of what I'm doing. The files
are simple enough. The html page takes polygon parameters (number o
sides, length of each side, etc.) and draws the corresponding
polygon (I'm explore the interaction between HTML form fields and an
SVG image through JavaScript).
IF you create both files and put them in one directory, then open
GeneratePolygon.html directly in IE, it works just fine. If you try
to server both files from a Web server, the JavaScript doesn't work
at all.
I'm curious as to what I'm missing.
Thanks in advance for your help.
-- Rick P.
----- Begin GeneratePolygon.html -----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Polygon Generator </TITLE>
<script language="JavaScript"> //<!CDATA[
function passBackSVG(){
var embedNodes=document.embeds;
var i;
for (i=0;i<embedNodes.length;i++){
embedNode=embedNodes[i];
if (embedNode.window.passState){
embedNode.window.passState
(embedNode);
}
}
}
//]]</script>
</HEAD>
<BODY onload="passBackSVG()">
<h1> Polygon Generator</h1>
<table border=0>
<tr>
<td>Polygon or Path </td>
<td> <select id="polytype">
<option id="polygon"
selected>polygon</option>
<option id="path"> Path</option>
</select>
</td>
</tr>
<tr>
<td>number of Sides </td>
<td> <input type="text" id="sides" value="5"></td>
</tr>
<tr>
<td>Radius </td>
<td> <input type="text" id="radius" value="200"></td>
</tr>
<tr>
<td>Angular Offset </td>
<td> <input type="text" id="angleOffset"
value="0"></td>
</tr>
<tr>
<td>Center X </td>
<td> <input type="text" id="cx" value="0"></td>
</tr>
<tr>
<td>Center Y </td>
<td> <input type="text" id="cy" value="0"></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="Generate
Polygon" onclick="buffer.innerHTML=getRegularPolygon(sides.value,
radius.value, angleOffset.value, cx.value, cy.value, color.value)"/>
</td>
</tr>
<tr>
<td> <input type="text" id="color"></td>
<td> <input type="button" value="Change Color"
onclick="setColor(color.value)"/>
</td>
</tr>
</table>
<div id="buffer"> </div>
<script language="JavaScript">
function getRegularPolygon (n, r, angleOffset, cw, cy,
sColor) {
var polyBuf="";
polyTypeNode=document.all("polytype");
elementType=polyTypeNode.options.item
(polyTypeNode.options.selectedIndex).id;
for (var i=0; i<n; i++) {
var angle=(2*3.1415927*i/n) +
(angleOffset/180)*3.1415927;
var x=parseFloat(cy) + Math.floor(parseFloat
(r) * Math.sin(angle));
var y=parseFloat(cy) + Math.floor(parseFloat
(r) * Math.cos(angle));
if (elementType=="path") {
if (i==0) {
polyBuf="m";
}
else {
polyBuf += "L";
}
}
polyBuf += x+"," + y + " ";
}
if (elementType=="polygon"){
buf = '<polygon points="' + polyBuf + '"
fill="red" stroke="black" stroke-width="6"/>';
}
else {
buf = '<path points="' + polyBuf + '"
fill="red" stroke="black" stroke-width="6"/>';
}
buffer.innerHTML=buf;
var shape=window.display_polygon;
shape.setPoints(polyBuf, sColor);
return buf;
}
function setColor (sColor) {
var shape=window.display_polygon;
shape.changeColor(sColor);
}
</script>
<embed src="polygon.svg" width="500" height="500"
wmode="transparent" points="50,0 97,35 79,91 20,91 2,35"
id="display_polygon"
style="position:absolute;to:200;left:0"/>
</BODY>
</HTML>
----- End GeneratePolygon.html -----------
----- Begin Polygon.svg -----------
<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";
width="500"
height="500"
viewbox="0 0 1000 1000"
perserveAspectRatio="none"
onload="initSVG(evt)">
<script language="JavaScript" scriptImplementation="Microsoft"
type="text/javascript">//<![CDATA[
var svg=null;
function initSVG(evt){
svg=evt.target.ownerDocument;
}
function passState(extObject){
extObject.setPoints=setPoints;
extObject.changeColor=changeColor;
}
function setPoints(pointList, sColor) {
var shape=svg.getElementById("base_polygon");
var path=svg.getElementById("base_path");
if (pointList.charAt(0)=="m") {
shape.setAttribute("visibility", "hidden");
path.setAttribute("d", pointList+" z");
path.setAttribute("visibility", "visibile");
}
else
{
path.setAttribute("visibility", " hidden");
shape.setAttribute("points", pointList);
shape.setAttribute("visibility", "
visibile");
}
changeColor(sColor);
}
function changeColor(sColor){
var shape=svg.getElementById("base_polygon");
var path=svg.getElementById("base_path");
path.setAttribute("fill", sColor);
shape.setAttribute("fill", sColor);
}
//]]></script>
<g transform="translate(250,250)">
<polygon points="0,-200 190,-61 117,162 -118,162 -191,-61"
fill="red" stroke="black" stroke-width="6"
id="base_polygon"/>
<path d="m0,0" fill="red" stroke="black" stroke-width="6"
id="base_path"/>
</g>
</svg>
----- End Polygon.svg -----------
-----
To unsubscribe send a message to: [EMAIL PROTECTED]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
