Use Moderncv with numeric index for bibliographies

How to show Tikz figures on the webpage (html)

Author posted @ 2014年6月17日 19:40 in LaTeX with tags latex html5 , 2426 阅读

Consider the fact that I have used Tikz (Tex) to finished drawing some nice graphs. In another words, I have some source files in .tex format. The question is, how do I show these diagrams drawn using Tikz on the html file?

The tex source code for above figure is below, save it as the file fig.tex

\documentclass{article} 
\def\pgfsysdriver{pgfsys-tex4ht.def} 
%There is specialized output driver for use with tex4ht in Tikz. Using it, diagrams are saved in SVG.
\usepackage{tikz} 
\usepackage{pgf} 
\usetikzlibrary{automata} 
\usetikzlibrary{positioning,chains,fit,shapes,calc} 
\usetikzlibrary{arrows,shadows,trees} 
\begin{document} 
\begin{tikzpicture}[->,>=stealth',shorten >=5pt,auto,node distance=1cm] 
\tikzstyle{every state}=[fill=purple, draw=none, text=white] 
\node[state, scale=0.6] (A) at (0,0) {$0$}; 
\node[state, scale=0.6, fill=violet] (B) at (3,0) {$1$}; 
\path (A) edge [bend left=10] node {\scriptsize{Tr(0, 40)}} (B) 
      (A) edge [bend left=45] node {\scriptsize{Tr(-35,-20)}} (B) 
      (A) edge [bend left=90] node {\scriptsize{Tr(35,-20)}} (B) 
      (B) edge [bend left=10] node {\scriptsize{Tr(-40,0)}} (A) 
      (B) edge [bend left=45] node {\scriptsize{Tr(35,20)}} (A) 
      (B) edge [bend left=90] node {\scriptsize{Tr(-35,20)}} (A); 
\end{tikzpicture} 
\end{document}

The answer is using

htlatex fig.tex 

to compile the source tex file. Then I got a fig.html, fig.css and fig-1.svg file in current folder. So I can read the source of the fig.html file and cut the useful chunck of codes for me to insert to my target html file.

<meta name="generator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)"> 
<meta name="originator" content="TeX4ht (http://www.cse.ohio-state.edu/~gurari/TeX4ht/)"> 
<!-- html --> 
<meta name="src" content="fig.tex"> 
<link rel="stylesheet" type="text/css" href="fig.css"> 

</head>
<body>

<object data="fig-1.svg" width="134" height="124" type="image/svg+xml"></object>

References:

Tex4ht: http://www.tug.org/applications/tex4ht/mn.html

http://tex.stackexchange.com/questions/35145/maintaining-layout-of-tikz-diagrams-with-tex4ht-converting-as-single-pictures

 

Avatar_small
h2cker 说:
2014年6月23日 09:54

他这个如何绑独立域名 ?


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter