VPF::Динамическое создание SVG с линком

inohodec

Дата 21.6.2012, 14:29 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 151
Регистрация: 1.12.2004

Репутация: нет
Всего: 2

Всем привет

Столнулся с неожиданной проблемой, нужна помощь smile

Я пытаюсь динамически создавать определенный список из javascript:

Код


function buildList() {

var container = document.getElementById("lbUsers");
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

for (var i = 0; i < 5; i++) {        
var c2 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
c2.setAttribute("x", "5");
c2.setAttribute("y", 70*i);
c2.setAttribute("rx", "20");
c2.setAttribute("ry", "20");
c2.setAttribute("width", "60");
c2.setAttribute("height", "60");
c2.setAttribute("fill", "red");
c2.setAttribute("stroke", "black");//#AA99FF
c2.setAttribute("stroke-width", "5");
c2.setAttribute("opacity", "0.5");

var anchor =  document.createElementNS( "http://www.w3.org/1999/svg", "a");
anchor.setAttribute("xlink:href", "index.html");

var b2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
b2.setAttribute("font-size", "40");
b2.setAttribute("font-family", "arial");
b2.setAttribute("font-family", "arial");
b2.setAttribute("fill", "#0f0");
b2.setAttribute("x", "25");
b2.setAttribute("y", 70*i);
b2.textContent = "Hello World";

anchor.appendChild(c2);
anchor.appendChild(b2);
mySvg.appendChild(anchor);

container.appendChild(mySvg);
        }
}

Html такой:

Код


<body onload="buildList()">
<div id="lbUsers"></div>

Это действительно создает нужные элементы но они не видимы :(
Т.е. если я копирую view source и из полученного html делаю новую страницу то она открываетса без проблем и все элементы на месте
А вот сразу, динамически они почему то не видимы

Заранее спасибо smile

Aliance

Дата 21.6.2012, 14:50 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

В то время, как создание svg элемента должно происходить в рамках svg namespace (что у вас реализовано), большинство svg аттрибутов должны создаваться с нулевым namespace

Код


elem.setAttributeNS(null, "key", value);
// или
elem.setAttribute("key", value);

Что так же у вас выполняется. Но из этого правила есть исключение - аттрибут href в namespace "xlink" должен задаваться с явным указанием общего svg namespace:

Код


anchor.setAttributeNS("http://www.w3.org/2000/svg", "xlink:href", "index.html");

http://jsfiddle.net/Aliance/aL7qT/

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

inohodec

Дата 21.6.2012, 15:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 151
Регистрация: 1.12.2004

Репутация: нет
Всего: 2

Огромное спасибо!!!

А я уже несколько часов сижу мучаюсь:)

Спасибо

inohodec

Дата 21.6.2012, 16:21 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 151
Регистрация: 1.12.2004

Репутация: нет
Всего: 2

Упс, поторопился:(

Линки не работают

Помогите пожалуйста еще раз smile

Спасибо

Aliance

Дата 21.6.2012, 18:05 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Дело в том, что для корректной работы должны выполняться 3 условия:

в головном теге <svg> должен присутствовать атрибут xmlns равный http://www.w3.org/2000/svg
в головном теге <svg> должен присутствовать атрибут xmlns:xlink равный http://www.w3.org/1999/xlink
в теге <a> должен присутствовать атрибут href (или xlink:href)

http://jsfiddle.net/Aliance/FU4vG/

Это сообщение отредактировал(а) Aliance - 22.6.2012, 09:22

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

inohodec

Дата 21.6.2012, 18:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 151
Регистрация: 1.12.2004

Репутация: нет
Всего: 2

Спасибо

Да я искал вроде бы как....
Но как правильно говориться, что бы правильно задать вопрос нужно знать большую часть ответа

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »