How do I append SVG circle inside a tag

Question

The following circle tag is inside tag:

<circle cx="111.70110487400142" cy="134.60212936975006" r="10" stroke="#000000" fill="#000000" stroke-width="0" data-pdf-annotate-id="8e1b063b-ec08-4c73-8b86-d8e8cce5615e" data-pdf-annotate-type="fillcircle" aria-hidden="true" transform="scale(1.33) rotate(0) translate(0, 0)"></circle>

Now i have to append this generated circle inside a tag like

<a href="#">
<circle cx="111.70110487400142" cy="134.60212936975006" r="10" stroke="#000000" fill="#000000" stroke-width="0" data-pdf-annotate-id="8e1b063b-ec08-4c73-8b86-d8e8cce5615e" data-pdf-annotate-type="fillcircle" aria-hidden="true" transform="scale(1.33) rotate(0) translate(0, 0)"></circle>
</a>

Updated:

<svg class="annotationLayer" width="1118.53" height="1582.7" data-pdf-annotate-container="true" data-pdf-annotate-viewport="{&quot;viewBox&quot;:[0,0,841,1190],&quot;scale&quot;:1.33,&quot;rotation&quot;:0,&quot;offsetX&quot;:0,&quot;offsetY&quot;:0,&quot;transform&quot;:[1.33,0,0,-1.33,0,1582.7],&quot;width&quot;:1118.53,&quot;height&quot;:1582.7,&quot;fontScale&quot;:1.33}" data-pdf-annotate-document="/uploads/docs/Vishnu/file/IBC-CW1a-DE-02_2.pdf" data-pdf-annotate-page="1" style="width: 1118.53px; height: 1582.7px;">

<circle cx="138.76877404693374" cy="82.72243012162977" r="10" stroke="#000000" fill="#000000" stroke-width="0" data-pdf-annotate-id="b91a7011-656c-48d6-9f1c-62ac4bfc4f91" data-pdf-annotate-type="fillcircle" aria-hidden="true" transform="scale(1.33) rotate(0) translate(0, 0)"></circle>

</svg>


function createCircle(a) {
      var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      (0, _setAttributes2.default)(circle, {
        cx: a.cx,
        cy: a.cy,
        r: a.r
        });
        var spot_anchor = document.createElement("a")
        console.log(spot_anchor)
        spot_anchor.appendChild(circle)
        console.log(spot_anchor)

   console.log('Create_circl1')
      return circle;
    }

How can i able to do by using javascript ?

Answer 1

Your circle needs to be inside an svg tag, otherwise it is meaningless in your html . So create a wrapping SVG in the same way you make the circle , then append the circle to that, and the svg to your anchor :

 function createCircle( a ){ var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); var anchor = document.createElement( 'a' ); circle.setAttribute( 'cx', a.cx ); circle.setAttribute( 'cy', a.cy ); circle.setAttribute( 'r', ar ); svg.setAttribute( 'viewBox', `${ax - ar} ${ay - ar} ${ar * 2} ${ar * 2}` ); svg.setAttribute( 'width', `${ar * 2}` ); svg.setAttribute( 'height', `${ar * 2}` ); svg.appendChild( circle ); anchor.appendChild( svg ); return anchor; } document.body.appendChild( createCircle({ cx: 10, cy: 10, r: 10 }) ); 

You should not add attributes such as fill and stroke to your a tag directly, as those attributes are not supported and invalid. You should use data attributes in that case. Maybe even consider just using data-svg-attributes="{'cx':10,'cy':10,'r':10}" and use a JSON.parse when you need to to get the right data out. Update : The fill and stroke attributes will be inherited if you declare them in the wrapping tag's style attribute, so you could use that (aka style="stroke: red;" ).

Answer 2

You are creating your <a> element the incorrect way. You are using:

document.createElement("a")

This creates an <a> element in the HTML namespace. In other words, an HTML <a> element.

You need to create an SVG <a> element, which is completely different, even though it has the same name.

You do that in the same way that you created the <circle> element:

document.createElementNS('http://www.w3.org/2000/svg', 'a');

Answer 3

appendChild, replaceNode etc will remove the node from the tree before relocating it, so (since you asked it vaguely I have 0 idea if the atag exists or not, so I assume it is there, otherwise create it using createElementNS ):

yourSvg = document.querySelector("svg");
    yourCircle = svg.querySelector("circle");
    yourATag = svg.querySelector("a");
    yourATag.appendChild(yourCircle)

The a tag is not a visual element, its bounding box will be equal to what is inside. In case you are wondering:

https://jsfiddle.net/ibowankenobi/4t44n8jo/4/