jQuery öğesinin kullanılması, SVG öğelerini hedeflemek için IE'de yalnızca başarısız oluyor

Question

jQuery ile bir SVG bloğu içinde bir 'daire' öğesi üzerinde bir sınıf ayarlayıp kaldırıyorum. Bu, test ettiğim tüm son tarayıcılarda çalışır, ancak IE'de bir hatayla sonuçlanır (büyük olasılıkla hepsi 9 & 10).

jQuery(document).ready(function($) { 
 
    console.log('Console running'); 
 
    var $circle = $('svg circle'), 
 
    clicked = false; 
 
    $circle.on({ 
 
    click: function(e) { 
 
     setClick($(this)); 
 
    } 
 
    }); 
 
    function removeClick(callback) { 
 
    $('svg').find('.clicked').removeAttr("class"); 
 
    console.log('clicked removed'); 
 
    callback(); 
 
    } 
 
    function setClick($this) { 
 
    removeClick(function() { 
 
     $this.attr("class", "clicked").queue(function() { 
 
     console.log('clicked added'); 
 
     clicked = true; 
 
     }).dequeue(); 
 
    }); 
 
    } 
 
});

circle.clicked { 
 
    fill:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pseudo-page cf"> 
 
    <div class="svg-container" style="position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 100%;"> 
 
    <svg style="position: absolute; height: 100%; width: 100%; left: 0; top: 0;" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" x="0" y="0" fill="#cccccc" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 350" xml:space="preserve"> 
 
     <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> 
 
     <g> 
 
     <circle cx="30" cy="25" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/> 
 
     <circle cx="80" cy="30" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/> 
 
     <circle cx="50" cy="60" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/> 
 
     </g> 
 
    </svg> 
 
    </div> 
 
</div>

Bu, diğer eylemlerin hesap sürü içine alır çok daha büyük bir senaryonun parçasıdır

. İlgili ve hataya neden olan bitleri çıkardım. IE'de

yanlışlıkla 'Bul' hat sonuçları:

SCRIPT438: Object doesn't support property or method 'getElementsByClassName' 
jquery.min.js, line 2 character 6670 

'tıklandığında' sınıfıyla tüm unsurları aramak için daha iyi veya doğru yolu var mı? Bu arada, bunu stil elemanlarına kullanmıyorum, sadece işe yaradığı açıkça görülmemesi için yeşil stili ekledim.

Teşekkürler!

Answer 1

teşekkürler sana çözüm çalışırken buldum. Onun yerine: SVG nesnesi (https://github.com/jquery/sizzle/issues/322) içinde elemanları seçimi için

$('svg').find('.clicked').removeAttr("class"); 

kullanım

$('svg').find('[class=clicked]').removeAttr("class"); 

jQuery kullanmaz getElementsByClassName.

Answer 2

Sayfanın IE7 uyumluluk modunda yükleniyor olduğundan şüpheleniyorum.

getElementsByClassName, IE8 ve sonraki sürümlerin tüm IE sürümleri tarafından desteklenir; bu nedenle IE, tanımlanmadığını bildiriyorsa, IE7 veya daha erken çalıştırdığınız anlamına gelir. IE9 ve IE10 kullandığınızı söylediğinizden, bunun IE7 modunda olabileceğiniz anlamına geldiğini tahmin ediyorum.

IE7 Uyumluluk modu, IE7'de olmayan çeşitli özellikler için desteği kaldırın; bu nedenle, getElementsByClassName desteğini kaybettiniz. Ayrıca, elbette sisteminiz için oldukça kritik olan SVG için de desteğiniz olmayacak, ancak sorunun gerçekte gerçekleştiği yer burası değil.

Çözüm: IE'yi olası en iyi oluşturma modunu kullanacak şekilde zorlamak için <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> tag to your HTML `bölümünü ekleyin.

Answer 3

IE'de getElementsByClassName belgededir, ancak SVG Elements üzerinde kullanılamaz.

maddesini saptamak değildir jQuery hakkında ne: @Marlin için https://github.com/jquery/sizzle/issues/322