Перебирать заданный массив цветов для svg и текста mouseenter/mouseleave?

Нетривиальная задача

Тривиальная.

Добавляем элементам data-атрибуты, которые будут содержать индекс текущего цвета и имя css-свойства, которое соответствующий цвет будет получать в качестве значения:

<svg
  data-color-index="-1"
  data-color-attr="fill"
  ...

<span
  data-color-index="-1"
  data-color-attr="color"
  ...

По mouseenter делаем индексу +1, обновляем значение css-свойства; по mouseleave записываем в css-свойство пустую строку:

$('svg, span').mouseenter(function() {
  const colorIndex = (+this.dataset.colorIndex + 1) % colors.length;

  $(this).css(this.dataset.colorAttr, colors[colorIndex]);
  this.dataset.colorIndex = colorIndex;
}).mouseleave(function() {
  $(this).css(this.dataset.colorAttr, '');
});

Если элементы должны менять цвет одновременно, тогда отдельные data-атрибуты для индексов не нужны, достаточно одной общей переменной. А обработчики событий цепляем к родительскому элементу:

let index = -1;

$('.demo').mouseenter(function() {
  index = (index + 1) % colors.length;
  updateColor(this, colors[index]);
}).mouseleave(function() {
  updateColor(this, '');
});

function updateColor(el, color) {
  $('[data-color-attr]', el).each(function() {
    $(this).css(this.dataset.colorAttr, color);
  });
}