SVG setAttribute isn't working

speedlearner · September 3, 2015

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

SVG_Ellipse.html

<head>

<title>SVG Ellipse</title>

</head>

</svg:svg>

</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.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.xq", true);

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">

<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

</sequence>

</complexType>

</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?

justsomeguy · September 3, 2015

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.

speedlearner · September 4, 2015

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?

justsomeguy · September 4, 2015

It sounds like you're telling it to set an attribute with a blank name.

speedlearner · September 4, 2015

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.

After I made the changes, I opened the webpage. Still the ellipse didn't appear on my webpage. I have no idea why.

justsomeguy · September 4, 2015

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.

speedlearner · September 5, 2015

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

SVG_Ellipse_1.html

<html>

<head>

<title>SVG Ellipse</title>

</link>

</script>

</head>

</ellipse>

</svg>

</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.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Ellipse.xq", true);

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?

justsomeguy · September 8, 2015

Well, add a namespace to that and see if it breaks it. I would also recommend using an HTML 5 doctype.

Sign In

SVG setAttribute isn't working

Recommended Posts

speedlearner

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

speedlearner

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

speedlearner

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

speedlearner

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity