jQuery的改變SVG填充顏色兩次

Question

我正在嘗試使用jQuery更改SVG對象的顏色，但是此后，我想重置類st24中的所有fill屬性。 但是重置后setAttribute不起作用。

  //Автокомплит
    $(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');
                }
            }
      });
});
});

如果我嘗試這樣做：

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

工作完美-所有元素都具有此屬性，但是當我將setAttribute fill更改為none並添加此行時： svgElement.setAttribute("fill", "#008000"); 在這段代碼之后，它不起作用-為什么？

更新：這是我所有的代碼：

<!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>

Answer 1

將fill設置為none不會刪除填充。 有人說“這個元素沒有填充”。 因此，在<svg>父對象上設置fill不會覆蓋它。 孩子的價值至上。

如果要從兒童使用中刪除填充設置

val.removeAttribute('fill');

更新

嘗試這樣的事情：

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

更新2

看看這個小提琴。 希望它可以幫助解釋我的意思。

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

Answer 2

用這個

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

或這個

val.style.fill = "#000800"

Answer 3

我的SVG代碼：

        <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>

我使用類“ test”而不是“ st24”，並且現在一切正常！

jQuery的改變SVG填充顏色兩次

問題描述

3 個解決方案

解決方案1
1 2014-06-27 06:32:34

解決方案2
0 2014-06-27 06:33:15

解決方案3
0 2014-06-27 15:39:32

jQuery的改變SVG填充顏色兩次

問題描述

3 個解決方案

解決方案1 1 2014-06-27 06:32:34

解決方案2 0 2014-06-27 06:33:15

解決方案3 0 2014-06-27 15:39:32

解決方案1
1 2014-06-27 06:32:34

解決方案2
0 2014-06-27 06:33:15

解決方案3
0 2014-06-27 15:39:32