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
667 stars 104 forks source link

Rectangular boxes enclosing graphic elements #36

Closed kickmyassp closed 6 years ago

kickmyassp commented 6 years ago

Hello, I am working on converting musical notations in SVG to PDF. Considering that I am a novice to both SVG and PDF as well as JS, svg2pdf.js has been a huge help for me. One problem I face now is unwanted rectangular boxes around all the graphic elements. See this PDF file for example.

Any help would be greatly appreciated.

yGuy commented 6 years ago

In order to help you here, as small test-case would be very helpful: can you come up with a very small svg that exhibits the problem- we need the original svg in order to diagnose this.

kickmyassp commented 6 years ago

Thanks for your reply. Attached is a html file with an svg tag included. The svg description was actually created by another Javascript(abcjs) and hence may not be as small (or readable) as you would like.

I hope this would be useful to you. test_svg2pdf.txt

Hackbrett3X commented 6 years ago

Thanks for the example. The reason is that there are elements where fill-opacity and stroke-opacity are set to zero. The stroke-opacity attribute is not completely supported right now.

As a workaround you could try to find out what creates those invisible rects.

Hackbrett3X commented 6 years ago

I just added support for stroke-opacity. It will come with the next release.

kickmyassp commented 6 years ago

hello I tried the new version(1.2.0) with the html/svg file I sent previously. Those rects with fill-opacity and stroke-opacity set to zero are invisible in svg but still become VISIBLE in pdf.
Is this what you meant when you say "stroke-opacity" is supported? As far as this thing is concerned, the new version acts the same way as the old one.

HackbrettXXX commented 6 years ago

Hi, are you sure you use the latest release? Unfortunately, the latest version on npm is still 1.1.2 . Right now you'll have to download/clone it from GitHub or use Bower in order to get 1.2.0.

kickmyassp commented 6 years ago

Hello,

I am sure I did use 1.2.0. I used git to pull the latest one.

The file header says:

/**

On Wed, Dec 27, 2017 at 11:01 PM, Lukas Holländer notifications@github.com wrote:

Hi, are you sure you use the latest release? Unfortunately, the latest version on npm is still 1.1.2 . Right now you'll have to download/clone it from GitHub or use Bower in order to get 1.2.0.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/yWorks/svg2pdf.js/issues/36#issuecomment-354118116, or mute the thread https://github.com/notifications/unsubscribe-auth/AGfIlr8e7rYgzQoTaid5A9qNFv2n5APrks5tEk3KgaJpZM4Qv8po .

HackbrettXXX commented 6 years ago

Mmh, thats funny: I did a clean download from GitHub and ran your test above and I cannot see any boxes.

kickmyassp commented 6 years ago

It turned out that I was using an old version of jsPDF(1.2.70). It wasn't obvious to me I needed to update jsPDF as well as svg2pdf. I switched to the latest one (1.3.0) and those annoying boxes are now gone. Thanks!!!

On Sat, Dec 30, 2017 at 12:32 AM, Lukas Holländer notifications@github.com wrote:

Mmh, thats funny: I did a clean download from GitHub and ran your test above and I cannot see any boxes.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/yWorks/svg2pdf.js/issues/36#issuecomment-354460224, or mute the thread https://github.com/notifications/unsubscribe-auth/AGfIloW_pEJvQFfEVDQzQmKmj5gmjxt6ks5tFQXygaJpZM4Qv8po .

HackbrettXXX commented 6 years ago

Ah, that makes sense. Sorry, forgot about that...