Doğrudan jquery ve Svg ile çalışmak mümkün mü (eklenti yok)?

Question

Jquery ve Svg ile birlikte çalışıyorum. Ama hiçbir eklentiyi kullanmak istemiyorum.

Şimdi uğraşıyorum Sorun svg belgeye bir çocuk eklemek için geleneksel ekleme modunu kullanarak çalışmak çalıştığınızda, nesne hale olmamasıdır. Bakalım yapmaya çalıştığım şey check out:

/* Creating the svg container using pure JS */ 
var container = document.getElementById("svg_space"); 
mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
mySvg.setAttribute("version", "1.2"); 
mySvg.setAttribute("baseProfile", "tiny"); 
container.appendChild(mySvg); 

/* Adding a child and setting attributes to the SVG container using pure JS */ 
Circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 
Circle.setAttribute("cx", "60"); 
Circle.setAttribute("cy", "30"); 
Circle.setAttribute("r", "13"); 
Circle.setAttribute("class", "class1"); 
    mySvg.appendChild(Circle); /* After this, the circle is rendered */ 

/* Then, I tried to use jQuery to perform the same action... */ 
$(mySvg).append("<circle />"); 
$(mySvg).find("circle").attr("cx","160"); 
$(mySvg).find("circle").attr("cy","70"); 
$(mySvg).find("circle").attr("r","30"); 
$(mySvg).find("circle").attr("class","class1"); 

... ama bu eylemin ardından, daire işlemez. En azından çemberin Geliştiriciler Aracı Denetçisinde DOM ağacına gerçekten eklenip eklenmediğini kontrol ettim ve her iki öğenin daha önce belirlenen uygun niteliklerle var olduğunu öğrendim, ancak jQuery ile oluşturulan daire bir html alt öğesiydi. svg torun olarak değil. Bu, bir svg daire öğesi ile ilgili kurucular, prototipler ve diğer yöntemlerin, bu 'jquery' dairesinin bir parçası olmadığı, bunun yerine salt bir html etiketiyle ilişkili olduğu anlamına gelir.

jquery kullanarak svg torunları olarak svg öğeleri oluşturmak için bir yol var mı, ya da daha iyi verimlilik kaybına rağmen saf javascript kullanılmasıdır?

Answer 1

Denemeyi başaramadım, ama bahse girerim bu işe yarar. Bunun yerine

$(mySvg).append("<circle />"); 

Bu yerine $(document.createElement("div")) yoluyla daha iyi performans almanın eski numarayı aynıdır belki bir kez daha bu daha yapmayı planlıyorsanız

$(mySvg).append(document.createElementNS("http://www.w3.org/2000/svg", "circle")); 

,

function svgEl(tagName) { 
    return document.createElementNS("http://www.w3.org/2000/svg", tagName); 
} 

$(mySvg).append(svgEl("circle")); 

yapın $("<div />").

Answer 2

Bu, Chrome 11'de çalışır. Diğer tarayıcılarda denemedim. Anladığım kadarıyla

$(mySvg).append("<svg><circle /></svg>"); 
$(mySvg).find("circle").unwrap(); 
$(mySvg).find("circle").attr("cx","160"); 
$(mySvg).find("circle").attr("cy","70"); 
$(mySvg).find("circle").attr("r","30"); 
$(mySvg).find("circle").attr("class","class1"); 

, jQuery tarayıcının doğal HTML ayrıştırıcı dize ileterek html ayrıştırır. HTML ayrıştırma kuralları, ismine ve onun ata elemanlarına dayalı olarak elemanlara bir ad alanı atar, böylece svg ad alanı içinde bir svg öğesi içinde ayrıştırılması gereken daire elemanını elde etmek için.

Yani burada, bu ayrıştırılır ve <svg> öğesinin içinde eklenen ve daha sonra oluşturulan ekstra svg elemanını kaldırmak için denir paketini almaktadır. Bu append-and-unwrap desen biraz çirkin ve ben daha iyi jQuery bilgisi olan birinin daha zarif bir çözüm bulacağını umuyorum, ama konsept yeterince açık.

Answer 3

jQuery ve SVG'yi birlikte kullanmayın. jQuery DOM manipülasyonu için tasarlanmıştır, Raphael SVG manipülasyonu için tasarlanmıştır.

Kullanım kılavuzunuz için hazırladığımız JavaScript kütüphanesi, Raphael numaralı ürünüdür.

Gerçekten her şeyi zor yoldan yapmamalısınız, sorunlara yol açacaktır.