SVG Element, HTML and JavaScript

Question

我正在创建一个 SVG 元素，但我想让它可点击并在点击时更改它的颜色

这是元素的代码

<svg version="1.1" x="0px" y="0px" width="960px"
 height="560px" viewBox="0 0 960 560" style="disable-background:new 0 0 960 560;" xml:space="preserve">
<g id="Layer_1">
      <rect x="95.675" y="35.61" class="st0" width="774.026" height="494.805"/>
  </g>
<g id="Layer_2">
      <circle class="st1" cx="254.766" cy="144.67" r="68.182"/>
      <circle class="st1" cx="474.571" cy="144.67" r="68.182"/>
      <circle class="st1" cx="685.766" cy="144.67" r="68.182"/>
      <ellipse class="st1" cx="474.571" cy="318.727" rx="167.695" ry="76.623"/>
      <circle class="st1" cx="324.748" cy="463.532" r="47.403"/>
      <circle class="st1" cx="477.565" cy="463.532" r="47.403"/>
      <circle class="st1" cx="624.395" cy="463.532" r="47.403"/>
  </g>
</svg>

Answer 1

例如：单击时更改元素的颜色：

$('#Layer_1').click( function() {
    $('#Layer_1').css({ fill: "blue" });
});

你可以从中建立你的想法。下面是一个工作示例：https://jsfiddle.net/ddan/bcLzp929/1/