Форум

firep91613 · #1 (**permalink**) 19.12.2023, 17:07

Подскажите, почему не вставляется?

const rect = `<svg width="500" height="250">
				<rect x="5" y="5" width="490" height="240" style="fill: white; stroke: gray; stroke-width: 5;" />
			  </svg>`;

document.body.insertAdjacentHTML('afterbegin', rect);

function createCicrle(cx, cy, r = 20) {
  let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
  circle.setAttribute('r', r);
  circle.setAttribute('cx', cx);
  circle.setAttribute('cy', cy);
  circle.setAttribute('fill', 'red');
  circle.setAttribute('stroke-width', 1);
  return circle;
}

let h = document.getElementsByTagName('rect')[0].getBBox().height;
let r = 20;
let cy = h / 2 - (r / 2);
let cx = r;

document.getElementsByTagName('rect')[0].append(createCicrle(cx, cy, r));

рони · #2 (**permalink**) 19.12.2023, 18:35

firep91613,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
</head>

<body>
    <script>
        const rect = `<svg width="500" height="250" >
                <rect x="5" y="5" width="490" height="240" style="fill: white; stroke: gray; stroke-width: 5;" />
              </svg>`;

        document.body.insertAdjacentHTML('afterbegin', rect);

        function createCicrle(cx, cy, r = 20) {
            let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('r', r);
            circle.setAttribute('cx', cx);
            circle.setAttribute('cy', cy);
            circle.style.fill = 'red';
            circle.style.strokeWidth = '1';
            return circle;
        }

        let h = document.getElementsByTagName('rect')[0].getBBox().height;
        let r = 20;
        let cy = h / 2 - (r / 2);
        let cx = r + 7;

        document.getElementsByTagName('rect')[0].after(createCicrle(cx, cy, r));
    </script>
</body>

</html>

firep91613 · #3 (**permalink**) 20.12.2023, 17:38

рони,
благодарю.

Форум

Справочник

Discord чат

Курсы javascript