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不会删除填充。它说“这个元素没有填充”。因此，在fill父级上设置<svg>不会覆盖它。孩子的价值优先。

如果您想从儿童中删除填充设置，请使用

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 个答案: