SVG-to-PDFKit icon indicating copy to clipboard operation
SVG-to-PDFKit copied to clipboard

Radial gradient has wrong position

Open Monokai opened this issue 5 years ago • 1 comments

I'm converting this SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500">
	<defs>
		<radialGradient id="gradient" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5">
			<stop offset="0" stop-color="#ff0"></stop>
			<stop offset="1" stop-color="#f00"></stop>
		</radialGradient>
		<mask id="mask" x="0" y="0" width="500" height="500">
			<circle cx="250" cy="125" r="250" fill="#fff" />
		</mask>
	</defs>
	<g mask="url(#mask)">
		<circle cx="375" cy="325" r="125" fill="url(#gradient)"></circle>
	</g>
</svg>

with this script:

const doc = new PDFKit({size: [500, 500]});

SVGtoPDF(doc, svg, 0, 0, {
	assumePt: true
});

to this PDF: output.pdf

But the position of the gradient is off. (changing assumePt to false yields a different result, but the gradient is still off). I've attached two screenshots to compare:

SVG: Screen Shot 2020-09-17 at 10 20 25

PDF: Screen Shot 2020-09-17 at 10 19 17

Also, when trying to load the resulting pdf file in Adobe Illustrator, it says An unknown shading type was encountered, but the gradient position does seem to be correct.

Any ideas?

Monokai avatar Sep 17 '20 08:09 Monokai

Any solution to this?

edvinbrobeck avatar Sep 07 '21 16:09 edvinbrobeck