☰

使用元素 ID 生成 SVG

tag-icon • tag-icon dvisvgm
使用元素 ID 生成 SVG

我正在使用家谱树包。我打算将输出用于打印和交互式网页。

对于网页，我可以使用dvilualatex和生成 SVG dvisvgm，我可以显示它并向树中的名称添加点击处理程序以在页面中显示更多信息。

但是，SVG 中生成的文本元素非常稀疏，仅包含内部文本，并且都在文档中的同一级别，例如：

<text class='f2' transform='matrix(1 0 0 1 951.279 373.834)' x='-37.0118' y='-2.45512'>
    <tspan>N</tspan>
    <tspan x='-28.5655'>a</tspan>
    <tspan x='-23.9577'>m</tspan>
    <tspan x='-20.3533'>e</tspan>
</text>

我想以某种方式将每个人的数据库 ID 包含在此节点中。

我已经能够通过为每个人使用独特的颜色并对 SVG 进行后期处理以将其转换回相关 ID 来实现此结果，但这有点难以管理。

有没有更自然的方法来实现这一点？

一个最小示例文档：

\documentclass[9pt]{article}
\usepackage[all]{genealogytree}

\newcommand{\traditional}{
    \begin{minipage}[c][\gtrNodeMinHeight]{\gtrNodeMinWidth}
        \begin{center}
            \gtrBoxContent
        \end{center}
    \end{minipage}
}

\begin{document}
    \begin{tikzpicture}
        \genealogytree[node processor=\traditional]{
            child{
                g{Alice}
                p{Bob}
                c{Charlie}
            }
        }
    \end{tikzpicture}
\end{document}

运行完毕dvilualatex后dvisvgm生成 SVG。

答案1

建议使用dvisvgm特价商品允许一个非常优雅的解决方案，只需将每个节点包装在<g>带有所需属性的“原始”标签中即可。将其应用于上面的示例文档：

\documentclass[9pt]{article}
\usepackage[all]{genealogytree}

\newcommand{\traditional}{
    \begin{minipage}[c][\gtrNodeMinHeight]{\gtrNodeMinWidth}
        \begin{center}
            \gtrBoxContent
        \end{center}
    \end{minipage}
}

\begin{document}
    \begin{tikzpicture}
        \genealogytree[node processor=\traditional]{
            child{
                g{\special{dvisvgm:raw <g id='alice'>}Alice\special{dvisvgm:raw </g>}}
                p{\special{dvisvgm:raw <g id='bob'>}Bob\special{dvisvgm:raw </g>}}
                c{\special{dvisvgm:raw <g id='charlie'>}Charlie\special{dvisvgm:raw </g>}}
            }
        }
    \end{tikzpicture}
\end{document}

我确信这可以整理成宏。就我而言，我已经通过模板语言生成了乳胶文档，因此这种内联代码非常实用。

相关内容