![将 pgf/tikz 图形转换为 SVG 时指定 SVG 元素 ID](https://linux22.com/image/288814/%E5%B0%86%20pgf%2Ftikz%20%E5%9B%BE%E5%BD%A2%E8%BD%AC%E6%8D%A2%E4%B8%BA%20SVG%20%E6%97%B6%E6%8C%87%E5%AE%9A%20SVG%20%E5%85%83%E7%B4%A0%20ID.png)
我有一堆 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}