animate 包是否与 htlatex 兼容

Question 1

编辑：这里是最终的动画。

这并不容易。我甚至无法在我的计算机上显示您的 PDF 动画，因为animate该软件包使用了一些 JavaScript 的 PDF 技巧，而大多数 PDF 阅读器（Acrobat Reader 和其他一些阅读器除外）都不支持这种技巧。

无论如何，需要完成两个不同的任务：第一是将动画步骤导出为单独的图像，第二是在 HTML 页面上制作动画。今天我只会讨论第一个任务，稍后我会讨论第二个任务。

那么，要将动画步骤转换为图像，需要做什么呢？首先，我们应该修复编译错误。错误来源有两个。第一个是 tex4ht 的 TikZ 输出驱动程序，第二个是pdfbase所需的包animated，它重新定义了 tex4ht 也使用的某些内部 LaTeX 命令。

为了修复 TikZ 问题，我们可以使用替代驱动程序，该驱动程序使用命令dvisvgm转换为 SVG 格式，这对于 Web 上的矢量图形来说是理想的。将以下文件另存为pgfsys-tex4ht.def：

% Copyright 2006 by Till Tantau
%
% This file may be distributed and/or modified
%
% 1. under the LaTeX Project Public License and/or
% 2. under the GNU Public License.
%
% See the file doc/generic/pgf/licenses/LICENSE for more details.

\ProvidesFileRCS $Header: /cvsroot/pgf/pgf/generic/pgf/systemlayer/pgfsys-tex4ht.def,v 1.25 2013/08/06 17:46:08 tantau Exp $



% Driver commands for tex4ht

%
% Load common pdf commands:
%
  %\input pgfsys-dvisvgm.def
  \input pgfsys-dvips.def

%
% tex4ht-specific stuff:
%

\newcount\pgf@sys@svg@picnum

% configure the output picture format to svg
\AtBeginDocument{
  \Configure{Picture}{.svg}
}


% Make the code inserted by tex4ht configurable

\NewConfigure{tikzpicture}{2}
\Configure{tikzpicture}{%
  % \ifvmode\IgnorePar\fi\EndP%\HtmlParOff
  \Picture*{}
}{\EndPicture}

\let\orig@pgfsys@begin\pgfsys@beginpicture
\let\orig@pgfsys@end\pgfsys@endpicture
\def\pgf@sys@postscript@header#1{{\special{! #1}}}
\def\pgfsys@beginpicture{%
  \bgroup
  \csname a:tikzpicture\endcsname
  \pgf@sys@postscript@header{
    /pgfsc{}bind def% stroke color is empty by default
    /pgffc{}bind def% fill color is empty by default
    /pgfstr{stroke}bind def%
    /pgffill{fill}bind def%
    /pgfeofill{eofill}bind def%
    /pgfe{a dup 0 rlineto exch 0 exch rlineto neg 0 rlineto closepath}bind def% rectangle
    /pgfw{setlinewidth}bind def% setlinewidth
    /pgfs{save pgfpd 72 Resolution div 72 VResolution div neg scale 
      magscale{1 DVImag div dup scale}if 
      pgfx neg pgfy neg translate pgffoa .setopacityalpha}bind def% save
    /pgfr{pgfsd restore}bind def %restore
    userdict begin%
    /pgfo{pgfsd /pgfx currentpoint /pgfy exch def def @beginspecial}bind def %open
    /pgfc{newpath @endspecial pgfpd}bind def %close
    /pgfsd{globaldict /pgfdelta /delta where {pop delta} {0} ifelse put}bind def% save delta
    /pgfpd{/delta globaldict /pgfdelta get def}bind def % put delta
    /.setopacityalpha where {pop} {/.setopacityalpha{pop}def} ifelse % install .setopacityalpha 
    /.pgfsetfillopacityalpha{/pgffoa exch def
      /pgffill{gsave pgffoa .setopacityalpha fill 1 .setopacityalpha newpath fill grestore newpath}bind def
      /pgfeofill{gsave pgffoa .setopacityalpha eofill 1 .setopacityalpha newpath eofill grestore newpath}bind def}bind def
    /.pgfsetstrokeopacityalpha{/pgfsoa exch def /pgfstr{gsave pgfsoa .setopacityalpha stroke grestore newpath}bind def}bind def
    /pgffoa 1 def
    /pgfsoa 1 def
    end
  }%
  \orig@pgfsys@begin%
}%


\def\pgfsys@endpicture{%
  % Save the bounding box
  %\printdim%
  \orig@pgfsys@end%
  \csname b:tikzpicture\endcsname%
  \egroup
  \par% FIXME : was '\Par' but that seems to be undefined!?
}%


\endinput


%%% Local Variables: 
%%% mode: latex
%%% End:

pdfbase可以使用文件修复该问题usepackage.4ht：

% usepackage.4ht (2017-10-21-16:16), generated from tex4ht-4ht.tex
% Copyright 2003-2009 Eitan M. Gurari
% Copyright 2009-2017 TeX Users Group
%
% This work may be distributed and/or modified under the
% conditions of the LaTeX Project Public License, either
% version 1.3c of this license or (at your option) any
% later version. The latest version of this license is in
%   http://www.latex-project.org/lppl.txt
% and version 1.3c or later is part of all distributions
% of LaTeX version 2005/12/01 or later.
%
% This work has the LPPL maintenance status "maintained".
%
% The Current Maintainer of this work
% is the TeX4ht Project <http://tug.org/tex4ht>.
%
% If you modify this program, changing the
% version identification would be appreciated.
   \def\:temp{tex4ht}\ifx \:temp\@currname
   \:warning{\string\usepackage{tex4ht} again?}
   \def\:temp#1htex4ht.def,tex4ht.sty#2!*?: {\def\:temp{#2}}
\expandafter\:temp \@filelist htex4ht.def,tex4ht.sty!*?: %
\ifx \:temp\empty  \else
   \:warning{if
    \string\RequirePackage[tex4ht]{hyperref} or
    \string\usepackage[tex4ht]{hyperref} was
    used try instead, repectively,
    \string\RequirePackage{hyperref} or
    \string\usepackage{hyperref}}
\fi

\fi
\gdef\a:usepackage{\use:package xr,xr-hyper,savetrees,biblatex,xeCJK,fontspec,tikz,pdfbase,,!*?: }
\gdef\use:package#1,{%
   \if :#1:\def\:temp##1!*?: {}\else
      \def\:temp{#1}\ifx \@currname\:temp
             \def\:temp##1!*?: {\input usepackage.4ht  }%
      \else \let\:temp=\use:package \fi
   \fi \:temp}
\def\:temp{xr}\ifx \@currname\:temp
   \AtEndOfPackage{\let\XR:\XR@
   \def\XR@[#1]#2{%
    \Configure{AtBeginDocument}{\XR:[#1]{#2}}{}}%
}

\fi
\def\:temp{xr-hyper}\ifx \@currname\:temp
   \def\eat:optional[#1]{}
\AtEndOfPackage{\let\XR:\XR@
   \def\XR@[#1]#2{%
     \Configure{AtBeginDocument}{\XR:[#1]{#2}}{}\@ifnextchar[\eat:optional{}}%
}

\fi
\def\:temp{savetrees}\ifx \@currname\:temp
\:dontusepackage{savetrees}
\fi
\def\:temp{biblatex}\ifx \@currname\:temp
\AtEndOfPackage{%
  \def\blx@mknoautolang{%
    \blx@lbxinput{\blx@languagename}%
    {}{}%
  }%
}
\fi
\def\:temp{xeCJK}\ifx \@currname\:temp
\:dontusepackage{xeCJK}
\AtEndOfPackage{%
  \RequirePackage{fontspec}
}
\DeclareDocumentCommand\setCJKmainfont{o m o}{}
\let\setCJKsansfont\setCJKmainfont
\let\setCJKmonofont\setCJKmainfont

\DeclareDocumentCommand\setCJKfamilyfont {m o m }{}
\DeclareDocumentCommand\newCJKfontfamily {o m o m}{\expandafter\gdef\csname #2\endcsname{\relax}}

\DeclareDocumentCommand\xeCJKsetup{m}{}
% }
\AtBeginDocument{%
  \xeuniuseblock{CJK}
}
\fi
\def\:temp{fontspec}\ifx \@currname\:temp
  \ifdefined\fontspec
    \:dontusepackage{fontspec}
  \else
    \input usepackage-fontspec.4ht
  \fi
\fi
\def\:temp{tikz}\ifx \@currname\:temp
\AtEndOfPackage{%
\let\use:tikzlibrary\usetikzlibrary
\def\find:externalize#1external#2\@nil{%
\if\relax#2\relax\else
  \let\tikz:externalize\tikzexternalize
  \renewcommand\tikzexternalize[1][]{\tikz:externalize[##1,mode=only graphics]}
    \tikzset{%
      tex4ht inc/.style={%
        /pgf/images/include external/.code={%
          \includegraphics[]{####1.pdf}%
        }%
      }
    }
    \tikzset{tex4ht inc}
  \fi
}
\renewcommand\usetikzlibrary[1]{%
  \use:tikzlibrary{#1}%
  \find:externalize#1external\@nil%
}
}
\fi

\def\:temp{pdfbase}\ifx\@currname\:temp
\AtEndOfPackage{%
\let\old:outputpage\@outputpage
\def\@outputpage{\old:outputpage{}}
}
\fi

\endinput

将两个文件都放在 TeX 文件的目录中。

我们还需要一些包的配置文件animate，以请求图像转换的步骤。文件animate.4ht：

\NewConfigure{animinline}{2}
\let\:anim:xinline\@anim@xinline
\def\@anim@xinline#1#2#3#4{\a:animinline\:anim:xinline{#1}{#2}{#3}{#4}\b:animinline}

\Hinput{animate}

此配置重新定义了用于渲染步骤的代码，并插入了两个可配置的钩子。我们可以配置这些钩子以将包含的内容渲染为图像。这些配置可以在配置文件中完成myconfig.cfg：

\Preamble{xhtml,html5,svg}
\Configure{animinline}{\Picture+{}}{\EndPicture}
\ConfigureEnv{animateinline}{%
  \ifvmode\IgnorePar\fi\EndP\HCode{<div class="animateinline">}%
  \Configure{tikzpicture}{}{}%
}{\ifvmode\IgnorePar\fi\EndP\HCode{</div>}}{}{}
\Css{.animateinline img{
  display:none;
 }}

\Css{.animateinline img:first-child{
   display:block;
 }}

% register the js file for processing
\special{t4ht+@File: animate.js}
\Configure{@/BODY}{\HCode{<script type="text/javascript" src="animate.js"></script>}}
\begin{document}
\EndPreamble

代码\Configure{animinline}{\Picture+{}}{\EndPicture}请求动画步骤的图像渲染。\ConfigureEnv{animateinline}插入<div class="animateinline">元素，稍后将用于 HTML 动画。

CSS 代码

\Css{.animateinline img{
  display:none;
 }}

\Css{.animateinline img:first-child{
   display:block;
 }}

将仅显示第一张图片并隐藏其余图片。我们将使用 JavaScript 通过显示隐藏的图片来连续制作动画效果。

使用以下方式请求 JavaScript 代码：

\special{t4ht+@File: animate.js}
\Configure{@/BODY}{\HCode{<script type="text/javascript" src="animate.js"></script>}}

animate.js第一行注册要处理的文件tex4ht，第二行将其包含在文档主体的末尾。

这animate.js：

function add_animations(cls){
  var elements = document.querySelectorAll(cls);
  elements.forEach(function(value, index, obj){
    console.log(value + ", " + index + ", "+ obj + ", "+ this);
    var next = 0;
    var reset = function(){next=0};
    var curr_obj = obj[index];
    var images = curr_obj.querySelectorAll("img");
    setInterval(function(){
      images.forEach(function(val, i, newobj){
        newobj[i].style.display="none";
      });
      if(next < images.length-1){ next++} else {reset()}
      console.log("next: "+ next);
      images[next].style.display = "block";
    }, 100);
  });
}

add_animations(".animateinline");

您可以使用以下方式编译文档

make4ht -um draft -c myconfig.cfg filename.tex

结果如下（遗憾的是这里没有动画）：

动画版可以看这里

Answer

编辑：这里是最终的动画。

这并不容易。我甚至无法在我的计算机上显示您的 PDF 动画，因为animate该软件包使用了一些 JavaScript 的 PDF 技巧，而大多数 PDF 阅读器（Acrobat Reader 和其他一些阅读器除外）都不支持这种技巧。

无论如何，需要完成两个不同的任务：第一是将动画步骤导出为单独的图像，第二是在 HTML 页面上制作动画。今天我只会讨论第一个任务，稍后我会讨论第二个任务。

那么，要将动画步骤转换为图像，需要做什么呢？首先，我们应该修复编译错误。错误来源有两个。第一个是 tex4ht 的 TikZ 输出驱动程序，第二个是pdfbase所需的包animated，它重新定义了 tex4ht 也使用的某些内部 LaTeX 命令。

为了修复 TikZ 问题，我们可以使用替代驱动程序，该驱动程序使用命令dvisvgm转换为 SVG 格式，这对于 Web 上的矢量图形来说是理想的。将以下文件另存为pgfsys-tex4ht.def：

% Copyright 2006 by Till Tantau
%
% This file may be distributed and/or modified
%
% 1. under the LaTeX Project Public License and/or
% 2. under the GNU Public License.
%
% See the file doc/generic/pgf/licenses/LICENSE for more details.

\ProvidesFileRCS $Header: /cvsroot/pgf/pgf/generic/pgf/systemlayer/pgfsys-tex4ht.def,v 1.25 2013/08/06 17:46:08 tantau Exp $



% Driver commands for tex4ht

%
% Load common pdf commands:
%
  %\input pgfsys-dvisvgm.def
  \input pgfsys-dvips.def

%
% tex4ht-specific stuff:
%

\newcount\pgf@sys@svg@picnum

% configure the output picture format to svg
\AtBeginDocument{
  \Configure{Picture}{.svg}
}


% Make the code inserted by tex4ht configurable

\NewConfigure{tikzpicture}{2}
\Configure{tikzpicture}{%
  % \ifvmode\IgnorePar\fi\EndP%\HtmlParOff
  \Picture*{}
}{\EndPicture}

\let\orig@pgfsys@begin\pgfsys@beginpicture
\let\orig@pgfsys@end\pgfsys@endpicture
\def\pgf@sys@postscript@header#1{{\special{! #1}}}
\def\pgfsys@beginpicture{%
  \bgroup
  \csname a:tikzpicture\endcsname
  \pgf@sys@postscript@header{
    /pgfsc{}bind def% stroke color is empty by default
    /pgffc{}bind def% fill color is empty by default
    /pgfstr{stroke}bind def%
    /pgffill{fill}bind def%
    /pgfeofill{eofill}bind def%
    /pgfe{a dup 0 rlineto exch 0 exch rlineto neg 0 rlineto closepath}bind def% rectangle
    /pgfw{setlinewidth}bind def% setlinewidth
    /pgfs{save pgfpd 72 Resolution div 72 VResolution div neg scale 
      magscale{1 DVImag div dup scale}if 
      pgfx neg pgfy neg translate pgffoa .setopacityalpha}bind def% save
    /pgfr{pgfsd restore}bind def %restore
    userdict begin%
    /pgfo{pgfsd /pgfx currentpoint /pgfy exch def def @beginspecial}bind def %open
    /pgfc{newpath @endspecial pgfpd}bind def %close
    /pgfsd{globaldict /pgfdelta /delta where {pop delta} {0} ifelse put}bind def% save delta
    /pgfpd{/delta globaldict /pgfdelta get def}bind def % put delta
    /.setopacityalpha where {pop} {/.setopacityalpha{pop}def} ifelse % install .setopacityalpha 
    /.pgfsetfillopacityalpha{/pgffoa exch def
      /pgffill{gsave pgffoa .setopacityalpha fill 1 .setopacityalpha newpath fill grestore newpath}bind def
      /pgfeofill{gsave pgffoa .setopacityalpha eofill 1 .setopacityalpha newpath eofill grestore newpath}bind def}bind def
    /.pgfsetstrokeopacityalpha{/pgfsoa exch def /pgfstr{gsave pgfsoa .setopacityalpha stroke grestore newpath}bind def}bind def
    /pgffoa 1 def
    /pgfsoa 1 def
    end
  }%
  \orig@pgfsys@begin%
}%


\def\pgfsys@endpicture{%
  % Save the bounding box
  %\printdim%
  \orig@pgfsys@end%
  \csname b:tikzpicture\endcsname%
  \egroup
  \par% FIXME : was '\Par' but that seems to be undefined!?
}%


\endinput


%%% Local Variables: 
%%% mode: latex
%%% End:

pdfbase可以使用文件修复该问题usepackage.4ht：

% usepackage.4ht (2017-10-21-16:16), generated from tex4ht-4ht.tex
% Copyright 2003-2009 Eitan M. Gurari
% Copyright 2009-2017 TeX Users Group
%
% This work may be distributed and/or modified under the
% conditions of the LaTeX Project Public License, either
% version 1.3c of this license or (at your option) any
% later version. The latest version of this license is in
%   http://www.latex-project.org/lppl.txt
% and version 1.3c or later is part of all distributions
% of LaTeX version 2005/12/01 or later.
%
% This work has the LPPL maintenance status "maintained".
%
% The Current Maintainer of this work
% is the TeX4ht Project <http://tug.org/tex4ht>.
%
% If you modify this program, changing the
% version identification would be appreciated.
   \def\:temp{tex4ht}\ifx \:temp\@currname
   \:warning{\string\usepackage{tex4ht} again?}
   \def\:temp#1htex4ht.def,tex4ht.sty#2!*?: {\def\:temp{#2}}
\expandafter\:temp \@filelist htex4ht.def,tex4ht.sty!*?: %
\ifx \:temp\empty  \else
   \:warning{if
    \string\RequirePackage[tex4ht]{hyperref} or
    \string\usepackage[tex4ht]{hyperref} was
    used try instead, repectively,
    \string\RequirePackage{hyperref} or
    \string\usepackage{hyperref}}
\fi

\fi
\gdef\a:usepackage{\use:package xr,xr-hyper,savetrees,biblatex,xeCJK,fontspec,tikz,pdfbase,,!*?: }
\gdef\use:package#1,{%
   \if :#1:\def\:temp##1!*?: {}\else
      \def\:temp{#1}\ifx \@currname\:temp
             \def\:temp##1!*?: {\input usepackage.4ht  }%
      \else \let\:temp=\use:package \fi
   \fi \:temp}
\def\:temp{xr}\ifx \@currname\:temp
   \AtEndOfPackage{\let\XR:\XR@
   \def\XR@[#1]#2{%
    \Configure{AtBeginDocument}{\XR:[#1]{#2}}{}}%
}

\fi
\def\:temp{xr-hyper}\ifx \@currname\:temp
   \def\eat:optional[#1]{}
\AtEndOfPackage{\let\XR:\XR@
   \def\XR@[#1]#2{%
     \Configure{AtBeginDocument}{\XR:[#1]{#2}}{}\@ifnextchar[\eat:optional{}}%
}

\fi
\def\:temp{savetrees}\ifx \@currname\:temp
\:dontusepackage{savetrees}
\fi
\def\:temp{biblatex}\ifx \@currname\:temp
\AtEndOfPackage{%
  \def\blx@mknoautolang{%
    \blx@lbxinput{\blx@languagename}%
    {}{}%
  }%
}
\fi
\def\:temp{xeCJK}\ifx \@currname\:temp
\:dontusepackage{xeCJK}
\AtEndOfPackage{%
  \RequirePackage{fontspec}
}
\DeclareDocumentCommand\setCJKmainfont{o m o}{}
\let\setCJKsansfont\setCJKmainfont
\let\setCJKmonofont\setCJKmainfont

\DeclareDocumentCommand\setCJKfamilyfont {m o m }{}
\DeclareDocumentCommand\newCJKfontfamily {o m o m}{\expandafter\gdef\csname #2\endcsname{\relax}}

\DeclareDocumentCommand\xeCJKsetup{m}{}
% }
\AtBeginDocument{%
  \xeuniuseblock{CJK}
}
\fi
\def\:temp{fontspec}\ifx \@currname\:temp
  \ifdefined\fontspec
    \:dontusepackage{fontspec}
  \else
    \input usepackage-fontspec.4ht
  \fi
\fi
\def\:temp{tikz}\ifx \@currname\:temp
\AtEndOfPackage{%
\let\use:tikzlibrary\usetikzlibrary
\def\find:externalize#1external#2\@nil{%
\if\relax#2\relax\else
  \let\tikz:externalize\tikzexternalize
  \renewcommand\tikzexternalize[1][]{\tikz:externalize[##1,mode=only graphics]}
    \tikzset{%
      tex4ht inc/.style={%
        /pgf/images/include external/.code={%
          \includegraphics[]{####1.pdf}%
        }%
      }
    }
    \tikzset{tex4ht inc}
  \fi
}
\renewcommand\usetikzlibrary[1]{%
  \use:tikzlibrary{#1}%
  \find:externalize#1external\@nil%
}
}
\fi

\def\:temp{pdfbase}\ifx\@currname\:temp
\AtEndOfPackage{%
\let\old:outputpage\@outputpage
\def\@outputpage{\old:outputpage{}}
}
\fi

\endinput

将两个文件都放在 TeX 文件的目录中。

我们还需要一些包的配置文件animate，以请求图像转换的步骤。文件animate.4ht：

\NewConfigure{animinline}{2}
\let\:anim:xinline\@anim@xinline
\def\@anim@xinline#1#2#3#4{\a:animinline\:anim:xinline{#1}{#2}{#3}{#4}\b:animinline}

\Hinput{animate}

此配置重新定义了用于渲染步骤的代码，并插入了两个可配置的钩子。我们可以配置这些钩子以将包含的内容渲染为图像。这些配置可以在配置文件中完成myconfig.cfg：

\Preamble{xhtml,html5,svg}
\Configure{animinline}{\Picture+{}}{\EndPicture}
\ConfigureEnv{animateinline}{%
  \ifvmode\IgnorePar\fi\EndP\HCode{<div class="animateinline">}%
  \Configure{tikzpicture}{}{}%
}{\ifvmode\IgnorePar\fi\EndP\HCode{</div>}}{}{}
\Css{.animateinline img{
  display:none;
 }}

\Css{.animateinline img:first-child{
   display:block;
 }}

% register the js file for processing
\special{t4ht+@File: animate.js}
\Configure{@/BODY}{\HCode{<script type="text/javascript" src="animate.js"></script>}}
\begin{document}
\EndPreamble

代码\Configure{animinline}{\Picture+{}}{\EndPicture}请求动画步骤的图像渲染。\ConfigureEnv{animateinline}插入<div class="animateinline">元素，稍后将用于 HTML 动画。

CSS 代码

\Css{.animateinline img{
  display:none;
 }}

\Css{.animateinline img:first-child{
   display:block;
 }}

将仅显示第一张图片并隐藏其余图片。我们将使用 JavaScript 通过显示隐藏的图片来连续制作动画效果。

使用以下方式请求 JavaScript 代码：

\special{t4ht+@File: animate.js}
\Configure{@/BODY}{\HCode{<script type="text/javascript" src="animate.js"></script>}}

animate.js第一行注册要处理的文件tex4ht，第二行将其包含在文档主体的末尾。

这animate.js：

function add_animations(cls){
  var elements = document.querySelectorAll(cls);
  elements.forEach(function(value, index, obj){
    console.log(value + ", " + index + ", "+ obj + ", "+ this);
    var next = 0;
    var reset = function(){next=0};
    var curr_obj = obj[index];
    var images = curr_obj.querySelectorAll("img");
    setInterval(function(){
      images.forEach(function(val, i, newobj){
        newobj[i].style.display="none";
      });
      if(next < images.length-1){ next++} else {reset()}
      console.log("next: "+ next);
      images[next].style.display = "block";
    }, 100);
  });
}

add_animations(".animateinline");

您可以使用以下方式编译文档

make4ht -um draft -c myconfig.cfg filename.tex

结果如下（遗憾的是这里没有动画）：

动画版可以看这里

Question 2

该软件包现在与( )animate兼容。htlatextex4ht

自版本起[2018/11/20]包裹animate可以生产自足的，独立动画 SVG可以使用 HTML 标签嵌入到 HTML 中<object>或直接在现代 Web 浏览器（如 Firefox、Chromium 或 Opera）中打开的文件。它利用了 M. Gieseking 的dvisvgm实用程序，它是 TeXLive 和 MikTeX 的一部分。

点击图片加载 SVG：

要生成动画 SVG，请将全局选项添加dvisvgm到article文档类并隐藏页码。在源文件上运行、或之一，然后latex在lualatex --output-format=dvi先前生成的 DVI 或 XDV（由）文件上运行。xelatex -no-pdfdvisvgm --exact --font-format=woffxelatex

\documentclass[dvisvgm]{article}
\usepackage{animate}
\usepackage{tikz}
\usepackage{pgfplots}
\pgfplotsset{compat=newest}
\usepgfplotslibrary{polar}

\pgfplotsset{
paxis/.style={width=5cm,height=5cm,ymin = 0,ymax = 1.5*\offset,tick align=outside,xticklabels=\empty,yticklabels=\empty,xmajorgrids=false,ymajorgrids=false},
refer/.style={red,domain=0:360,samples=36},
points/.style={blue,mark={*},samples at={0}},
}

\pagestyle{empty}

\begin{document}

\def\offset{5}
\begin{animateinline}[autoplay,loop,controls,
  begin={%
    \begin{tikzpicture}
      \begin{polaraxis}[paxis,xshift=0]
      \addplot[refer] (x,{\offset)});
  },
  end={%
      \end{polaraxis}
    \end{tikzpicture}%
  },
]{10}
  \multiframe{30}{rt=0+1}{
    \def\anglet{0.1*\rt*360}
    \addplot[points] ({x+\anglet},\offset);
  }
\end{animateinline}

\end{document}

通过<object>放置在命令内的 HTML 标记将动画 SVG 嵌入到文档中\HCode{...}，然后使用以下命令编译文档make4ht -uf html5：

...
\HCode{%
  <object type="image/svg+xml" data="animatedImage.svg">
    <!-- fallback & search engine indexing -->
    <img src="animatedImage.svg" />
  </object>
}
...

Answer

该软件包现在与( )animate兼容。htlatextex4ht

自版本起[2018/11/20]包裹animate可以生产自足的，独立动画 SVG可以使用 HTML 标签嵌入到 HTML 中<object>或直接在现代 Web 浏览器（如 Firefox、Chromium 或 Opera）中打开的文件。它利用了 M. Gieseking 的dvisvgm实用程序，它是 TeXLive 和 MikTeX 的一部分。

点击图片加载 SVG：

要生成动画 SVG，请将全局选项添加dvisvgm到article文档类并隐藏页码。在源文件上运行、或之一，然后latex在lualatex --output-format=dvi先前生成的 DVI 或 XDV（由）文件上运行。xelatex -no-pdfdvisvgm --exact --font-format=woffxelatex

\documentclass[dvisvgm]{article}
\usepackage{animate}
\usepackage{tikz}
\usepackage{pgfplots}
\pgfplotsset{compat=newest}
\usepgfplotslibrary{polar}

\pgfplotsset{
paxis/.style={width=5cm,height=5cm,ymin = 0,ymax = 1.5*\offset,tick align=outside,xticklabels=\empty,yticklabels=\empty,xmajorgrids=false,ymajorgrids=false},
refer/.style={red,domain=0:360,samples=36},
points/.style={blue,mark={*},samples at={0}},
}

\pagestyle{empty}

\begin{document}

\def\offset{5}
\begin{animateinline}[autoplay,loop,controls,
  begin={%
    \begin{tikzpicture}
      \begin{polaraxis}[paxis,xshift=0]
      \addplot[refer] (x,{\offset)});
  },
  end={%
      \end{polaraxis}
    \end{tikzpicture}%
  },
]{10}
  \multiframe{30}{rt=0+1}{
    \def\anglet{0.1*\rt*360}
    \addplot[points] ({x+\anglet},\offset);
  }
\end{animateinline}

\end{document}

通过<object>放置在命令内的 HTML 标记将动画 SVG 嵌入到文档中\HCode{...}，然后使用以下命令编译文档make4ht -uf html5：

...
\HCode{%
  <object type="image/svg+xml" data="animatedImage.svg">
    <!-- fallback & search engine indexing -->
    <img src="animatedImage.svg" />
  </object>
}
...

animate 包是否与 htlatex 兼容

答案1

答案2

相关内容