如何在悬停状态下巧妙地更改多个svg颜色

<svg class="svg-icon" viewBox="0 0 24 24">
  <path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>
<svg class="svg-icon" viewBox="0 0 24 24">
  <path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>

.svg-icon {
  fill: #000; /* 初始颜色 */
}

.svg-icon:hover {
  fill: #ff0000; /* 悬停状态下的颜色 */
}

<svg id="svg1" viewBox="0 0 24 24">
  <path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>
<svg id="svg2" viewBox="0 0 24 24">
  <path d="M12 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>

$(document).ready(function() {
  $('#svg1').hover(function() {
    $(this).find('path').css('fill', '#ff0000'); /* 悬停状态下的颜色 */
  }, function() {
    $(this).find('path').css('fill', '#000'); /* 恢复初始颜色 */
  });
  
  $('#svg2').hover(function() {
    $(this).find('path').css('fill', '#00ff00'); /* 悬停状态下的颜色 */
  }, function() {
    $(this).find('path').css('fill', '#000'); /* 恢复初始颜色 */
  });
});