Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Динамическое создание SVG с линком


Автор: inohodec 21.6.2012, 14:29
Всем привет

Столнулся с неожиданной проблемой, нужна помощь 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
В то время, как создание 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/

Автор: inohodec 21.6.2012, 15:00
Огромное спасибо!!!

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

Спасибо

Автор: inohodec 21.6.2012, 16:21
Упс, поторопился:(

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

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

Спасибо

Автор: Aliance 21.6.2012, 18:05
Дело в том, что для корректной работы должны выполняться 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/

Автор: inohodec 21.6.2012, 18:42
Спасибо smile

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)