如何使用html创建智能图?

时间:2017-01-20 12:28:34

标签: html svg latex converter tikz

我设计了一个智能图表,帮助人们了解使用乳胶的注册过程。

源代码如下。

 \documentclass[landscape,a4paper]{standalone}


\usepackage{amsmath,graphicx,amsthm,amssymb}
\usepackage{tikz}
\usetikzlibrary{arrows,shapes,positioning}


\begin{document}


\begin{tikzpicture}[head node/.style = {shape          = rectangle,
                                         rounded corners,
                                         fill           = blue!50!black,
                                         minimum width  = 3cm,
                                         minimum height = 1.5cm,
                                         align          = center,
                                         text           = white},
                   blue edge/.style  = { ->,
                                         ultra thick,
                                         blue!40!black,
                                         shorten >= 4pt}]

% the nodes : possible  \newcommand*\dx{5} \newcommand*\dy{2}
\node[head node](wish) at (0,0) {\textbf{Wish to attend the conference?}};
\node[head node,above right =4cm of wish](register1) {Register};
\node[head node,below right  =4cm of wish, minimum width=8cm](register2) {Register};
\node[head node,right =1cm of register1](abstract) {Submit the Abstract};
\node[head node,  right =13cm of wish ](payment) {Payment};

\node[align=center,color=blue!50!black,right =3cm of payment](attend) {\bfseries\Huge  ICLAA 2017 \\ {} \\ \Large  Welcomes you!!   };

\node[right = .1cm of attend] {\includegraphics[scale=.07]{manipal}};



% edges 
\draw[blue edge]  (wish.east) -- node [pos=0.5,sloped,above,align=center] {Presenting a paper\\ /Poster/Invited Speaker} (register1.west); 

\draw[blue edge]  (wish.east) -- node [pos=0.5,sloped,above,align=center] {Presenting a paper\\ /Poster/Invited Speaker} (register1.west); 
\draw[blue edge]  (register1.east) -- node [pos=0.5,sloped,above,align=center] {} (abstract.west); 
\draw[blue edge]  (wish.east) -- node [pos=0.5,sloped,above,align=center] {Participant only} (register2.west);     
\draw[blue edge]  (abstract.east) -- node [pos=0.5,sloped,above,align=center] {Participant only} (payment.west);          
\draw[blue edge]  (register2.east) -- node [pos=0.5,sloped,above,align=center] {Participant only} (payment.west);       
\draw[blue edge]  (payment.east) -- node [pos=0.5,sloped,above,align=center] {   \includegraphics[scale=.1,angle=20]{flight} } (attend.west);        
\end{tikzpicture}

\end{document}

输出是, enter image description here

现在我想把这个图像上传为动态图像(我不知道这是正确的用词!!!)在网站上应该有每个链接 必要时标签。

完成的工作:

  1. 我使用htlatex将latex文档转换为html。但它转换成svg,我在图像中有一个问题(就像那场战斗,大学照片)。不惜一切代价?在这种情况下失败。
  2. 我已将jpg文件上传到网页上,该文件是在linux中将pdf转换为jpg时生成的,但这并不是很好。
  3. 我的问题:

    1. 有没有办法在html中生成完整的图表?如果是这样,请提供代码。
    2. 有没有办法将这个乳胶输出转换为html,我可以在任何地方添加链接?
    3. 感谢您的帮助!!!

0 个答案:

没有答案