javascript - 如何使用 jQuery 动态更改 SVG 圆圈填充颜色的颜色

Question

我想动态更改 SVG 元素的圆圈颜色。如何根据从AJAX调用响应中获取的值动态改变圆圈的颜色？

HTML:

<tr>
  <td style="width: 33.3333%; text-align: center;">
    <svg height="100" width="100">
      <circle id="parking_slot" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
    </svg>
  </td>
</tr>

JavaScript:

$(document).ready(function() {
  $.ajax({
    url: 'url',
    type: 'GET',
    data: {
      format: 'json'
    },
    success: function(response) {
      if (response.field1 < 50) {
        $("#field1").text("car is parked");
        $("#parking_slot").fill("red");
      } else {
        $("#field1").text("car is not parked");
        $("#parking_slot").fill("green");
      }
    },
    error: function() {
      $('#errors').text("There was an error processing your request. Please try again.");
    }
  });
});

Answer 1

像这样使用:

$("#parking_slot").css("background-color", "red");