Сообщение от McLotos
|
Добрый день!
Пытаюсь создать SVG область и расставить в ней точки.
svg = document.createElement('svg');
svg.style.height = elem.offsetHeight+'px';
svg.style.width = elem.offsetWidth+'px';
svg.style.minHeight = parseInt(max)+20+'px';
svg.style.minWidth = (parseInt(max)+20)*3+'px';
svg.style.display = 'block';
circle = document.createElement('circle');
circle.setAttribute('cx', 50);
circle.setAttribute('cy', 50);
circle.setAttribute('r',3);
circle.setAttribute('stroke', 'black');
circle.setAttribute('stroke-width', 1);
circle.setAttribute('fill', 'red');
svg.appendChild(circle);
elem.appendChild(svg);
Инспектор элементов показывает что circle создан, а вот на странице его не видно. Подскажите что не так.
|
McLotos, потому, что для каждого element'а SVG надо использовать document.createElementNS. Вот как надо:
<!doctype html>
<html><head>
<meta charset="utf-8">
</head><body>
<script type="text/javascript">
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
g = document.createElementNS(svg.namespaceURI, 'g'),
circle = document.createElementNS(svg.namespaceURI, 'circle');
svg.height = '300px';
svg.width = '300px';
circle.setAttribute('cx', 50);
circle.setAttribute('cy', 50);
circle.setAttribute('r',15);
circle.setAttribute('stroke', 'black');
circle.setAttribute('stroke-width', 3);
circle.setAttribute('fill', 'red');
g.appendChild(circle);
svg.appendChild(g);
document.body.appendChild(svg);
</script>
</body></html>