Jump to content
Sign in to follow this  
speedlearner

SVG setAttribute isn't working

Recommended Posts

I'm using the eXist database program. I stored the following documents inside the HTML_Student collection:

 

SVG_Ellipse.html

 

<html xmlns="http://www.TedTheSpeedlearner.com" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com XML_SVG_Ladder.xsd">
<head>
<title>SVG Ellipse</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.css"/>
</head>
<body onload="Setup()">
<svg:svg id="Image_Box">
<svg:ellipse id="My_Ellipse"/>
</svg:svg>
<input id="My_Data" type="text"/>
</body>
</html>
Please note that the schema document that is listed in this document doesn't exist yet. I will create this later.
SVG_Ellipse.css
#Image_Box {
height: 500px;
width: 800px;}
#My_Ellipse {
fill: none;
stroke: blue;
stroke-width: 3;}
SVG_Ellipse_Test_1.js
var SVG_Data
var Retrieved_Data
var Attribute_List
var Coordinate_List
var Counter
function Setup() {
SVG_Data = new XMLHttpRequest();
SVG_Data.onreadystatechange = function () {
if (SVG_Data.readyState = 4) {
Retrieved_Data = SVG_Data.responseText;
Retrieved_Data = Retrieved_Data.split("*");
Attribute_List = "";
Coordinate_List = "";
for (Counter = 0; Counter < 8; Counter++) {
Attribute_List = Attribute_List + Retrieved_Data[Counter] + "*";
Counter = Counter + 1;
Coordinate_List = Coordinate_List + Retrieved_Data[Counter] + "*";}
Attribute_List = Attribute_List.split("*");
Coordinate_List = Coordinate_List.split("*");
for (Counter = 0; Counter < 4; Counter++){
document.getElementById("My_Ellipse").setAttribute(Attribute_List[Counter], Coordinate_Pair[Counter]);}
document.getElementById("My_Data").value = Coordinate_List [0];
}
}
SVG_Data.send();
}
SVG_Ellipse.xml
<SVG_Data_Collection xmlns="http://www.TedTheSpeedlearner.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com SVG_Ellipse_Data_Schema.xsd">
<ellipse>
<X_Center_Coordinate>100</X_Center_Coordinate>
<Y_Center_Coordinate>100</Y_Center_Coordinate>
<X_Radius_Coordinate>40</X_Radius_Coordinate>
<Y_Radius_Coordinate>40</Y_Radius_Coordinate>
</ellipse>
</SVG_Data_Collection>
SVG_Ellipse_Data_Schema.xsd
<schema xmlns="http://www.w3.org/2001/XMLSchema" xmlns:target="http://www.TedTheSpeedlearner.com" targetNamespace="http://www.TedTheSpeedlearner.com" elementFormDefault="qualified">
<complexType name="Ellipse_Type">
<sequence>
<element name="X_Center_Coordinate" type="string"/>
<element name="Y_Center_Coordinate" type="string"/>
<element name="X_Radius_Coordinate" type="string"/>
<element name="Y_Radius_Coordinate" type="string"/>
</sequence>
</complexType>
<element name="SVG_Data_Collection">
<complexType>
<sequence>
<element name="ellipse" type="target:Ellipse_Type"/>
</sequence>
</complexType>
</element>
</schema>
SVG_Ellipse.xq
xquery version "3.0";
declare default element namespace "http://www.TedTheSpeedlearner.com";
declare option exist:serialize "method=text media-type=text/plain";
let $header-addition := response:set-header("Access-Control-Allow-Origin","*")
let $doc := doc("SVG_Ellipse.xml")
let $svg-data := $doc/SVG_Data_Collection/ellipse
let $First_Data_Name := $svg-data/X_Center_Coordinate
let $Data := concat("cx*",$First_Data_Name, "*")
let $Second_Data_Name := $svg-data/Y_Center_Coordinate
let $Data := concat($Data, "cy*",$Second_Data_Name, "*")
let $Third_Data_Name := $svg-data/X_Radius_Coordinate
let $Data := concat($Data, "rx*",$Third_Data_Name, "*")
let $Fourth_Data_Name := $svg-data/Y_Radius_Coordinate
let $Data := concat($Data, "ry*",$Fourth_Data_Name)
return $Data
When I enter http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.html into the address of my web browser, the textbox appears and the coordinate number appears in the textbox. However, the ellipse doesn't appear. I tried to remove the set attribute command from the Javascript document and place the coordinates directly inside the ellipse element of my html document, but nothing changed. Why won't my ellipse appear?

 

Share this post


Link to post
Share on other sites

Check your browser's error console, you should be getting at least 1 Javascript error.Also, when posting code please use code tags to make it easier to read.

Share this post


Link to post
Share on other sites

I found one error and corrected it. In the Javascript code I have two for next loops. In the second for next loop I listed Coordinate_Pair instead of Coordinate_List. I'm unable to locate the second error. It says: Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name. What is this error?

Share this post


Link to post
Share on other sites

I changed a few things in my Javascript document. I removed the for next loop and replaced it with the following code:

 

document.getElementById("My_Ellipse").setAttribute("cx", "100");
document.getElementById("My_Ellipse").setAttribute("cy", "100");
document.getElementById("My_Ellipse").setAttribute("rx", "40");
document.getElementById("My_Ellipse").setAttribute("ry", "40");
I verified that the computer was setting the attributes by using the getAttriibute command.
I also changed my html document into an XHTML document.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com XML_SVG_Ladder.xsd">
After I made the changes, I opened the webpage. Still the ellipse didn't appear on my webpage. I have no idea why.

Share this post


Link to post
Share on other sites

I'm not really sure what's going on here either, you're using 6 files to try to draw an ellipse. I would start with a single HTML file that does what you want and break it up from there if you want to use XML, XSD, and XQ files, and I would remove eXist from the equation and just start with a regular static HTML file. Once you get that working then you can start adding your other pieces if you want to. Right now this has so many moving parts to do something relatively simple that I don't know where it's failing.Also, Javascript doesn't have "for next" loops, it's just a for loop. VBScript uses "next", not Javascript.

Share this post


Link to post
Share on other sites

I've isolated the problem. I created a new HTML document.

 

SVG_Ellipse_1.html

 

<html>
<head>
<title>SVG Ellipse</title>
<link rel = "stylesheet" type = "text/css" href = "http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.css">
</link>
</script>
</head>
<body onload = "Setup()">
<svg id = "Image_Box">
<ellipse id = "My_Ellipse">
</ellipse>
</svg>
<input id = "My_Data" type = "text">
</input>
</body>
</html>
Notice this document has no namespaces. I also created a new Javascript document.
SVG_Ellipse_Test_2.js
function Setup() {
SVG_Data = new XMLHttpRequest();
SVG_Data.onreadystatechange = function () {
if (SVG_Data.readyState = 4) {
Retrieved_Data = SVG_Data.responseText;
Retrieved_Data = Retrieved_Data.split("*");
Attribute_List = "";
Coordinate_List = "";
for (Counter = 0; Counter < 8; Counter++) {
Attribute_List = Attribute_List + Retrieved_Data[Counter] + "*";
Counter = Counter + 1;
Coordinate_List = Coordinate_List + Retrieved_Data[Counter] + "*";}
Attribute_List = Attribute_List.split("*");
Coordinate_List = Coordinate_List.split("*");
document.getElementById("My_Ellipse").setAttribute("cx", "100");
document.getElementById("My_Ellipse").setAttribute("cy", "100");
document.getElementById("My_Ellipse").setAttribute("rx", "30");
document.getElementById("My_Ellipse").setAttribute("ry", "80");
document.getElementById("My_Data").value = document.getElementById("My_Ellipse").getAttribute("cx");
}
}
SVG_Data.send();
}
When I did this, everything worked fine. I will try to add namespaces to my html document in the next couple of days. Could namespaces cause my webpage not to work. And if so, why?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...