bacchus119 wrote:
> 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 -----------
If you are using ASV3, there is this known problem:
"Don't use the object tag with ASV3 on IE..."
http://www.adobe.com/svg/viewer/install/main.html
"Adobe SVG Viewer 3.01 addresses one potential security risk by
disabling SVG scripts if you disable ActiveScripting in Internet
Explorer. This security risk only affects customers who browse the Web
on Windows computers in Internet Explorer with ActiveScripting disabled.
By default, ActiveScripting is enabled, so most users are not currently
at risk. Because of the way that the HTML OBJECT tag is implemented in
Internet Explorer, Adobe SVG Viewer 3.01 cannot determine the URL of a
file embedded with the OBJECT tag. The URL is required to determine the
security zone, which is required to determine the state of the
ActiveScripting setting. Therefore, to fail safe against this potential
security flaw Adobe SVG Viewer 3.01 always disables scripting when it
determines that the SVG file is embedded using the OBJECT tag. When
authoring in SVG, Adobe recommends that you not use the OBJECT tag and
instead use the EMBED tag when embedding SVG in HTML pages."
Already answered that to "event in <object>" and "Scripting: Using html
and native .svgz" messages some time ago...
(That's a FAQ)
Another potential issue is to make sure you deliver your SVG with the
proper Mime type, although IE isn't very strict on this.
--
Philippe Lhoste
-- (near) Paris -- France
-- http://Phi.Lho.free.fr
-- For servers mangling my From and Reply-To fields,
-- please send private answers to PhiLho(a)GMX.net
-- -- -- -- -- -- -- -- -- -- -- -- -- --
-----
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/
