search

yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
655 stars 101 forks source link

issue with object transform #32

Closed poplevente closed 6 years ago

poplevente commented 6 years ago

Hi Guys,

i have the following svg, which has a yellow rounded corner object with a text in it, but in the pdf it converts it to a black box instead. can someone help me identify why is that happening?

svg: `

Text 1

`

thanks!

yGuy commented 6 years ago

The SVG is much more complicated than your description: - it has filters, which aren't supported at all and complex gradients, plus complex clip paths. Try stripping down the SVG and see what works for you and what doesn't. If you want to render this SVG using svg2pdf there will probably more than just issue that needs to be addressed. If you can, use a simpler SVG (rendering something similar can be done in less than one tenth of the size).

poplevente commented 6 years ago

okay, thank you for your answer. will try to strip the svg

poplevente commented 6 years ago

i see that even a simple gradient isn't working and becomes black : ` <rect fill="url(#GRAD5861)" x="10" y="10" width="100" height="100"/> ....

` does the lib supports gradients?
HackbrettXXX commented 6 years ago

The library does support gradients. However, "%"-measures are not supported.

poplevente commented 6 years ago

even without % it's black `

`

HackbrettXXX commented 6 years ago

There actually two bugs here:

  1. the default values for x1, x2, y1, y2 are not specified and result in "NaN"
  2. the linearGradient element is specified after its usage and not within a defs element. I'm not sure if this is a bug or not, as e.g. MDN states:

    Gradients are defined in a defs section as opposed to on a shape itself to promote reusability

The workaround would be to define the x1, x2, y1, y2 values (0, 1, 0, 0) and wrap the linearGradient with a defs

HackbrettXXX commented 6 years ago

Just fixed bug No 1.

poplevente commented 6 years ago

yes, thanks! works this way.

poplevente commented 6 years ago

One more question. do you support to have a gradient for the stroke? i have an element with fill gradient, which is working well. then i have another element with a stroke with the same gradient around the first element. (don't ask why, this is how gojs builds the svg :) )

<path d="M 0,2 L 0,2.0000000000000004 A 2,2 90 0,1 1.9999999999999996,0 L 127,0 L 127,0 A 2,2 90 0,1 129,1.9999999999999996 L 129,79 L 129,79 A 2,2 90 0,1 127,81 L 2,81 L 2,81 A 2,2 90 0,1 0,79 L 0,2 z" fill="url(#GRAD6201)" stroke="none" transform="matrix(1, 0, 0, 1, 1.5, 1.5)"/> <path d="M 0,2 L 0,2.0000000000000004 A 2,2 90 0,1 1.9999999999999996,0 L 127,0 L 127,0 A 2,2 90 0,1 129,1.9999999999999996 L 129,79 L 129,79 A 2,2 90 0,1 127,81 L 2,81 L 2,81 A 2,2 90 0,1 0,79 L 0,2 z" fill="none" stroke="url(#GRAD6202)" stroke-width="3" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 1.5, 1.5)"/>

`

<linearGradient x1="0" x2="129" y1="40.5" y2="40.5" id="GRAD6202" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="#FFD378 "/>
    <stop offset="1" stop-color="#FFC857"/>
</linearGradient>

`

yGuy commented 6 years ago

No, gradient strokes aren't currently supported. Pull requests are welcome, as always. Maybe the Northwoods team would like to chime in, here? :-P

An easy workaround would be to use yFiles for HTML instead ;-) That library creates much cleaner SVG - and coincidentally this library was created with this very specific use-case in mind.

poplevente commented 6 years ago

thanks!