Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2011, 14:33
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Создание SVG элемента и вставка на страницу
Возвращаюсь к теме работы с SVG. Не понимаю, почему внутри SVG не отображаются элементы, в частности, image, хотя в DOM он есть. Как корректно создать SVG и вставить его на страницу?
SVG = {
	NS: 'http://www.w3.org/2000/svg',
	
	createElement: function(name, attrs){
		var element = document.createElementNS(SVG.NS, name);
		
		if(attrs) {
			SVG.setAttr(element, attrs);
		}
		return element;
	},
	
	setAttr: function(element, attrs) {
		for(var i in attrs) {
			element.setAttributeNS(SVG.NS, i, attrs[i]);
		}
		return element;
	}
}

jQuery(function(){
	var svg = SVG.createElement('svg', {
		xmlns: SVG.NS,
		version: "1.1",
		width: "640",
		height:"480"
	});
	
	var image = SVG.createElement('image', {
		x:"0",
		y:"0",
		width:"320",
		height:"240",
		href:"http://byaki.net/uploads/posts/2008-02/1204270244_1.jpg",
	});
	

	svg.appendChild(image);
	
	document.getElementsByTagName('body')[0].appendChild(svg);

});


_____________________________________________

Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2011, 21:08
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Проблема решена. Вот код объекта SVG:
//микро-библиотека для создания SVG элементов и установки атрибутов
	var SVG = {
		
		//нужные пространства имен
		svgns: 'http://www.w3.org/2000/svg',
		xlink: 'http://www.w3.org/1999/xlink',
		
		//создание svg элемента
		createElement: function(name, attrs){
			var element = document.createElementNS(SVG.svgns, name);
			
			if(attrs) {
				SVG.setAttr(element, attrs);
			}
			return element;
		},
		
		//установка атрибутов
		setAttr: function(element, attrs) {
			for(var i in attrs) {
				if(i === 'href') { //путь к изображению приписывается в атрибуте xlink:href
					element.setAttributeNS(SVG.xlink, i, attrs[i]);
				} else { //обычный атрибут
					element.setAttribute(i, attrs[i]);
				}
			}
			return element;
		}
	}
Ответить с цитированием
  #3 (permalink)  
Старый 12.09.2015, 17:52
Новичок на форуме
Отправить личное сообщение для XPyCTang Посмотреть профиль Найти все сообщения от XPyCTang
 
Регистрация: 21.11.2012
Сообщений: 5

Более корректнее было бы сделать так:

AttrSet = function(element,attr){
   if (attr.href){
      element.setAttributeNS(SVG.xlink,'href',attr.href);
      delete attr.href;
   }
   for (var i in attr){
      element.setAttribute(i,attr[i]);
   }
}

Нет нужды проверять каждый атрибут на соответствие 'href', поскольку у одного элемента не может быть двух одинаковых атрибутов.
Ответить с цитированием
  #4 (permalink)  
Старый 13.09.2015, 16:47
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Сообщение от FINoM
27.06.2011
__________________
"Matreshka is fucking awesome" © чувак с Reddit
Matreshka.js - Три возможности
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
создание объект, ключ которого - значение элемента другого объекта cmygeHm Общие вопросы Javascript 2 30.05.2011 12:57
Создание элемента DOM в jQuery bartonom jQuery 8 08.05.2011 18:25
Массивы удаление элемента и вставка на его место другого mycoding Общие вопросы Javascript 1 19.04.2010 22:30
Вставка скрипта в HTML страницу dorn Общие вопросы Javascript 5 14.10.2009 07:39
вставка rss на страницу Samaretz Общие вопросы Javascript 4 25.08.2009 23:04