I’m trying to store the coordinates of my SVG Path statement inside the eXist database. Here is my XHTML code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG_Bezier_Curve</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Bezier_Curve.css"/>
<script language = "javascript" src = "http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Bezier_Curve.js">
</script>
</head>
<body>
<input type = "text" id = "My_Text" value = "I was here."></input>
<input type = "button" onclick = "Setup2()"/>
<p id = "My_Paragraph"></p>
<svg id = "My_SVG" xmlns="http://www.w3.org/2000/svg" height="500" width="500">
<path id = "Bezier_Curve_1"/>
<path id="Bezier_Curve_2" d="M 300, 200 A 50, 50 0,0,1 400,200" stroke="red" stroke-width="3" fill="none">
</path>
</svg>
</body>
</html>
Here is my Javascript code:
function Setup2() {
var SVG_Def;
var Bezier_Curve_Identification;
var Attribute_Name;
var coordinate;
document.getElementById("My_Text").value = "I'm right here.";
SVG_Def = document.getElementById("My_SVG");
Bezier_Curve_Identification = SVG.getElementById('Bezier_Curve_1');
Bezier_Curve_Identification.setAttributeNS = ("http://www.w3.org/1999/xlink", "'d'", "'M 300, 200 A 20, 20 0,0,1 340,200'");
Bezier_Curve_Identification.setAttributeNS = ("http://www.w3.org/1999/xlink", "'style'", "'stroke: blue; stroke-width: 3; fill: none;'");
}
When I click the button, the text in the textbox changes, but the arc on the screen does not change. What am I doing wrong?
By the way, if I can store the attribute values inside these variables, then I can write an XQuery code to store the attribute values inside the eXist database.
3
In this situation you don’t need to use setAttributeNS, you can just use setAttribute.
function Setup2() {
document.getElementById("My_Text").value = "I'm right here.";
let Bezier_Curve_Identification = document.getElementById('Bezier_Curve_1');
Bezier_Curve_Identification.setAttribute("d", "M 300 200 A 20 20 0 0 1 340 200");
Bezier_Curve_Identification.setAttribute("style", "stroke: blue; stroke-width: 10; fill: none;");
}<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG_Bezier_Curve</title>
</head>
<body>
<input type="text" id="My_Text" value="I was here."/>
<input type="button" onclick="Setup2()" value="Click" />
<p id="My_Paragraph"></p>
<svg id="My_SVG" xmlns="http://www.w3.org/2000/svg" height="500" width="500">
<path id="Bezier_Curve_1"/>
<path id="Bezier_Curve_2" d="M 300 200 A 50, 50 0 0 1 400 200" stroke="red" stroke-width="3" fill="none" />
</svg>
</body>
</html>1