javascript - 如何使用 JS 中的转换自动对齐 SVG "g"元素？

Question

我在 Node.JS 中制作了一个简单的 Logo 生成器，以渲染由图标和文本字符串组成的 SVG Logo 。输出只是一个包含渲染图标和文本的 SVG 字符串，包含在两个单独的 <g> 中。标签。

我正在尝试使用 SVG 变换矩阵来更改结果的布局，例如将图标移动到文本上或将其移动到右侧，但我找不到工具(npm 包？vanilla js？)来执行此操作。

这是我试图实现的转换的示例:

有解决办法吗？提前致谢!

Answer 1

您还没有显示任何代码？我是一名前端开发人员，目前使用 D3 和 SVG。

您考虑过使用D3吗？

它会是这样的:

您可以使用 .data('this.nodes') 选择所有图像元素，或者以您希望的方式对它们进行分组，然后向每个元素附加一个段落，并将该段落与该 Logo 对齐。 (您必须将名称更改为您特别需要的名称，但这可以解决问题，只需查看 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)`
      });
  }

简单来说，您的 Logo 都存储在“this.nodes”中，并使用 .data 进行调用，然后您在每个 Logo 上创建一个“foreignobject”，它允许您分配一个段落并将其与其对齐，这将为每个 Logo 自动执行。这假设您实际上已经将 Logo 放置在 Canvas 上的某个位置。

您还可以使用 .text 代替 .html。

我使用了另一种方法，即使用表格并将文本分配给每个表格数据，并与 Logo 对齐(如果您需要进一步的帮助)，但这两种方法都有效。