0xD34F

Прописать в стилях дефолтное значение свойства fill:

.spoiler__button path {
  transition: fill .7s ease-in-out;
+ fill: #ECECEC;
}

const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

Так, NS, хорошо.

const pathEl = document.createElement('path');

Плохо.

Определяете максимальное расстояние от курсора, на котором элементы должны начинать движение. По событию mousemove на родителе считаете расстояния до элементов (теорема Пифагора), тем, кто достаточно близко, задаёте translate. Чтобы смена положения была плавной, в стилях определяете transition для translate'а.

https://jsfiddle.net/w6jf480k/1/

svgElem.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', '0 0 50 50')

Или пусть создание элемента выглядит так:

document.createElementNS('http://www.w3.org/2000/svg', 'svg')

идентичны

Уверены? - l и 1 совсем не одно и то же.

Ну и конечно, само по себе то, что вы пытаетесь делать - ерунда какая-то, сами посмотрите (снизу - исправленный вариант).

Вместо .text((d, i) => { ... пусть будет

.each((d, i, a) => {
  const el = d3.select(a[i]);
  const max = this.lineData[i];
  let value = 0;

  const intervalId = setInterval(() => {
    if (++value == max) {
      clearInterval(intervalId);
    }

    el.text(value);
  }, 500 / max);
});

нет

<circle cx="50%" cy="50%"

как лучше реализовать функционал, чтобы иконка была одна, а в нужных компонентах мы докидывали цвет?

сделать соответствующий параметр

img.onload = () => canvas.getContext('2d').drawImage(img, 0, 0);

Синусы, косинусы, перевод из градусов в радианы. Например.

например

UPD. Используем элемент path, есть внешний контур, покрывающий весь svg, и множество внутренних - для вырезания дырок. Чтобы дырки вырезались, их надо рисовать в направлении, обратном тому, в котором рисовалась основная фигура. То есть, контур рисуется против часовой стрелки:

rectPath = `M0 0 v${vert} h${horz} v${-vert} h${-horz}`

От (0, 0) сначала движемся вниз (v - вертикальное смещение), затем вправо (h - горизонтальное), далее вверх, и наконец обратно горизонтально (вернулись в (0, 0)).

А дырки по часовой стрелке:

cellPath = ([ x, y ]) => `M${offset(x)} ${offset(y)} h${side} v${side} h${-side} v${-side}`

Сначала смещаемся в горизонтальном направлении вправо, затем вниз, потом обратно влево, и обратно вверх.

Допустимо ли использовать defs внутри symbol в SVG-элементе?

Да.

А тег style?

Да.

Где можно почитать о таких нюансах?

https://www.w3.org/TR/SVG11/struct.html#SymbolElement

держите

Можно сделать через css, с использование image-mask, как-то так.

Или svg - ну, тоже маску используем. Например.

Не получается обратиться к элементу по его id.

А как вы это делаете? Вдруг неправильно? Почему не показали?

Просто по id (или с помощью любого другого селектора) обращаться нельзя, у внешних SVG отдельное DOM-дерево, оно доступно через свойство contentDocument соответствующего object'а, т.е.:

const svgDocument = document.querySelector('object').contentDocument;
const element = svgDocument.querySelector('здесь указываете нужный id или что там вам надо');

Группируем анимируемые элементы, через set управляем свойством visibility, анимацию запускаем по окончанию действия set'а. Типа так.

погуглил за вас

например (поскольку свой svg вы решили не показывать, взял первый нагугленный)