javascript - xeponline.jqPlugin.js(或 css2pdf)SVG 引用另一个 SVG 不会在 PDF 中显示

Question

我正在尝试为我的 HTML 页面创建正确的 PDF。我已经设法将除 SVG 之外的所有内容都包含在 PDF 中。我尝试找出问题所在，所以尝试了这个并且效果很好:

<svg id="testSVG" width="100" height="100" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  Sorry, your browser does not support inline SVG.
</svg>

但是，如果我这样做:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <use xlink:href="#testSVG" width="100" height="100"/>
</svg>

现在不再这样了。它确实显示在浏览器和 media="print" 上所以我怀疑这可能是语法。有谁知道 SVG <use>元素实际上由 xeponline.jqPlugin.js 支持(或css2pdf)？

Answer 1

Cloudformatter 插件正在抓取 DOM 并将其组装成结构化内容以发送到服务器。它执行一些操作，主要是为了确保内容的结构为 XML。

我想你是在问为什么在那个结构中，你有一个ID为#whatever的SVG，它没有在该结构中另一个“使用”名为#whatever的结构的SVG中使用。

答案是，它不会，因为它不应该。 SVG 的用途是在该 SVG 的多个位置重用该 SVG 内的内容。您正在尝试将 DOM 中的 SVG 重用到该 DOM 内 SVG 内的另一个位置。

如果这对浏览器有效，那对它们来说也很好。但这不是标准。标准中 SVG 的使用很明显，它是为了重用同一 SVG 中的内容。

就我个人而言，我不明白它为什么会起作用。就像同一页面上有五个动态图表一样，该代码在每个图表中创建#gradient1、#gradient2，它们都是不同的。我的图表应该使用哪个#gradient1？里面那个？还是另一张图表中的那个？还是第一个图表？

举一个简单的例子，我在同一页面上有 2 个图表。它们是从 Javascript 动态创建的，因此它们在内部执行的操作能够在其内部单独理解 SVG 本身的性质和结构。他们可以在内部创建一组在内部应用的 ID，但他们当然不知道页面上存在什么。

图表 1 包含以下内容:

<rect id=”rect1” x="0" y="0" width="720" height="400" strokewidth="0" fill="#FFFFFF" class=" highcharts-background"/>

图表 2 包含以下内容:

<rect id=”rect1” x="0" y="0" width="220" height="200" strokewidth="0" fill="#FFFFFF" class=" highcharts-background"/>

现在，在第一个 SVG 内部引用了 id“rect1”，并且它也在第二个 SVG 中被引用。但请注意，它们的尺寸不同。现在，这是可行的，因为它们是每个 SVG 的内部并且是不同的。问自己这个问题:

为什么绘制图表 1 时没有引用第二个图表？

为什么绘制图表 2 时没有引用第一个图表？

现在，正如您所做的那样，您创建了第三个 SVG 并在其中使用“rect1” - 它将使用哪个“rect1”？毕竟现在有两个了。

您当然可以尝试修改 Javascript 来尝试解决这样的使用问题，但由于上述原因，这将是一个完全一次性的解决方案。在第三个示例中 - 您不知道将哪一个复制到 SVG 中。