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
654 stars 100 forks source link

Node text is garbled in IE #97

Closed scottctr closed 5 years ago

scottctr commented 5 years ago

Describe the bug Node text is garbled on IE 11. (see screenshots and SVG below)

svg2pdf.js: 1.3.4 jspdf: 2.0.2

To Reproduce

  1. With the following SVG and JavaScript code Pasted at bottom to prevent corrupting post.

  2. I get this result image

Expected behavior I would have expected the PDF to look like so. image

Desktop (please complete the following information):

SVG


                <g class="port">
                    <ellipse rx="8" ry="8"/>
                    <line x1="-6" y1="0" x2="6" y2="0" class="port-icon"/>
                    <line x1="0" y1="-1" x2="0" y2="1" class="port-icon port-icon-collapse"/>
                </g>
            </g><g transform="translate(255 156)"><rect fill="rgb(255,255,255)" stroke="none" fill-opacity="1" height="14" width="20" y="0" x="0"/><text font-family="'Arial'" font-size="10px" font-style="normal" font-weight="normal" text-anchor="start" fill="rgb(0,0,0)" fill-opacity="1" dy="1.1em" transform="translate(0 0)">88%</text></g></g></g><defs/></svg>```
yGuy commented 5 years ago

I guess you forgot to attach the JavaScript. Specifically whether you are using custom fonts would be of interest, here, since usually text like this indicates a problem with the embedded custom fonts. Also the SVG doesn't really look like it would produce the image as the text reads "88%" in the SVG. Ideally provide a code-pen or jsfiddle like this one: https://jsfiddle.net/highcharts/mae0j8c5/ - that would be the ideal repro for others to investigate. Thanks!

scottctr commented 5 years ago

I've attached a sample app. You're correct that it only happens when using an embedded font. This is included in the sample app.

There are up to 3 sets of text in each of my nodes. All 3 render as expected on Chrome and Edge, but on IE, only the top set of text is rendered correctly.

iePdfIssue.zip

HackbrettXXX commented 5 years ago

The issue seems to be the polyfill for Map. It does not work properly with Object.keys(): Object.keys(new Map()) returns ["_t", "_i", "_f", "_l", "_s"] while it should return an empty arrray. The polyfill should define these properties with enumerable: false.

yGuy commented 5 years ago

Seems this is related: https://stackoverflow.com/questions/54254007/internet-explorer-11-adds-values-to-typescript-map-in-post-request

HackbrettXXX commented 5 years ago

Was fixed in https://github.com/yWorks/jsPDF/commit/8839c9302bb7cd91261cb53c8cc5b5985b54281f