html
html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<svg width=160 height=160 style="border: 1px solid red"></svg>
<br>why no rectangle in svg?<br>
<button onclick="alert(document.querySelector('svg').innerHTML)">alert(svg.innerHTML)</button>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.onload=function(){
var svg=document.querySelector("svg")
//svg.innerHTML+="<rect width=100 height=100>"
//↑this works / это работает
var r=document.createElement("rect")
r.width="100"
r.height="100"
r.style.width="100px"
r.style.height="100px"
r.style.fill="grey"
svg.append(r)
//rect is added to innerHTML, but with no arguments
//прямоугольник добавлен в innerHTML, но без аргументов
//please tell me right way to make svg figure using document.createElement (if it is possible
//Пожалуйста расскажите, как сделать фигуру, используя document.createElement (если это возможно)
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run