blob: 2f879da35713bcef795aadf43ad31b6a4171dcd8 [file] [log] [blame]
<html>
<head>
<script language="javascript">
<!--
SVG_NS = 'http://www.w3.org/2000/svg';
function pathFromStar (radius, innerRadius, sides) {
var path = [];
for (var i = 0; i < sides * 2; ++i) {
var theta = Math.PI * i / sides + (Math.PI / 2);
var r = (i % 2) ? radius : innerRadius;
var x = r * Math.cos(theta);
var y = r * Math.sin(theta);
path.push((i ? 'L' : 'M'), x, y);
}
path.push('Z');
return path.join(' ');
}
function newSvgElement (tagName, parentNode, attrs) {
var node = document.createElementNS(SVG_NS, tagName);
if (attrs) {
for (var k in attrs) {
node.setAttribute(k, attrs[k]);
}
}
if (parentNode) {
parentNode.appendChild(node);
}
return node;
}
function setCenterPosition (node, x, y) {
node.setAttribute('transform', 'translate($1, $2)'
.replace('$1', x)
.replace('$2', y));
}
window.addEventListener('load', function () {
var svgContainer = newSvgElement('svg', document.body);
svgContainer.setAttribute('width', '100%');
svgContainer.setAttribute('height', '100%');
var shapes = [
{ pos: [ 100, 100 ], size: 60 },
{ pos: [ 250, 100 ], size: 60 },
{ pos: [ 400, 100 ], size: 50 }
];
for (var i = 0; i < shapes.length; ++i) {
var shape = shapes[i];
var node = newSvgElement('path', svgContainer, {
d: pathFromStar(shape.size, shape.size / 2, 5),
fill: '#999',
stroke: 'purple',
'stroke-width': 10,
});
setCenterPosition(node, shape.pos[0], shape.pos[1]);
node.id = 'svg';
}
});
//-->
</script>
<style>
#svg {
-webkit-svg-shadow: 5px 5px 5px #888;
}
</style>
</head>
<body>
</body>
</html>