CODEWITHSUNDEEP
javascriptjquerysvgcolorsfill
nmishin
nmishin

Reputation: 3064

jquery change svg fill color twice

I'm trying to change the color of an SVG object with a jQuery, but after that i want to reset all fill attribute in class st24. But 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 i try this:

          $.each(st24, function( i, val) {
            val.setAttribute("fill", "#008000");
          });

work perfect - all elements have this attribute, but when i change setAttribute fill to none, and add this line: svgElement.setAttribute("fill", "#008000"); after this code, it doesn't work - why ?

Update: This all my 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>

Upvotes: 0

Views: 2206

Answers (3)

nmishin
nmishin

Reputation: 3064

My SVG code:

        <g id="505Б-1" place="place" v:mID="1937" v:groupContext="shape" transform="translate(206.929,-334.488)" class="test">
        <title>Circle, ellipse.1937</title>
        <v:userDefs>
            <v:ud v:nameU="visVersion" v:val="VT0(14):26"/>
        </v:userDefs>
        <path transform="" d="M0 837.64 A4.25197 4.25197 0 0 1 8.5 837.64 A4.25197 4.25197 0 1 1 0 837.64 Z" class="st24"/>
    </g>

I use class "test" instead "st24", and everything works now!

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101938

Setting fill to none doesn't delete the fill. It is saying "this element has no fill". So setting fill on the <svg> parent doesn't override that. The value on the child takes precendence.

If you want to remove the fill setting from the children use

val.removeAttribute('fill');

Update

Try something like this:

if (svgElement) {
  var st24 = svgdom.getElementsByClassName("st24");
  $.each(st24, function( i, val) {
    val.removeAttribute("fill");
  });
  svgElement.setAttribute("fill", "#008000");
} else ...

Update 2

Have a look at this fiddle. Hopefully it should help explain what I mean.

http://jsfiddle.net/gt7nd/1/

Upvotes: 1

Pratik Parekh
Pratik Parekh

Reputation: 447

Use this 

$(val).css('fill',"#008000");

or this 

val.style.fill = "#000800"

Upvotes: 0

Related Questions