image - 将图像保存为 PDF - SVG 元素中的图像模糊，而其中的图像清晰

Question

请参阅此处复制的示例 - https://codepen.io/canovice/pen/eYRmYKR - command + P 打印，我截取了 print/pdf 输出的截图：

问题：在网络上，两个图像都很清晰。在打印并保存为 PDF 时，<img>标签中的徽标保持清晰，而<svg>使用属性中的徽标则模糊<svg:pattern>, <svg:image>, <svg:rect>。fill

目的：我们的 Web 应用程序有许多 SVG 图表（想想散点图），它们使用团队徽标代替散点图点。我们希望用户能够打印这些图表，并将这些图表保存为 PDF，并带有清晰的图像。这是网络上图表的屏幕截图，带有清晰的徽标。当我们将其保存为 PDF 时，我们会看到模糊的徽标。

我们正在使用 react.js 和 d3.js 来构建我们的 Web 应用程序并创建我们的 svg 图表，尽管我们希望有一个针对 SVG 元素的 html 和 css 的解决方案。

Answer 1

将光栅图形图像包裹在 svg 名称中并不能使其成为真正的可缩放矢量图形。使用的方法是“使用图像进行渐变填充”，因此不如使用具有真实颜色渐变填充的真实 SVG 对象有效。

在 svg 包装中获取 png 保持简单

<div>
<svg width="2000" height="2000" >
 <rect x="0" y="0" height="1000" width="1000" style="fill: #f0fff0"/>
 <image x="30" y="00" width="160" height="160" xlink:href="103735.png" />
 <image x="300" y="50" width="160" height="160" xlink:href="103735.png" />
</svg>
</div>