如何使用最基本的 HTML/CSS 绘制实线/虚线/虚线（以便 tcpdf 正确呈现它们）答案

【问题标题】：How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)如何使用最基本的 HTML/CSS 绘制实线/虚线/虚线（以便 tcpdf 正确呈现它们）
【发布时间】：2014-09-10 20:29:46
【问题描述】：

观察下面的图像。它是两个图形的合成，其中不同的曲线用实线、虚线和不同笔划长度的虚线变化表示。

TL;DR

我需要一种使用 basic/simplest HTML/CSS 生成实线、虚线、虚线的方法，希望 tcpdf 渲染引擎能够理解，因为 tcpdf 不能很好地处理最新最好的 HTML/CSS 标记。怎么样？

您可能不需要但可能会喜欢的详细信息：

我正在使用 flot + tcpdf 来生成这些，其中首先在画布上生成图形，然后将画布转移到 PDF 引擎，除了图例之外，一切似乎都工作正常。曲线的图例没有被转移到画布上，因为 flot 还没有能力将它的图例写到画布上。它将其写入 HTML/CSS 中的 DIV，并且由 flot 生成的图例代码将 horribly （即它使用大而丑陋的矩形而不是线条）转换为 tcpdf 的原生弱 HTML-to-pdf 渲染引擎。换句话说，我需要使用最基本的 HTML/CSS 创建自己的图例，并希望 tcpdf 能够正确理解和呈现它。

【问题讨论】：

标签： html css tcpdf

【解决方案1】：

使用 SVG，而不是 HTML/CSS。

http://www.tcpdf.org/doc/code/classTCPDF.html#a56536508fb1b5aede7d2ed27f56c2353

<svg height="30" width="100">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="20,10" d="M5 2 300 0" />
  </g>
</svg>

【讨论】：