0

问题

当我将标准 SVG 放入 wkhtmltopdf 时，它呈现精美，就像在浏览器中一样。

但是，当我向 SVG 添加颜色渐变时（例如使用<linearGradient/>），它会沿着形状的边缘创建一条非常不稳定和像素化的线，使其无法使用。

我尝试过更改 DPI、缩放等选项……但这些与问题无关。

输出比较

标准 SVG：

在此处输入图像描述

有问题的颜色渐变 SVG： 在此处输入图像描述

SVG 比较

标准 SVG：

<svg width="999" height="784" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0.000610352H999V782.575C999 782.575 698.108 820.603 570.006 503.87C441.904 187.138 0 193.643 0 193.643V0.000610352Z" fill="#71C696" />
</svg>

有问题的颜色渐变 SVG：

<svg width="999" height="784" viewBox="0 0 999 784" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0.000610352H999V782.575C999 782.575 698.108 820.603 570.006 503.87C441.904 187.138 0 193.643 0 193.643V0.000610352Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="748.257" y1="647.475" x2="958.499" y2="173.824" gradientUnits="userSpaceOnUse">
<stop stop-color="#71C696"/>
<stop offset="1" stop-color="#83D6A8"/>
</linearGradient>
</defs>
</svg>

重要提示：该问题与 SVG 元素上的属性（例如宽度、高度、视图框或任何 CSS）没有任何关系。

此外，SVG 被直接注入到 HTML 中。我尝试将它放在一个<img/>（作为 src 链接和作为 base 64 编码的 src）中，但无济于事。

4

0 回答 0