Как автоматизировать выравнивание SVG "g" элементов с помощью преобразования в JS?

Question

Я сделал простой конструктор логотипов в Node.JS для рендеринга логотипов SVG, состоящих из иконки и текстовой строки. Вывод - это просто строка SVG, содержащая визуализированный значок и текст, обернутые в два отдельных тега <g>.

Я пытаюсь использовать SVG-матрицу преобразования, чтобы изменить формат результата, например, чтобы переместить значок над текстом или переместить его вправо, но я не могу найти инструмент (пакет npm? Vanilla) JS?), чтобы сделать это.

Вот пример преобразования, которого я пытаюсь достичь:

Есть ли решения для этого? Заранее спасибо!

Answer 1

Вы не показали свой код? Я разработчик внешнего интерфейса, и в настоящее время я использую D3 и SVG.

Думали ли вы об использовании D3?

Было бы что-то вроде этого:

Вы используете .data ('this.nodes'), чтобы выбрать все элементы изображения или, как вы хотите, сгруппировать их, а затем добавить абзац к каждому и просто выровнять абзац с этим логотипом. (вам придется изменить имена на те, которые вам конкретно нужны, но это поможет, просто посмотрите, как работает d3 и выбор. https://github.com/d3/d3-selection

  addText(): void {
    this.group
      .selectAll('foreignObject')
      .data(this.nodes, node => node)
      .enter()
      .append('foreignObject')
      .attr('class', 'Engagement-GraphNodeLabel')
      .attr('x', 0) // around here you align the text to the current picture
      .attr('y', 0) // around here you align the text to the current picture
      .attr('width', node => this.labelWidth)  //whatever you want
      .attr('height', node => this.nodeHeight(node)) //whatever you want
      .append('xhtml:div')
      .html(node => {

        if (node) {
        return `<p>${node.name}</p>`; //whatever names you want for them (store them `in array format)`
      });
  }

Короче говоря, все ваши логотипы хранятся в 'this.nodes' и вызываются с использованием .data, затем вы создаете 'Foreignobject' для каждого из них, который позволяет вам назначить абзац и выровнять его по это, и это автоматизирует это для каждого. Это предполагает, что вы уже поместили логотипы на холст где-то уже.

Вы также можете использовать .text вместо .html.

Существует другой метод, который я использовал, когда я использовал таблицу и назначал текст для каждой таблицы данных, выравнивая с логотипами, если вам нужна дополнительная помощь, но оба работают.