javascript - jquery change svg fill color twice -
i'm trying change color of svg object jquery, after want reset fill attribute in class st24. after reset setattribute doesn't work.
//Автокомплит $(function() { $( "#users" ).autocomplete({ source: function( request, response ) { $.ajax({ cache: true, url: "http://127.0.0.1/json.php", datatype: "json", success: function(data) { response($.map(data, function(item){ return { label: item.username, placeid: item.locationinfo.placeid, }})); } }); }, minlength: 2, select: function(event,ui) { $('#users').val(ui.item.username); $('#placeid').val(ui.item.placeid); console.log(ui.item.placeid); console.log(svgdom); var svgelement = svgdom.getelementbyid(ui.item.placeid); //Если id елемента есть в svg файле - меняем аттрибур fill, если нет генерируем алерт if (svgelement) { var st24 = svgdom.getelementsbyclassname("st24"); $.each(st24, function( i, val) { val.setattribute("fill", "none"); }); svgelement.setattribute("fill", "#008000"); } else { generate('information'); } } }); }); }); if try this:
$.each(st24, function( i, val) { val.setattribute("fill", "#008000"); }); work perfect - elements have attribute, when change setattribute fill none, , add line: svgelement.setattribute("fill", "#008000"); after code, doesn't work - why ?
update: code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script src="libs/jquery-2.1.1.min.js"></script> <script src="libs/jquery-ui-1.10.4.js" type="text/javascript"></script> <script src="libs/jquery.panzoom.js"></script> <script src="libs/jquery.mousewheel.js"></script> <script src="libs/noty/packaged/jquery.noty.packaged.min.js" type="text/javascript"></script> <script src="libs/svg-pan-zoom.min.js"></script> <link href="css/style.css" rel="stylesheet"> <link type="text/css" href="css/jquery-ui-1.10.4.custom.css" rel="stylesheet" /> </head> <body> <a id="link" href="admin.html">admin</a> <div class="ui-widget"> <label for="users">users: </label> <input id="users" type="text" /> <input readonly="readonly" id="placeid" name="placeid" /> </div> <embed src="svg/5.svg" width="900" height="900" id="imap"/> <script> //Всплывающие сообщения function generate(type) { var n = noty({ text : "sorry place not found", type : type, dismissqueue: true, layout : 'topcenter', theme : 'defaulttheme', timeout: 2000, }); } function generateinf() { generate('information'); } // Начинаем работу когда страница полностью загружена (включая графику) $(window).load(function () { // Получаем доступ к svg dom var svgdom = document.getelementbyid('imap').getsvgdocument(); svgpanzoom('#imap', { zoomenabled: true, controliconsenabled: true }); function clearsvg() { var st24 = svgdom.getelementsbyclassname("st24"); $.each(st24, function(i, val) { val.removeattribute("fill"); }); } function setcolor(elem) { elem.setattribute("fill", "#008000"); } //Автокомплит $(function() { $( "#users" ).autocomplete({ source: function( request, response ) { $.ajax({ cache: true, url: "http://127.0.0.1/json.php", datatype: "json", success: function(data) { response($.map(data, function(item){ return { label: item.username, placeid: item.locationinfo.placeid, }})); } }); }, minlength: 2, select: function(event,ui) { $('#users').val(ui.item.username); $('#placeid').val(ui.item.placeid); console.log(ui.item.placeid); console.log(svgdom); var svgelement = svgdom.getelementbyid(ui.item.placeid); //Если id елемента есть в svg файле - меняем аттрибур fill, если нет генерируем алерт if (svgelement) { clearsvg(); setcolor(svgelement); } else { generate('information'); } } }); }); }); </script> </body> </html>
setting fill none doesn't delete fill. saying "this element has no fill". setting fill on <svg> parent doesn't override that. value on child takes precendence.
if want remove fill setting children use
val.removeattribute('fill'); update
try this:
if (svgelement) { var st24 = svgdom.getelementsbyclassname("st24"); $.each(st24, function( i, val) { val.removeattribute("fill"); }); svgelement.setattribute("fill", "#008000"); } else ... update 2
have @ fiddle. should explain mean.
Comments
Post a Comment