使用 SVGtoPDF (SVG-to-PDFKit) 將 svg 數據轉換為 pdf

Question

我正在使用 SVGtoPDF npm 庫來獲取 pdf 上的 svg 元素，但是對於以下 svg 對象，它不起作用，因為<image>標簽正在產生問題。

錯誤消息:: SVGElemImage：無法在 PDFKit 中打開圖像“http://174.138.12.68:4000/uploads/products/1597070187552-Ash%20Back.jpg”

我的 SVG 數據:::

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400" viewBox="0 0 400 400" xml:space="preserve">
<desc>Created with Fabric.js 2.7.0</desc>
<defs>
</defs>
<g transform="matrix(0.31 0 0 0.31 200 200)"  >
    <image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  xlink:href="http://174.138.12.68:4000/uploads/products/1597070187552-Ash%20Back.jpg" x="-512" y="-640" width="1024" height="1280"></image>
</g>
<g transform="matrix(1 0 0 1 206.5 263.5)"  >
<rect style="stroke: rgb(0,0,255); stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(230,230,230); fill-opacity: 0.8; fill-rule: nonzero; opacity: 0.2;"  x="-100" y="-100" rx="0" ry="0" width="200" height="200" />
</g>
<g clip-path="url(#CLIPPATH_4)"  >
<g transform="matrix(0.9 0 0 0.9 205 244.88)"  >
<clipPath id="CLIPPATH_4" >
    <rect transform="matrix(1 0 0 1 206.5 263.5)" x="-100" y="-100" rx="0" ry="0" width="200" height="200" />
</clipPath>
    <image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  xlink:href="http://174.138.12.68:4000/transparent_images/1598349009675-1589379674035GoogleFiveStarCust.Rating.pdf-1.svg" x="-111" y="-92" width="222" height="184"></image>
</g>
</g>
</svg>

Answer 1

我認為遠程圖像導入仍未實現。 您可以做的是下載圖像並替換 svg 中的路徑並導出。 這對我有用，因為我的原始 svg 引用了本地圖像我沒有遇到這個問題。