yworks / svg2pdf.js Goto Github PK

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts

License: MIT License

JavaScript 15.28% TypeScript 80.92% CSS 0.98% HTML 2.82%

browser conversion hacktoberfest javascript jspdf nodejs pdf pdf-conversion-utility svg

svg2pdf.js's People

Contributors

Stargazers

Watchers

Forkers

timgentry mwasiluk tiandiyiqi highcharts samryan19 arnoldemocial jebcat1982 sepultanic gbourel ppradeepa mrshan1 hrikrishnankr stefano-caporale-wk solangetatiana edwint88 simon-r-white simonshapiro synesenom ivaylodankolov guidev224 daniel-007 r6174 christee ajitps mdudek moklick bnjm abul4u dippindots nerjll thefallen78 intevation proyb6 anrai zaidsheriff7 mstariq89 jneidlinger saino zenker981 docoyo anderman temkaen pwcberry iggdrael ahmedsafwat1 cindylulu claude-hub chromapdx listopadiya mrfence97 inu1255 rahimbangla eugenebalabai gameleaf lestcape irtyamine fxztam wildone inc198107 alexrogalskiy realrisman git-ashish brucethwaits salem-abderaouf nasreddine27 morganwu277 tokdawn edemaine orangeswim darsim2 anderskiaer danielbretzigheimer windfalll lpn007 vajratools bryanchance proggler23 vuthanh3298 cschlusche sguydye collabsoft timchenkomo fucora aibolem zengxiaoluan

svg2pdf.js's Issues

Bold and italic don't seem to work properly

See test20.html

fill-opacity is only applied to one element, subsequent elements ignored

Live demo: https://jsfiddle.net/7r9r26vL/4/

Browser Crashed When SVG Contains Arc

Hi there yWorks,

The browser crashes when I input an svg with arcs in svg2pdf. I'm running Chrome 55.0.2883.95 (64-bit).
Here's a simple demo to illustrate: jsFiddle.
Let me know if you have a fix for this.

Best regards,
Henrik Skar

Getting error with Angular and Highcharts

Hi Team,

Thanks for this great library.

I have use this libray to export svg on PDF but i am getting an error 👍

d.saveGraphicsState is not a funtion. Could you please help me out to fix this issue ?

why this error is coming. i have included two dependency ibray jspdf and svg2pdf .

Thanks,

Cannot read property 'toLowerCase' of undefined

Hi,
I get the following error:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at l (bundle.js:493)
    at k (bundle.js:493)
    at U (bundle.js:493)
    at Q (bundle.js:493)
    at Object.<anonymous> (bundle.js:58)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:40
    at bundle.js:43

I have put the files in a repo to test:

https://github.com/psamim/svg2pdf.js-test

(npm install , ./node_modules/.bin/webpack ./entry.js bundle.js, then open index.html)

Thanks,
Samim

SVG "display" Attribute Ignored

When an svg element has display="none" set, that element is rendered anyways, resulting in an incorrect pdf to be generated.

Example: https://jsfiddle.net/7r9r26vL/2/

Multiple pages PDF

It appears when I add another page to the PDF and run svg2pdf a second time, that the PDF is empty.

The problem here is that the functions saveGraphicsState, setCurrentTransformationMatrix and restoreGraphicsState are undefined. The method which creates the pdf object in Highcharts looks like this:

pdf = new win.jsPDF( // eslint-disable-line new-cap
	'l',
	'pt', [width, height]
);
...
win.svg2pdf(svgElement, pdf,
		removeInvalid: true
});

I've looked in the jsPDF code, but there is no single place where any of this functions are defined in the source code.

The question is: is this an svg2pdf.js or an jsPDF issue? And could it be that the versions I'm running right now are not compatible with each other?

I installed them using bower (1.8.2) and these are the versions:

$ bower info jsPDF
bower jsPDF#*                   cached https://github.com/MrRio/jsPDF.git#1.3.5
bower jsPDF#*                 validate 1.3.5 against https://github.com/MrRio/jsPDF.git#*
 
$ bower info svg2pdf.js
bower svg2pdf.js#*              cached https://github.com/yWorks/svg2pdf.js.git#1.1.2
bower svg2pdf.js#*            validate 1.1.2 against https://github.com/yWorks/svg2pdf.js.git#*

Should I install different versions of these packages?

Chinese characters not rendered

I'm not sure if this issue belongs in svg2pdf or jspdf. While non-English characters like Umlaüte work well, Chinese characters don't.

First reported to Highcharts: highcharts/highcharts#6417 (comment)

Screenshot

Demo

<!DOCTYPE html>
<head>
  <script src="../node_modules/jspdf-yworks/dist/jspdf.min.js"></script>
  <script src="../dist/svg2pdf.min.js" charset="utf-8"></script>
</head>
<body>
<div style="float: left">
  <h4>SVG:</h4>
  <svg id="svgElement" width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    <text x="20" y="30" style="color: black; font-family: sans-serif">Umlaüte</text>
    <text x="20" y="60" style="color: black; font-family: sans-serif">分享基督耶穌的愛給他們</text>
  </svg>
</div>
<!--
<br>
<button onclick="save();">Convert</button>
<br>
-->
<div style="float: left">
  <h4>PDF:</h4>
  <iframe id="pdf" style="width: 550px; height: 600px"></iframe>
</div>
<script>
  function svgToPdf(svgElement, margin) {
    var width = svgElement.width.baseVal.value + 2 * margin;
    var height = svgElement.height.baseVal.value + 2 * margin;
    var pdf = new jsPDF('l', 'pt', [width, height]);
    svg2pdf(svgElement, pdf, {removeInvalid: true});

    return pdf.output('datauristring');
  }

  function saveToFile(/**string*/ fileContentUrl, /**string*/ fileName, /**function(Object, yfiles.canvas.FileEventArgs)*/ handler) {
    var aElement = document.createElement("a");
    aElement.setAttribute("href", fileContentUrl);
    aElement.setAttribute("download", fileName);
    aElement.style.setProperty("display", "none", "");
    document.body.appendChild(aElement);
    aElement.click();
    document.body.removeChild(aElement);

    handler();
  }

  function save() {
    document.getElementById("pdf").src = svgToPdf(document.getElementById("svgElement"), 0);
  }

  save();
</script>
</body>

Uncaught TypeError: pt.saveGraphicsState is not a function

Hi,
I am trying to use this library to export an svg element content as pdf but I am getting this error
Uncaught TypeError: pt.saveGraphicsState is not a function even though I have added the jsPDF library

Any help??
Thanks in advance

SVG arcs don't work in Safari and Firefox

After fixing #10, arcs display fine in Chrome, but Safari and Firefox simply leave them out. It can be seen with test no 21 in the repo:

Fill and stroke attributes are not inherited from parent element

Live demo: https://jsfiddle.net/highcharts/7r9r26vL/1/

Expected attributes on the parent group to cascade down to children.

Orientation is not supported

setting jsPDF orientation option does not change anything. Looks like there are few lines commented in this version of jsPDF lib which prevents it from rotating.

Exporting large areas throws invalid size error Acrobat Reader DC

Exporting large areas to PDF yields an invalid size error in Acrobat Reader DC.

Please try the attached reproduction. It will create a blank 15000x15000 PDF that is opened correctly in Chrome, but throws an error in Acrobat Reader. If the file would have content, it would be clipped.
Note that I've also attached the ouput.pdf that is generated from the test case:

big-area-test.zip
output.pdf

Is this a general PDF limitation or is there something wrong in svg2pdf or jsPDF? Maybe it can be fixed.

Curved text along a path

I encounter problems when I try to convert svg containing circular texts along a path. I uploaded a file that shows this problem. Are the textPath supported or will it be in the future?

incorrect text encoding

hi.i have created the pdf file and all the shapes are in their correct place but the text is not shown correctly. here is a screen shot of the problem :

any idea how to solve this issue?

font-weight not incorporated for t-span objects

font-weight attribute is being ignored for t-span object with a font-weight independent of the parent text object

Width and height properties not working anymore

The width and height properties don't seem work properly anymore. For example, take test2.html and change the code to

    var width = 100;
    var height = 300;
    var pdf = new jsPDF('l', 'pt', [width, height]);

The resulting pdf is much wider than high. The same issue can be observed in http://live.yworks.com/demos/view/pdfexport/index.html or https://www.yworks.com/yed-live/ when changing the export rectangle to be smaller than high.

This used to work in the past as far as I can remember.

Support for multi-page PDF?

Is it possible to convert a single SVG to PDF in multiple pages of Letter or A4 size?
I suppose dividing the original SVG into smaller ones may work but in my case the SVG is created by another javascript and hence not easy to break down (at least I don't know how).

Rotation and correct positioning of text elements fails

Hi there,

There seems to be an issue with rotation and positioning of text elements.
Here's a fiddle to show my problem: jsfiddle
If I comment out the following code in my local fork, the text element will render as I want.
That will however break some of your code, I guess.

if (m[1] && m[2]) {
  var t1 = new _pdf.Matrix(1, 0, 0, 1, m[1], m[2]);
  var t2 = new _pdf.Matrix(1, 0, 0, 1, -m[1], -m[2]);
  resultMatrix = _pdf.matrixMult(t2, _pdf.matrixMult(resultMatrix, t1));
}

Can anything be done to solve my use case?

Best regards,
Henrik Skar

Images may not be ready yet when drawn to the canvas

During image conversion, we assign the image.src and immediately draw it to a canvas:

var imageUrl = node.getAttribute("xlink:href") || node.getAttribute("href");
var image = new Image();
image.src = imageUrl;
...
context.drawImage(image, 0, 0, width, height);

The assignment is asynchronous and we should wait for image.onload to fire before drawing it into the canvas.

Possible workaround:
Preload images before even starting the conversion. See attached file which outlines the approach (changes are marked by //*******************). Due to the change, the main function returns a Promise then.
svg2pdf_js.txt

Rather than preloading the images we should actually use image.onload where the image is converted. However, due to the asynchronous assignment, this would need additional changes in the other parts of the code.

Rectangular boxes enclosing graphic elements

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.

pt.saveGraphicsState is not a function

I've just downloaded your repo and I using your example in a Vue/Webpack application. I'm getting this error ...
Uncaught TypeError: pt.saveGraphicsState is not a function
at e (svg2pdf.min.js?95fe:formatted:2203)
at VueComponent.getPDF (Charts.vue?6ddd:125)

import * as JsPdf from 'jspdf';
import * as svg2pdf from 'svg2pdf.js';

      console.log('getPDF');
      // Get svg markup as string
      var svg = document.getElementById('svg-container');

      // create a new jsPDF instance
      const pdf = new JsPdf('l', 'pt', 'a4');

      // render the svg element
      svg2pdf(svg, pdf, {
        xOffset: 0,
        yOffset: 0,
        scale: 1
      });

      // get the data URI
      // const uri = pdf.output('datauristring');

      // or simply safe the created pdf
      pdf.save('myPDF.pdf');
    },

Cannot read property 'toFixed' of undefined

Hi,
I get the following error:

Cannot read property 'toFixed' of undefined TypeError: Cannot read property 'toFixed' of undefined
at it (jspdf.min.js?01f5:29)
    at Rt.toString (jspdf.min.js?01f5:29)
    at dt (jspdf.min.js?01f5:29)
    at Zt (jspdf.min.js?01f5:29)
    at Object.<anonymous> (jspdf.min.js?01f5:29)
    at Object.Ut.t.foo [as output] (jspdf.min.js?01f5:29)

Thanks,
Samim

External SVG Images break the export with Security Errors

Since canvas.toDataURL can throw a Security error if the canvas was tainted with an image that was loaded from a different origin, the export will fail completely in the case such images exist. We should try/catch that case and continue the export.
Missing images are better than no output at all most of the time.

Uncaught DOMException: Failed to execute 'getExtentOfChar'

Hi,

I have the following error in my browser console:

Uncaught DOMException: Failed to execute 'getExtentOfChar' on 'SVGTextContentElement': The charnum provided (0) is greater than or equal to the maximum bound (0).
    at file:///home/samim/workspace/svg/bundle.js:493:17744
    at d (file:///home/samim/workspace/svg/bundle.js:493:6223)
    at j (file:///home/samim/workspace/svg/bundle.js:493:17661)
    at U (file:///home/samim/workspace/svg/bundle.js:493:21556)
    at file:///home/samim/workspace/svg/bundle.js:493:18144
    at d (file:///home/samim/workspace/svg/bundle.js:493:6223)
    at z (file:///home/samim/workspace/svg/bundle.js:493:18126)
    at U (file:///home/samim/workspace/svg/bundle.js:493:21249)
    at file:///home/samim/workspace/svg/bundle.js:493:18144
    at d (file:///home/samim/workspace/svg/bundle.js:493:6223)

I also have uploaded the files to the following repo:

https://github.com/psamim/svg2pdf.js-test

(npm install , ./node_modules/.bin/webpack ./entry.js bundle.js, then open index.html)

Thanks,
Samim

Several tSpan's won't render correctly

Hi,

I'm working on implementing this script in a use case with Highcharts, and I've found that if there's several tSpans on the same line, svg2pdf.js won't render correctly. I've made a fork of my own, and was wondering if you'd want to take a look at it. Highcharts fork

The issue is that the svg2pdf.js doesn't seem to care about the x and the y coordinates. It also has problems rendering bold and italic properties inside tSpan elements.

Are you open for suggestions as in the form of pull request?

Best regards,
Henrik Skar

Different text alignment and font style in PDF

Hello.
Text in generated pdf doesn't have alignment and font size like in original svg.
Code:
const doc = new jsPDF(); result.forEach((page) => { svg2pdf(page, doc, { xOffset: 0, yOffset: 0, scale: 0.39, }); doc.addPage(); });
Example:
Original svg

PDF

PDF generated from canvas (convert svg to image and draw in canvas)

Maybe I did something wrong? Or need to add some settings to pdf?
Tried this simple code to check if will be some difference, nothing has changed.
doc.setFont('helvetica'); doc.setFontType('bold'); doc.setFontSize(20);
Thanks.

Markers ignore a stroke-width attribute of a path

Hi, there is a problem with rendering markers on paths with a stroke-width attribute.
An example from the slightly changed tests/test12.html:

Svg :

Rendered pdf :

`npm install` fails with some "Permission denied (publickey)" errors

Running npm install on the master branch today gave me the following:

npm WARN engine [email protected]: wanted: {"node":">=0.12"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm WARN engine [email protected]: wanted: {"node":">=4"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm WARN engine [email protected]: wanted: {"node":">=4"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm WARN engine [email protected]: wanted: {"node":">=4"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm ERR! git clone [email protected]:github:chick307/adler32cs.js Cloning into bare repository '/home/pharmony/.npm/_git-remotes/git-github-com-github-chick307-adler32cs-js-029b2fc0'...
npm ERR! git clone [email protected]:github:chick307/adler32cs.js Permission denied (publickey).
npm ERR! git clone [email protected]:github:chick307/adler32cs.js fatal: Could not read from remote repository.
npm ERR! git clone [email protected]:github:chick307/adler32cs.js
npm ERR! git clone [email protected]:github:chick307/adler32cs.js Please make sure you have the correct access rights
npm ERR! git clone [email protected]:github:chick307/adler32cs.js and the repository exists.
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js Cloning into bare repository '/home/pharmony/.npm/_git-remotes/git-github-com-github-andyinabox-FileSaver-js-59c031cf'...
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js Permission denied (publickey).
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js fatal: Could not read from remote repository.
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js Please make sure you have the correct access rights
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js and the repository exists.
npm ERR! notarget No compatible version found: adler32cs@'github:chick307/adler32cs.js#c6576b4ed91b4216973bf85d8478a49970934515'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.0.1"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! System Linux 4.9.49-moby
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! cwd /application/vendor/assets/javascripts/svg2pdf.js
npm ERR! node -v v0.10.29
npm ERR! npm -v 1.4.21
npm ERR! code ETARGET
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /application/vendor/assets/javascripts/svg2pdf.js/npm-debug.log
npm ERR! not ok code 0

Am I doing anything wrong?

Proper parsing of the font-family attribute

CSS allows to specify multiple fonts in a font-family attribute:

font-family: 'My own font', fantasy;

See:
https://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-family
https://www.w3.org/TR/SVG/text.html#FontFamilyProperty

Add support for inlining SVG data-urls

Right now, if there are images within an svg, the software loads those images and renders them into a canvas to include the bitmap into the resulting PDF. That's perfect to bitmap images, however if the image is actually an SVG (possibly even an svg data-url) then it would be awesome to include that image as a vector/SVG image, directly.

XML-escaped strings

svg2pdf should understand things like

font-family="&quot;Rounded Mplus 1c&quot;"
clip-path="url(&quot;#ygc4_0&quot;)"

Cannot read property 'toLowerCase' of undefined

Hi,

I get the following error in my browser console.

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at l (bundle.js:493)
    at k (bundle.js:493)
    at U (bundle.js:493)
    at Q (bundle.js:493)
    at Object.<anonymous> (bundle.js:58)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:40
    at bundle.js:43

I have update the my files at my repo, you can reproduce the error:

https://github.com/psamim/svg2pdf.js-test

(npm install , ./node_modules/.bin/webpack ./entry.js bundle.js, then open index.htmll)

Thanks,
Samim

Cannot read property 'toLowerCase' of undefined

Hi,

I get the following error:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at l (bundle.js:493)
    at k (bundle.js:493)
    at U (bundle.js:493)
    at Q (bundle.js:493)
    at Object.<anonymous> (bundle.js:58)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:40
    at bundle.js:43

I have my files at the repo below.

https://github.com/psamim/svg2pdf.js-test

(npm install , ./node_modules/.bin/webpack ./entry.js bundle.js, then open index.html)

Thanks,
Samim

Line element: not specified coordinate

SVG documentation says: If the attribute is not specified, the effect is as if a value of "0" were specified.
Origin in line below is (0|0), but (NaN|NaN) in PDF.

<line x2="300" y2="150" stroke-width="3" stroke="black"/>

Image transparency not working

Image transparency does not work. Anything that is behind the transparency of another image will not be visible.

Take this SVG as example, which contains two rectangular images that have a transparent background:
image_transparency.zip

It should look like

but actually looks like

I guess this is due to the addImage function using jpeg instead of png. However, just replacing it with png does not seem to work properly. According to the comment in svg2pdf, png is not supported by jspdf. However, looking at the jspdf addImage function it actually lists png as supported image type.

Is there something we can do or is it just not feasible?

Markers on lines and paths are not rendered in PDF

I used the following SVG as a test but the markers are not rendered in PDF.

<svg id="svg" width="400" height="400">
        <defs>
            <marker id="triangle-end" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="10" markerHeight="10" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z" fill="#FF0000"></path>
            </marker>
            <marker id="circle-start" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="10" markerHeight="10" orient="auto">
                <circle r="5" cx="5" cy="5" fill="#FF0000"></path>
            </marker>
        </defs>
        <line x1="100" y1="100" x2="200" y2="200" marker-end="url(#triangle-end)" marker-start="url(#circle-start)" stroke="#000000"></line>
    </svg>

Custom font usage

Is there anyway to add custom font in pdf generation?

I have a custom font in my svg included with a def like this:

<defs>
  <style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Indie+Flower);
  </style>
</defs>

Everything is fine in my svg, but when I convert to pdf, the default font is used.
Anything about this?

Many thanks

t.cloneNode is not a function

I'm getting the following error when trying to convert an SVG object using Vue.js

    at e (svg2pdf.min.js?95fe:31)
    at VueComponent.getPDF (Charts.vue?6ddd:110)

HTML
    <div id="svg-container">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
        <rect height="100" width="100" style="stroke:#f7f7f7; fill: #74ad24" />
      </svg>
    </div>

Vue imports
import * as JsPdf from 'jspdf-yworks';
import * as svg2pdf from 'svg2pdf.js';

Function 
    getPDF () {
      console.log('getPDF');
      // Get svg markup as string
      let svg = document.getElementById('svg-container').innerHTML;
      svg = svg.replace(/\r?\n|\r/g, '').trim();
      const pdf = new JsPdf('l', 'pt', 'a4');

      // render the svg element
      svg2pdf(svg, pdf, {
        xOffset: 0,
        yOffset: 0,
        scale: 1
      });

      // get the data URI
      // const uri = pdf.output('datauristring');

      // or simply safe the created pdf
      pdf.save('myPDF.pdf');
    },

SVG string
"<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"><rect height="100" width="100" style="stroke: rgb(247, 247, 247); fill: rgb(116, 173, 36);"></rect></svg>"

Polyline elements

Support for polyline elements.
https://www.w3.org/TR/SVG11/shapes.html#PolylineElement

foreignObject support

Hi,

I see that foreignObject SVG tag is not supported, for embedding HTML. Am I right?

Thanks

Support for clipPath elements

Font-family not caught from root element

Hi there yWorks,

It seems like font-family is not caught from the root element of the svg.
In my use case there are no serif font-families, and svg2pdf seems to put it to a serif.
Here's a demo for the issue: https://jsfiddle.net/henrikskar/mjpt2g7v/

Is there a way to fix this?

Thanks in advance for answers.

Best regards,
Henrik Skar

Implement vector-effect=non-scaling-stroke

Attribute vector-effect="non-scaling-stroke" for path, rect, line and others stops working.
No matter it's jsPdf v1.3.2 with svg2pdf 1.2.1 or jsPdf v2.0.0 with the latest version of svg2pdf.
In 1.1.1 it worked correctly.

Uncaught DOMException: Failed to execute 'getExtentOfChar' on 'SVGTextContentElement'

Hi,

I have the following error in my browser console:

Uncaught DOMException: Failed to execute 'getExtentOfChar' on 'SVGTextContentElement': The charnum provided (16) is greater than or equal to the maximum bound (16).
    at t.calculateInitialPosition (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:26:69370)
    at t.render (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:156850)
    at t.eval [as _next] (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:155676)
    at t.__tryOrUnsub (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:3228)
    at t.next (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:2419)
    at r._next (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:1471)
    at r.next (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:1142)
    at i.eval (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:40523)
    at i.emit (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:47422)
    at t.set [as json] (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:150073)

Well I know this issue looks like:

#16

But I'm using v1.3.0,and it does appear.

Thanks,

Shay

Differences in SVG and PDF

Hi,

When I convert my svg file some shapes are not converted, and some unknown shapes are added.

I have my files at the repo below. For example lines inside the top rectangle are not drawn and two small black boxes appear at the corner of charts.

Output PDF file

https://github.com/psamim/svg2pdf.js-test

(npm install , ./node_modules/.bin/webpack ./entry.js bundle.js, then open index.html)

Thanks,
Samim

issue with object transform

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:
<svg id="svgElement" width="600px" height="600px" GL="0 0 1315 301" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="matrix(1, 0, 0, 1, 0, 0)" clip-path="url(#mainClip5855)"> <rect x="0" y="0" width="1315" height="301" fill="white" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)"/> <g transform="matrix(1, 0, 0, 1, 30, 1)"> <g transform="matrix(1, 0, 0, 1, 180, 72)"> <g transform="matrix(1, 0, 0, 1, 0, 0)"> <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#SHADOW5859)"> <filter id="SHADOW5859" x="-100%" y="-100%" width="300%" height="300%"> <feGaussianBlur in="SourceAlpha" result="blur" wL="2"/> <feFlood in="blur" result="flood" flood-color="rgba(0, 0, 0, 0.3)"/> <feComposite in="flood" in2="blur" operator="in" result="comp"/> <feOffset in="comp" result="offsetBlur" dx="0" dy="2"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <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(#GRAD5860)" 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(#GRAD5861)" stroke-width="3" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 1.5, 1.5)"/> </g> <g transform="matrix(1, 0, 0, 1, 0, 0)"> <path d="M 0,2 L 0,2.0000000000000004 A 2,2 90 0,1 1.9999999999999996,0 L 130,0 L 130,0 A 2,2 90 0,1 132,1.9999999999999996 L 132,14 L 0,14 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)"/> </g> <text x="66" y="9.866995239257813" text-anchor="middle" opacity="0.54" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 0, 35)">Text 1</text> </g> </g> </g> </g> <clipPath id="mainClip5855"> <rect x="0" y="0" width="1315" height="301"/> </clipPath> <clipPath id="CLIP5858"> <path d="M 24,5 L 299,5 L 299,21 L 24,21 z" opacity="0.8" transform="matrix(1, 0, 0, 1, 0, 0)"/> </clipPath> <linearGradient x1="0" x2="129" y1="40.5" y2="40.5" id="GRAD5860" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#FFD378"/> <stop offset="1" stop-color="#FFC857"/> </linearGradient> <linearGradient x1="0" x2="129" y1="40.5" y2="40.5" id="GRAD5861" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#FFD378 "/> <stop offset="1" stop-color="#FFC857"/> </linearGradient> </svg>

thanks!

Exception when clipPath is not defined in the defs but in the same <g> element

An exception is thrown if an element has a clip-path and the referenced clipPath is not defined in the defs, but in the same element:

              <g transform="matrix(0 -1 1 0 30 50)">
                <text font-family="Arial" font-size="12px" font-style="normal" font-weight="normal" text-anchor="middle" fill="rgb(0,0,0)" fill-opacity="1" transform="translate(25 9)" clip-path="url(#ygc341_0)">
                  <tspan x="0" dy="0.9166666666666666em">LDC</tspan>
                  <tspan x="0" dy="1.5em">(Distributor)</tspan>
                </text>
                <clipPath id="ygc341_0">
                  <rect height="50" y="-9" x="-25" width="50"/>
                </clipPath>
              </g>

Throws Uncaught TypeError: Cannot read property 'hasAttribute' of undefined. This seems to be due to the implementation only looking in the defs elements:

      var clipPathNode = getFromDefs(svgIdPrefix.get() + clipPathId[1], defs); // <<<---- defs is empty

      var clipPathMatrix = tfMatrix;
      if (clipPathNode.hasAttribute("clipPathUnits") // <<<----- exception
          && clipPathNode.getAttribute("clipPathUnits").toLowerCase() === "objectboundingbox") {
        bBox = getUntransformedBBox(node);
        clipPathMatrix = _pdf.matrixMult(new _pdf.Matrix(bBox[2], 0, 0, bBox[3], bBox[0], bBox[1]), clipPathMatrix);
      }

Maybe the clipPathNode access should be checked for null, though ideally the actual clipPath element should be found. Attached is a repo of the exception:
broken-clippath_html.txt

unable to install via NPM

I'm unable to install via NPM
fatal: ambiguous argument '1.1.350': unknown revision or path not in the working tree.
Actually the tag in GitHub is v1.1.350

yworks / svg2pdf.js Goto Github PK

svg2pdf.js's People

Contributors

Stargazers

Watchers

Forkers

svg2pdf.js's Issues

Screenshot

Demo

Recommend Projects

Recommend Topics

Recommend Org