How to Add Text inside a circle SVG using Javascript?

Question

Expected Result add 1 inside circle using Javascript

const svg = document.querySelector('#svg');
const svgNS = svg.namespaceURI;
const rect = document.createElementNS(svgNS, 'rect');

const offsetX = 20;
const offsetY = 20;

const outerCircle = document.createElementNS(svg.namespaceURI, 'circle');
outerCircle.setAttributeNS(null, 'cx', offsetX.toString());
outerCircle.setAttributeNS(null, 'cy', offsetY.toString());
outerCircle.setAttributeNS(null, 'r', '9');
outerCircle.setAttributeNS(null, 'fill', 'white');
outerCircle.setAttributeNS(null, 'stroke', 'white');
outerCircle.setAttributeNS(null, 'stroke-width', '1');
svg.appendChild(outerCircle);


const circle = document.createElementNS(svg.namespaceURI, 'circle');
circle.setAttributeNS(null, 'cx', offsetX.toString());
circle.setAttributeNS(null, 'cy', offsetY.toString());
circle.setAttributeNS(null, 'r', '7');
circle.setAttributeNS(null, 'fill', 'red');
circle.setAttributeNS(null, 'stroke', 'red');
circle.setAttributeNS(null, 'stroke-width', '1');
svg.appendChild(circle);

const number = document.createElementNS(svg.namespaceURI, 'text');
number.setAttributeNS(null, 'x', offsetX.toString());
number.setAttributeNS(null, 'y', offsetY.toString());
number.setAttributeNS(null, 'text-anchor', 'middle');
number.setAttributeNS(null, 'stroke', 'white');
number.setAttributeNS(null, 'stroke-width', '1px');

svg.appendChild(number);

svg {
  border: 1px solid #000000;
  background: black;
}

<svg id="svg" width="100" height="100">
</svg>

fiveelements · Accepted Answer · 2019-08-15T19:54:03.500

Adjust the text position to get exactly what you wanted:

number.textContent = '1';
number.setAttributeNS(null, 'fill', 'white');
number.setAttributeNS(null, 'y', offsetY + 5); // 5 in this context, may vary depending on the circle radius

Here is the running sample:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Click Events</title>
    <style>
        svg {
            border: 1px solid #000000;
            background: black;
        }
    </style>
</head>

<body>
    <svg id="svg" width="100" height="100">
    </svg>
    <script>
        const svg = document.querySelector('#svg');
        const svgNS = svg.namespaceURI;
        const rect = document.createElementNS(svgNS, 'rect');

        const offsetX = 20;
        const offsetY = 20;

        const outerCircle = document.createElementNS(svg.namespaceURI, 'circle');
        outerCircle.setAttributeNS(null, 'cx', offsetX.toString());
        outerCircle.setAttributeNS(null, 'cy', offsetY.toString());
        outerCircle.setAttributeNS(null, 'r', '9');
        outerCircle.setAttributeNS(null, 'fill', 'white');
        outerCircle.setAttributeNS(null, 'stroke', 'white');
        outerCircle.setAttributeNS(null, 'stroke-width', '1');
        svg.appendChild(outerCircle);


        const circle = document.createElementNS(svg.namespaceURI, 'circle');
        circle.setAttributeNS(null, 'cx', offsetX.toString());
        circle.setAttributeNS(null, 'cy', offsetY.toString());
        circle.setAttributeNS(null, 'r', '7');
        circle.setAttributeNS(null, 'fill', 'red');
        circle.setAttributeNS(null, 'stroke', 'red');
        circle.setAttributeNS(null, 'stroke-width', '1');
        svg.appendChild(circle);

        const number = document.createElementNS(svg.namespaceURI, 'text');
        number.setAttributeNS(null, 'x', offsetX.toString());
        number.setAttributeNS(null, 'y', offsetY + 5);
        number.setAttributeNS(null, 'text-anchor', 'middle');
        number.setAttributeNS(null, 'stroke', 'white');
        number.setAttributeNS(null, 'fill', 'white');
        number.setAttributeNS(null, 'stroke-width', '1px');
        number.textContent = '1';
        svg.appendChild(number);

    </script>
</body>

</html>

Add `number.setAttributeNS(null, 'fill', 'white');`. Modified the answer to include this. — fiveelements, Aug 15 '19 at 19:53

score 1 · Answer 2 · answered Aug 15 '19 at 19:40

The same way you add text to DOM element, dom.textContent = '1';

const svg = document.querySelector('#svg');
const svgNS = svg.namespaceURI;
const rect = document.createElementNS(svgNS, 'rect');

const offsetX = 20;
const offsetY = 20;

const outerCircle = document.createElementNS(svg.namespaceURI, 'circle');
outerCircle.setAttributeNS(null, 'cx', offsetX.toString());
outerCircle.setAttributeNS(null, 'cy', offsetY.toString());
outerCircle.setAttributeNS(null, 'r', '9');
outerCircle.setAttributeNS(null, 'fill', 'white');
outerCircle.setAttributeNS(null, 'stroke', 'white');
outerCircle.setAttributeNS(null, 'stroke-width', '1');
svg.appendChild(outerCircle);


const circle = document.createElementNS(svg.namespaceURI, 'circle');
circle.setAttributeNS(null, 'cx', offsetX.toString());
circle.setAttributeNS(null, 'cy', offsetY.toString());
circle.setAttributeNS(null, 'r', '7');
circle.setAttributeNS(null, 'fill', 'red');
circle.setAttributeNS(null, 'stroke', 'red');
circle.setAttributeNS(null, 'stroke-width', '1');
svg.appendChild(circle);

const number = document.createElementNS(svg.namespaceURI, 'text');
number.setAttributeNS(null, 'x', offsetX.toString());
number.setAttributeNS(null, 'y', offsetY.toString());
number.setAttributeNS(null, 'text-anchor', 'middle');
number.setAttributeNS(null, 'stroke', 'white');
number.setAttributeNS(null, 'stroke-width', '1px');
number.textContent = '1';

svg.appendChild(number);

svg {
  border: 1px solid #000000;
  background: black;
}

<svg id="svg" width="100" height="100">
</svg>

Ah I see I only knew `innerText` till now https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_textcontent_innertext — dota2pro, Aug 15 '19 at 19:42
https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext#answer-35213210 — felixmosh, Aug 15 '19 at 19:43

How to Add Text inside a circle SVG using Javascript?

2 Answers2