0

1使用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>

4

2 回答 2

1

与将文本添加到 DOM 元素的方式相同，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>

于 2019-08-15T19:40:46.643 回答
1

调整文本位置以获得您想要的内容：

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

这是运行示例：

<!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>

于 2019-08-15T19:50:29.483 回答