dinamik JS kullanarak SVG elemanın niteliği bir yapıya sahiptir: Ben pic.jpg
url almak istiyorumalınıyor 'Xline: href' HTML DOM
<div id="div">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
<image x="2cm" y="2cm" width="5cm" height="5cm" id="img" xlink:href="pic.jpg"></image>
</svg>
</div>
ve en dış div dan başlamak gerekiyor tam olarak kaynak <image>
öğeden:
var div = document.getElementById("div");
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
var url = img.getAttribute('xlink:href'); // Please pay attention I do not use getAttributeNS(), just usual getAttribute()
alert(url); // pic.jpg, works fine
sorum SVG ve çocuklar gibi öğesinden niteliklerin bu tür almak için doğru yoldur nedir?
Çünkü bu şekilde yapmaya çalıştım ve o da (ı diğer tarayıcıları deneyin vermedi) Chrome'da iyi çalıştı önce:
var svg = div.getElementsByTagName('svg')[0]; // I do not use NS
var img = svg.getElementsByTagName('image')[0];
var url = img.getAttribute('xlink:href'); // and do not use getAttributeNS() here too
alert(url); // pic.jpg, works fine
Ama getAttributeNS()
kullanmaya çalıştığında ben boş bir sonuç var:
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
// Please pay attention I do use getAttributeNS()
var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href');
alert(url); // but I got black result, empty alert window
teşekkürler olduğunu! Bu cevap, SVG içeriğindeki bir görüntünün xlink: href niteliğini * JavaScript aracılığıyla * ayarlamanıza yardımcı oldu. Kodum şöyle görünür: img.setAttributeNS ('http://www.w3.org/1999/xlink', 'href', 'new.url'); new.url, orijinali değiştirmek istediğim resmin URL'sidir. – grw
şimdi jquery seçiciler ile aynı şeyi nasıl yapılır? –
SVG ile jquery kullanımı çok fazla acı çekmenize neden olur ve bundan kaçınılmalıdır. –