Using setAttribute with the SVG path arc

[megelinic]

In XHTML, the following code works:

svg id = "My_SVG" xmlns="http://www.w3.org/2000/svg" height="500" width="500"

path id="Bezier_Curve_2" d="M 300, 200 A 20, 20 0,0,1 340,200" stroke="red" stroke-width="3" fill="none"

I want to break this code apart so I can store it inside my eXist database. Here are the things I do know.

I can store the path id inside a variable like this:

var Bezier_Curve_Identification;
var Attribute;
var Coordinate;
var Bezier_Curve_Identification = document.getElementById("Bezier_Curve_1");
Attribute = "M";
Coordinate = "300, 200";
Bezier_Curve_Identification.setAttribute(Attribute, Coordinate;)

How do I store all the other attributes and coordinates inside the Attribute and Coordinate variables?

[m_hutley]

A path element doesnt have an “M” attribute, it has a “d” attribute that contains a string of svg pen commands that draws the shape.

To be precise, your example contains the string
M 300, 200 A 20, 20 0,0,1 340,200, which translates as:
Move the pen to 300, 200.
Draw an arc with x and y radii of 20 (so a circle), with no rotation (which makes sense for a circle arc), on the short arm but with sweep, ending at 340, 200.

[megelinic]

So what you’re saying is I should store the letter d in the Attribute variable and then store M 300, 200 A 20, 20 0,0,1 340,200 in the Coordinate variable.

[m_hutley]

yes.

[megelinic]

Thanks for the information. Another group suggested using the querySelector() statement to do a function similar to the document.getElementById statement. Would using the querySelector() be a good substitute for the document.getElementById statement?

[m_hutley]

The statements are roughly equivalent in this case, because the element has an Id. If it didnt have an Id, you would need to use a function that could find the element, such as querySelector.

[megelinic]

Thanks for the information. Where I’m at it’s getting late. But I will play with this information both tonight and tomorrow morning. I will let you know the results of my experiments sometime tomorrow afternoon. I really appreciate all of your information.

[megelinic]

And a hearty good morning to one and all. I guess I still don’t know what I’m doing. Here is my latest code from my Setup() function.

var Bezier_Curve_Identification;
    var Attribute_Name;
    var coordinate;
    
    Bezier_Curve_Identification = document.getElementById('Bezier_Curve_1');
    Attribute_Name = "d"
    coordinate = "M 300, 200 A 20, 20 0,0,1 340,200";
    Bezier_Curve_Identification.setAttribute = (Attribute_Name, coordinate);
    Bezier_Curve_Identification.setAttribute = ("style", "stroke: red; stroke-width: 3; fill: none;")

When I click the button on my XHTML button, nothing happens. I hope someone here can assist me.

[megelinic]

I have made further adjustments to my code. I hope someone can assist me:

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;'");
              }

[m_hutley]

dont put the (single) quotes inside the (double) quotes.

setAttributeNS is for namespace properties (things that have colons in them, like “spec:attribute”). Use setAttribute for regular attributes.

[megelinic]

Thanks for all the advice. I did some further research and was able to finally develop code that actually works. But before I share it with everyone, I will modify the code so it will work with the eXist database. The intent is to execute Javascript code to retrieve the Bezier curve coordinates. Then I will store the coordinates in Javascript variables. Finally I will use the setAttribute property to display my Bezier curve. This will come in handy when I start producing animations. I will keep you posted.

[rpg_digital]

Hi megelinic,

To format your code in posts. Select the code and click on the </> icon in the menu at the top of the text editor. This will wrap the code in opening and closing ticks e.g. ``` my code here ```

In addition there are certain conventions in JS. A function name that starts with a capital letter indicates the function is a constructor function for making objects, a bit like a class.

Also variable names in JS are usually defined with camelCase rather than snake_case.

So your last function could be written like this

function setup(svg) {
  document.getElementById('my-text').value = "I'm right here.";
  const svgDef = document.getElementById('my-svg');
  const bezierCurveIdentification = svg.getElementById('Bezier_Curve_1');
  
  bezierCurveIdentification.setAttributeNS = (
    'http://www.w3.org/1999/xlink', 'd', 'M 300, 200 A 20, 20 0,0,1 340,200'
  );
  bezierCurveIdentification.setAttributeNS = (
    'http://www.w3.org/1999/xlink', 'style', 'stroke: blue; stroke-width: 3; fill: none;'
  );
}

You can obviously write your code however you like, but just thought I would share that

[megelinic]

And a hearty good evening to you as well. I wanted to thank everyone for their sage advice. I will keep this information for future reference. I finally fixed some of my computer code. But I ran into a new error and I thought someone could assist me with this error. Here is my current 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_2.js">
          
          </script>
    </head>
    <body>
         <input type="text" id="My_Text" value="I was here."/>
         <input type="button" onclick="Setup2()"/>
         <input type="button" onclick="Setup()"/>
         <p id="My_Paragraph"/>
         <svg xmlns="http://www.w3.org/2000/svg" id="My_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 Setup() {
    var Bezier_Curve_Identification;
    var Attribute_Name;
    var Attribute_Name_2;
    var Coordinate;
    var My_Properties;
    
    document.getElementById("My_Text").value = "My Setup.";
    Attribute_Name = "d";
    Attribute_Name_2 = "style";
    My_Properties = "stroke: blue; stroke-width: 3; fill: none;";
    Coordinate = "M 300 200 A 20 20 0 0 0 400 200";
    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;
    
    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;
              document.getElementById("My_Text").value = "Retrieved_Data " + Retrieved_Data;}
          };
              
    SVG_Data.send();}  

Here is my XML Data:

<SVG_Data_Collection xmlns="http://www.TedTheSpeedlearner.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.TedTheSpeedlearner.com SVG_Bezier_Curve_Data_Schema.xsd">
     <Bezier_Curve_1>
         <Main_Attribute>d</Main_Attribute>
         <Initial_Attribute>M</Initial_Attribute>
         <Coordinate_Start>300 200</Coordinate_Start>
         <Arc_Attribute>A</Arc_Attribute>
         <Bezier_Arc>20 20 0 0 0</Bezier_Arc>
         <Terminal_Coordinate>400 200</Terminal_Coordinate>
         <Style_Attribute>style</Style_Attribute>
         <Style_Color>stroke: red;</Style_Color>
         <Style_Width>stroke-width: 3;</Style_Width>
         <Style_Fill>fill: none;</Style_Fill>
     </Bezier_Curve_1>
     <Bezier_Curve_2>
        <Main_Attribute>d</Main_Attribute>
         <Initial_Attribute>M</Initial_Attribute>
         <Coordinate_Start>300 200</Coordinate_Start>
         <Arc_Attribute>A</Arc_Attribute>
         <Bezier_Arc>20 20 0 0 0</Bezier_Arc>
         <Terminal_Coordinate>400 200</Terminal_Coordinate>
         <Style_Attribute>style</Style_Attribute>
         <Style_Color>stroke: blue;</Style_Color>
         <Style_Width>stroke-width: 3;</Style_Width>
         <Style_Fill>fill: none;</Style_Fill>
     </Bezier_Curve_2>
</SVG_Data_Collection>

Here is my XQuery:

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_Bezier_Curve_Data.xml")/SVG_Data_Collection/Bezier_Curve_1;
let $First_Data_Name := $doc/Main_Attribute;
let $Data := concat($First_Data_Name, "*");
let $Second_Data_Name := $doc/Initial_Attribute;
let $Data := concat($Data, $Second_Data_Name, "-");
let $Third_Data_Name := $doc/Coordinate_Start;
let $Data := concat($Data, $Third_Data_Name, "-");
let $Fourth_Data_Name := $doc/Arc_Attribute;
let $Data := concat($Data, $Fourth_Data_Name, "-");
let $Fifth_Data_Name := $doc/Bezier_Arc;
let $Data := concat($Data, $Fifth_Data_Name, "-");
let $Sixth_Data_Name := $doc/Terminal_Coordinate;
let $Data := concat($Data, $Sixth_Data_Name);
return $Data

And here is the error message I receive when I click the button:

Retrieved_Data <?xml version="1.0" ?>/db/apps/HTML_Student/SVG_Bezier_Curve.xqexerr:ERROR org.exist.xquery.XPathException: err:XPST0003 expecting "return", found ‘;’ [at line 4, column 79]

I’m not sure what I’m doing wrong. I hope you can assist me.

[m_hutley]

well, i dont know xquery all that well, but given that line 4 is the one marked by the error, and the error is that it expected something and found something else, and line 4 is the only line in your xquery that doesnt end with a semicolon… I can make a blind guess…