☰

要素IDを使用してSVGを生成する

tag-icon • tag-icon dvisvgm
要素IDを使用してSVGを生成する

私は家系図を作成しています系図パッケージ。出力は印刷とインタラクティブな Web ページの両方に使用するつもりです。

Web ページの場合、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>必要な属性を持つ「raw」タグでラップするだけです。これを上記のサンプルドキュメントに適用すると、次のようになります。

\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}

これをマクロにまとめることもできると思います。私の場合は、すでにテンプレート言語を使用して LaTeX ドキュメントを生成しているので、このようなインライン コードは非常に実用的です。

関連情報