☰

使用元素 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}

我確信這可以整理成一個巨集。就我而言，我已經透過模板語言產生乳膠文檔，因此這種內聯程式碼非常實用。

相關內容