☰

将 pgf/tikz 图形转换为 SVG 时指定 SVG 元素 ID

tag-icon • tag-icon tikz-pgf svg
将 pgf/tikz 图形转换为 SVG 时指定 SVG 元素 ID

我有一堆 tikz 图形，我想将其转换为 svg 以包含在网页中。我可以成功地dvisvgm将这些图形转换为 svg。我注意到在生成的 svg 中，一些路径和一些组有 id，通常以表格等形式显示g0-79，但并非所有元素都有 id。

我想使用 javascript 操作网页上生成的 svg，执行诸如隐藏或显示元素等操作。要做到这一点，元素必须有一个 id。

我正在寻找一种方法，理想情况下，为原始 tikz 图中路径或组指定一个 svg id，所以我可以写类似这样的内容：

\begin{tikzfigure}
   % some tikz code here
   \draw[thick,->,svgid=some_awesome_path] (0,0) - ...
   %some more tikz code
   \begin{scope}[svgid = some_awesome_group]
       %some code that should be in a svg group with the above id
   \end{scope}
   %some mode tikz code
\end{tikzpicture}

并且生成的 svg 组和路径将具有给定的 id。

编辑： 我现在有一个可行的解决方案，您可以在下面的答案中找到它。但是，我想看看还能做些什么：为路径、节点、装饰……提供自己的 svg id、类和其他属性……

将 beamer 标签（例如 <2->）翻译成 Reveal.js 片段，...

我想看看人们能想出什么。

答案1

根据保罗的建议，我可以做以下事情，这似乎可以满足我目前的需求：

定义一个接受一个参数的新环境svggroup，该参数是组 ID：

\newenvironment{svggroup}[1]
    {\special{dvisvgm:raw <g id="#1">}}
    {\special{dvisvgm:raw </g>}}

然后我可以像这样使用它：

\begin{tikzpicture}
   \draw[thick] (0,0) -- (2,2); 
   \node[color=blue] at (1,1) {$x^2 - 2x + 1$};
   \begin{svggroup}{blah}
       \draw[red] (0,0) rectangle (2,2);
       \node[color=green] at (1,.2) {$x^2 - 2x + 1$};
   \end{svggroup}
\end{tikzpicture}

这会将红色矩形和绿色文本放入其自己的 svg 组中，其 id 为“blah”。通过从 javascript 设置此组的“display”属性，我可以在网页上显示或隐藏它。

TikZ 集成

新svgid范围样式的定义：

\tikzset{
  svgid/.style={
    execute at begin scope={\special{dvisvgm:raw <g id="#1">}},
    execute at end scope={\special{dvisvgm:raw </g>}},
  }
}

使用示例：

\begin{tikzpicture}
   \draw[thick] (0,0) -- (2,2); 
   \node[color=blue] at (1,1) {$x^2 - 2x + 1$};
   \begin{scope}[svgid=blah]
       \draw[red] (0,0) rectangle (2,2);
       \node[color=green] at (1,.2) {$x^2 - 2x + 1$};
   \end{scope}
\end{tikzpicture}

相关内容