If the starting and ending coordinates of a Bezier curve are made equidistant, it allows for duplication of Bezier curves.
By clicking the button, a second Bezier curve will appear below the first one, both being of the same size. This results in the two Bezier curves forming a perfect circle due to their equal dimensions.
I have encountered an issue where my Bezier Curve is causing the button to be positioned at the bottom of the screen. I have attempted using CSS and JavaScript setAttribute methods to address this problem but with no success. How can I ensure that my XHTML button is displayed above the SVG Bezier curve? Below is my HTML code snippet:
<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_2.js">
</script>
</head>
<body onload = "Setup()">
<input type="button" id="Bezier_Curve_Button" onclick="Setup2()" value="Click Me!" position = "absolute" top = "100px"/>
<svg xmlns="http://www.w3.org/2000/svg" id="My_SVG" position = "absolute" top = "200px" height="500px" width="600px">
<path id="Bezier_Curve_1"/>
<path id="Bezier_Curve_2"/>
</svg>
</body>
Below is the corresponding JavaScript code:
function Setup() {
var Bezier_Curve_Identification;
var Attribute_Name;
var Attribute_Name_2;
var Coordinate;
var My_Properties;
var Button_Identification;
Attribute_Name = "d";
Attribute_Name_2 = "style";
My_Properties = "stroke: blue; stroke-width: 3; fill: none;";
Coordinate = "M 375 200 A 50 50 0 0 1 475 200";
Button_Identification = document.getElementById('Bezier_Curve_Button');
Button_Identification.setAttribute = ("style", "top: 100px; height: 200px;");
Bezier_Curve_Identification = document.getElementById('Bezier_Curve_1');
Bezier_Curve_Identification.setAttribute(Attribute_Name, Coordinate);
Bezier_Curve_Identification.setAttribute(Attribute_Name_2, My_Properties);
}
function Setup2() {
var SVG_Data;
var Retrieved_Data;
var Bezier_Curve_1;
var Bezier_Curve_2;
var Counter;
var Coordinate_Attribute;
var Coordinate;
var Style_Attribute;
var Style_Details;
var Bezier_Curve_Identification;
SVG_Data = new XMLHttpRequest();
SVG_Data.open("GET","http://localhost:8080/exist/rest/db/apps/HTML_Student/SVG_Bezier_Curve.xq", true);
SVG_Data.onreadystatechange = function () {
if (SVG_Data.readyState == 4) {
Retrieved_Data = SVG_Data.responseText;
Retrieved_Data = Retrieved_Data.split("/");
Counter = 0;
Bezier_Curve_1 = Retrieved_Data[Counter];
Counter += 1;
Bezier_Curve_2 = Retrieved_Data[Counter];}
Bezier_Curve_1 = Bezier_Curve_1.split("*");
Counter = 0;
Coordinate_Attribute = Bezier_Curve_1[Counter];
Counter += 1;
Coordinate = Bezier_Curve_1[Counter];
Counter += 1;
Style_Attribute = Bezier_Curve_1[Counter];
Counter += 1;
Style_Details = Bezier_Curve_1[Counter];
Bezier_Curve_Identification = document.getElementById('Bezier_Curve_1');
Bezier_Curve_Identification.setAttribute(Coordinate_Attribute, Coordinate);
Bezier_Curve_Identification.setAttribute(Style_Attribute, Style_Details);
Bezier_Curve_2 = Bezier_Curve_2.split("*");
Counter = 0;
Coordinate_Attribute = Bezier_Curve_2[Counter];
Counter += 1;
Coordinate = Bezier_Curve_2[Counter];
Counter += 1;
Style_Attribute = Bezier_Curve_2[Counter];
Counter += 1;
Style_Details = Bezier_Curve_2[Counter];
Bezier_Curve_Identification = document.getElementById('Bezier_Curve_2');
Bezier_Curve_Identification.setAttribute(Coordinate_Attribute, Coordinate);
Bezier_Curve_Identification.setAttribute(Style_Attribute, Style_Details);
};
SVG_Data.send();}
Finally, here is the relevant CSS code:
#Bezier_Curve_Button {
position: absolute;
top: 100px;
left: 50px;
height: 100px;
width: 150px;}