Problems with gradients without gradient stops

[FHoffmannSopra]

Hey guys,

I tried to render a SVG image in my pdf with the svg2pdf tool.

Inside the SVG image I defined some linearGradients and radialGradients inside the defs tag at the beginning of the file e.g: The images are created with InkScape

<radialGradient
       gradientTransform="translate(-32.290432,47.225945)"
       inkscape:collect="always"
       xlink:href="#linearGradient938"
       id="radialGradient940"
       cx="93.700195"
       cy="221.20117"
       fx="93.700195"
       fy="221.20117"
       r="19.27774"
       gradientUnits="userSpaceOnUse" />
    <linearGradient
       inkscape:collect="always"
       id="linearGradient938">
      <stop
         style="stop-color:#e46666;stop-opacity:1"
         offset="0"
         id="stop934" />
      <stop
         style="stop-color:#da2929;stop-opacity:1"
         offset="1"
         id="stop936" />
    </linearGradient>

<circle
           style="opacity:1;fill:url(#radialGradient940);fill-opacity:1;stroke:#000000;stroke-width:0.282223;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.935484;paint-order:normal"
           id="circle916-8"
           cx="61.409763"
           cy="268.42709"
           r="19.277742" />

Whenever I render images with gradients on my pdf I get this error:

I have seen that the error is thrown by the jsPdf library, but I am not sure if its a problem with the preprocessing of svg2pdf or indeed a problem with jsPdf

I just need the info, if there is support for such statements at all, or an alternative way to define linear gradients in the SVG file

I am using svg2pdf 2.0.0 and jsPdf 2.0.0.

Thanks for your help Frederic

[HackbrettXXX]

Thanks for the report. The issue is the empty <radialGradient> without any stops in your example. Since the specification states that a radialGradient may have "any number" of child elements, we should probably fix this bug.

[FHoffmannSopra]

I rewrote the example gradient from above like this to confirm your guess:

<radialGradient
       gradientTransform="translate(-32.290432,47.225945)"
       inkscape:collect="always"
       id="radialGradient940"
       cx="93.700195"
       cy="221.20117"
       fx="93.700195"
       fy="221.20117"
       r="19.27774"
       gradientUnits="userSpaceOnUse" >
       <stop
         style="stop-color: #e46666; stop-opacity: 1;"
         offset="0"
         id="stop934" />
         <stop
         style="stop-color: #da2929; stop-opacity: 1;"
         offset="1"
         id="stop936" />
      </radialGradient>

And it worked perfectly

[FHoffmannSopra]

Hey guys,

I saw you fixed this issue last week, so updated the library and revisited my code, to remove my workaround solution to this. There is no more error thrown for the gradients, and the PDF is rendered mostly correct. Unfortunately the critical gradients, with no stops, are rendered as white areas, while their outline is completely fine.

I am now using jsPdf 2.4.0 and svg2pdf 2.2.0, my pictures are drawn with InkScape.

The svg-file I tried is attached, so you can maybe identify another reason for the behavior if its not the zero stops anymore.

Thanks for your help Frederic

exampleGradient.zip

[HackbrettXXX]

@FHoffmannSopra this seems to be another unsupported feature. In your SVG, there are two gradients: one with stops, one without. The shape references the gradient without stops and this gradient uses the other gradient (with stops) as a template with the href attribute. This href attribute is currently not supported. I've created a separate issue for this: #191.