Utilizzo di jQuery find per il targeting di elementi SVG non riesce in IE solo

Question

Sto impostando e rimuovendo una classe su un elemento 'circle' all'interno di un blocco SVG con jQuery. Funziona in tutti i browser recenti che ho provato ma genera un errore in IE (9 & 10, probabilmente tutti).

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>

Questo è parte di uno script molto più grande che tiene conto un sacco di altre azioni. Ho eliminato i bit rilevanti e che inducono gli errori.

In IE, 'Trova' Risultati di linea l'errore:

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

C'è un modo per cercare tutti gli elementi con la classe 'cliccato' meglio o corretto? A proposito, non sto usando questo per gli elementi di stile, ho solo aggiunto lo stile verde per rendere evidente che ha funzionato o meno.

Grazie!

Answer 1

Grazie a @Marlin ho trovato soluzione di lavoro per voi. Anziché:

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

uso

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

jQuery non userà getElementsByClassName per la selezione elementi all'interno dell'oggetto SVG (https://github.com/jquery/sizzle/issues/322).

Answer 2

Sospetto che la pagina si sta caricando in modalità compatibilità IE7.

getElementsByClassName è supportato da tutte le versioni di IE da IE8 e versioni successive, quindi se IE si lamenta che non è definito, significa che si sta eseguendo IE7 o versioni precedenti. Dal momento che dici di utilizzare IE9 e IE10, suppongo che questo significhi che potresti trovarti in modalità IE7.

IE7 La modalità di compatibilità rimuove il supporto per varie funzionalità che non erano presenti in IE7, quindi il supporto verrà perso getElementsByClassName. Inoltre non avrai il supporto per SVG, che ovviamente è abbastanza critico per il tuo sistema, ma non è questo il vero problema.

Soluzione: aggiungere la sezione <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> tag to your HTML `per forzare IE ad utilizzare la migliore modalità di rendering possibile.

Answer 3

In IE getElementsByClassName è disponibile nel documento, ma non in SVG Elements.

Che dire di jQuery non risolverà clausola: https://github.com/jquery/sizzle/issues/322