Вставка элемента в SVG
Подскажите, почему не вставляется?
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)); |
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> |
рони,
благодарю. |
Часовой пояс GMT +3, время: 04:50. |