Neden SVG javascript ile oluşturulan öğeyi gösterilmiyor?

Dokümanıma bir SVG var ve bunun gibi javascript ile buna bir sembol ekleyin: Oluşan kodunu tam olarak HTML wich yazılmış başka bir düğüm ile aynı iseNeden SVG javascript ile oluşturulan öğeyi gösterilmiyor?

var myScene =document.getElementById('myScene'); 
var useSVG = document.createElement('use'); 
useSVG.setAttribute('xlink:href','spriteSheet.svg#mySymbol'); 
useSVG.setAttribute('x','10'); 
useSVG.setAttribute('y','30'); 
useSVG.setAttribute('width','10'); 
useSVG.setAttribute('height','10'); 
myScene.appendChild(useSVG);

sembolü görünmüyor olduğu doğru şekilde görüntülendi. ayıklayıcısında gösterilen

Kodu:

<svg id="myScene" width="200px" height="200px"> 
    <use xlink:href="spriteSheet.svg#mySymbol" x="5" y="50" width="10" height="10"></use> 
    <!-- this one was in html, it is visible --> 
    <use xlink:href="spriteSheet.svg#mySymbol" x="10" y="30" width="10" height="10"></use> 
    <!-- this one is added with javascript. it is not displayed --> 
</svg>

kaynak

2014-09-20 bokan

aşağıda cevap yeterli değildir ama noktaları doğru yöne:

Burada fazla bilgi ve olası bir geçici çözüm bulundu. Burada 'use' öğesini oluşturmak için' document.createElement' yerine 'document.createElementNS' kullanmak zorundasınız. Bu [cevap] (http://stackoverflow.com/questions/16488884/add-svg-element-to-existing-svg-using-dom) benzer sorunu çözdü. –

Her şeyi denedim, işe yaramayacağım. Bir çalışma örneği de bulamıyor. Çözümüm, kodlanmış USE etiketine bir kimlik vermek ve node.cloneNode() ile kopyalamaktır. Hala çalışan bir örnek arıyoruz. – bokan

SVG öğeleri oluşturmak için createElementNS() kullanmanız gerekir. Temel createElement(), HTML ad alanında öğeler oluşturur. Yani, temel olarak <svg:use> yerine <html:use> öğesi oluşturuyorsunuz.

var myScene =document.getElementById('myScene'); 
var useSVG = document.createElementNS('http://www.w3.org/2000/svg', 'use'); 
useSVG.setAttributeNS('http://www.w3.org/1999/xlink','href','spriteSheet.svg#mySymbol'); 
useSVG.setAttribute('x','10'); 
useSVG.setAttribute('y','30'); 
useSVG.setAttribute('width','10'); 
useSVG.setAttribute('height','10'); 
myScene.appendChild(useSVG);

Demo here

Güncelleme

Ben sadece kod ile ikinci sorun var anlamışlardır. href'unuzda harici bir referans kullanıyorsunuz (başka bir dosyadaki bir sembole referans veriyor). IE dış referansları desteklemiyor gibi görünüyor. http://css-tricks.com/svg-use-external-source/

kaynak

2014-09-20 13:21:32

Teşekkür ederim ... ama Chrome ve Firefox'ta çalışıyor ancak IE'de çalışmıyor 10. Neden bir Fikrin var mı? – bokan

Kullanmanız gerekebilir 'useSVG.setAttributeNS ('http://www.w3.org/1999/xlink','xlink:href','spriteSheet.svg#mySymbol') IE üzerinde bunu deneyin, eğer hala çalışmıyorsa, lütfen kodunuzu görebilmemiz için bir jsfiddle gönderiniz. –

Hala çalışmıyor. Belki bir SVG sembolü kullanıyorum çünkü daha sonra gruplarla deneyeceğim – bokan

ben% 100 emin değilim ama böyle setAttributeNS() kullanılarak xlink:href Özellik ayarlamak gerekir düşünüyorum:

Ayrıca

useSVG.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'spriteSheet.svg#mySymbol');

emin olun ad alanı belgenizde bildirilmiştir.

<html xmlns:xlink="http://www.w3.org/1999/xlink"> 

<!-- or if standalone svg --> 

<svg xmlns:xlink="http://www.w3.org/1999/xlink">

Ancak, bu şekilde muhtemelen bu da html5 veya bağımsız SVG için çalışacak, bir xhtml belge içinde aynı sorunu çözüldü. şans

xlink specification

iyi!

kaynak

2014-09-20 09:11:11 philipp

Sadece denedim, işe yaramıyor, (yine de teşekkürler. Xlink'in 'xlink'i olmadan href özniteliğini yazıyor: href. – bokan

Neden SVG javascript ile oluşturulan öğeyi gösterilmiyor?

cevap

İlgili konular