Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.06.2016, 20:41
Аспирант
Отправить личное сообщение для McLotos Посмотреть профиль Найти все сообщения от McLotos
 
Регистрация: 18.11.2010
Сообщений: 56

Не видно созданные элементы
Добрый день!
Пытаюсь создать 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 создан, а вот на странице его не видно. Подскажите что не так.
Ответить с цитированием
  #2 (permalink)  
Старый 15.06.2016, 21:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,188

McLotos,
Сообщение от FINoM
Вот код объекта SVG:
микро-библиотека для создания SVG элементов и установки атрибутов
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2016, 21:19
Аватар для pureJS
Аспирант
Отправить личное сообщение для pureJS Посмотреть профиль Найти все сообщения от pureJS
 
Регистрация: 04.06.2016
Сообщений: 70

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исключить из переменной elems все элементы которые имеют родственные элементы с класс Fenix-77 Общие вопросы Javascript 2 12.04.2016 16:20
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 17:41
динамически созданные элементы не показываются в Iframe namename1 Events/DOM/Window 1 26.12.2013 00:11
Выбрать элементы, в которые вложен элемент с id. Вадимчег jQuery 3 24.11.2012 08:38
Событие на динамически созданные элементы списка Arigato Events/DOM/Window 7 12.12.2011 07:28