CODEWITHSUNDEEP
svg
dota2pro
dota2pro

Reputation: 7856

How to Add Text inside a circle SVG using Javascript?

Expected Result add 1 inside circle using Javascript

enter image description here

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>

Upvotes: 0

Views: 757

Answers (2)

fiveobjects
fiveobjects

Reputation: 4259

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>

Upvotes: 2

felixmosh
felixmosh

Reputation: 35473

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>

Upvotes: 1

Related Questions