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"上显示，所以我怀疑它可能是语法。有谁知道<use>（或css2pdf）是否真正支持SVG xeponline.jqPlugin.js元素？

Answer 1

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

我想你在问这个结构中为什么你有一个ID为#whatever的SVG，它不会在该结构中的另一个SVG中使用＆＃34;使用＆＃34;那个名为#whatever的结构。

答案是，它并不是因为它不应该。 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"/>

现在，在内部，id“rect1”在第一个SVG中引用，它也在第二个SVG中。但请注意，它们的大小不同。现在，这是有效的，因为它们是每个SVG的内部，它们是不同的。问问自己：

为什么图表1在绘制时不引用第二个？

为什么图2在绘制时不引用第一个？

现在你已经完成了，你创建了第三个SVG并在其中使用了“rect1” - ＆＃34; rect1＆＃34;它会用吗？毕竟，现在有两个。

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

xeponline.jqPlugin.js（或css2pdf）引用另一个SVG的SVG <use>不显示在PDF中

1 个答案: