Итак, вот код:
<!doctype html>
<html>
<head>
<script type="text/javascript">
function stars() {
var svg = document.createElement("svg");
var polygon = document.createElement("polygon");
polygon.setAttribute("style","width:70px;height:70px;")
// A star with the vector points.
polygon.setAttribute("points","10,1 4,19.8 19,7.8 1,7.8 16,19.8");
// More properties.
polygon.setAttribute("style","fill:yellow;stroke:yellow;stroke-width:1;fill-rule:nonzero;")
// Put in the parent element.
svg.appendChild(polygon);
// Then again, put this parent element in an existing element, that is: "div".
document.getElementById("littlediv").appendChild(svg);
}
</script>
<style type="text/css">
#littlediv
{
position:absolute;
width:100px;
height:100px;
}
svg
{
position:absolute;
height:100px;
width:100px;
}
polygon
{
position:absolute;
height:100px;
width:100px;
}
</style>
</head>
<body onload="stars()">
<div id="littlediv">
<!-- Here is where the created elements with it's attributes will append. -->
</div>
</body>
</html>
Когда страница загружена, прослушиватель событий вызывает функцию stars(). Затем внутри функции создаются элементы html svg и впоследствии polygon, элемент polygon добавляется к svg, и снова элемент svg добавляется к существующему элементу, то есть: div.
Теперь элементы и сопутствующие атрибуты style будут аккуратно вставлены в теги div этого элемента. Но при проверке элементы и объявления атрибутов не будут отображаться на странице. Поэтому в CSS я предварительно установил размеры для всех элементов равными 100x100 пикселей.
Конечно, вы можете скопировать / вставить код, сохранить его с суффиксом. html и проверить.
Я что-то сделал глупо? Почему элементы не отображаются?