Comments (8)
I wouldn't exactly call this SVG code:
With the following SVG code from produced page
2013-01-012013-01-022013-01-032013-01-042013-01-052013-01-06050100150200250300350400450500550data1data2data3data4
We need a proper repro, here.
from svg2pdf.js.
Fixed the problem by including the css file contents into the defs section of the svg. the file above is the fixed version and works a treat now.
Sometimes I just need a prod and a nights sleep to figure things out.
Thanks
from svg2pdf.js.
the svg code works in your playground.
However when I run through my code, no luck. Does not seem to recognise the new css in the CDATA section
`
function SavePDFFile(props, width, height) {
var svg = document.getElementById("reportbox").children[0];
svg.getBoundingClientRect() // force layout calculation
const w = svg.width.baseVal.value
const h = svg.height.baseVal.value
svg.setAttribute('viewBox','0 0 '+ w +' '+ h);
svg.setAttribute('xmlns:xlink','http://www.w3.org/1999/xlink');
svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
$.get('/app-data/graphcss.txt', function (resp) {
// resp now should contain your CSS file content.
var def = Object.assign(document.createElement('style'), {textContent: resp});
def.setAttribute('type','text/css');
svg.children[0].prepend(def);
const doc = new jspdf.jsPDF(w > h ? 'l' : 'p', 'pt', [w, h])
doc.svg(svg, { w, h }).then(function(pdf) {
// Save the PDF
pdf.save('document-svg.pdf');
});
});
}
`
from svg2pdf.js.
Your code does not seem to wait for the CSS to actually load. Creating the style element will not synchronously load and apply the CSS. Please come up with a minimal executable repro if you think this is an issue with svg2pdf. From the code above, I think the issue is a timing issue with the CSS loading.
from svg2pdf.js.
How do you wait for CSS to load. Just putting together a basic page with the graph.
from svg2pdf.js.
This produces the same results as above
graphcss.txt
graphdemo.html.txt
from svg2pdf.js.
Works for me: https://jsfiddle.net/o6sv8bdh/
Please modify the fiddle and strip it down if you're still having problems.
You will get a lot more help on GitHub if you come up with minimal repros. Typically most people do not want to wade through tons of unrelated sources and your requests will be ignored instead. Thanks.
from svg2pdf.js.
Sebastian,
Thanks for your help.
The fiddle you set up works, noticed that you removed the CDATA tags from the css insertion into the svg element (which I thought was required). Did the same and all worked perfectly as expected within my page.
David
from svg2pdf.js.
Related Issues (20)
- Chinese is not supported HOT 2
- The exported PDF is not rendering custom fonts on some of the PDF text objects. HOT 8
- How to concatenate multiple SVG files? HOT 2
- Setting width and height as floats throws t. HOT 2
- How to ignore invalid dataurl HOT 6
- Accept spaces in data urls in image urls
- adding support for the CMYK color space HOT 5
- greek letters in text HOT 1
- tspan dx makes incorrect offset HOT 1
- Incorrect Gradient rendering in svg2pdf HOT 1
- Empty path def crashes jspdf HOT 1
- Chinese garbled characters HOT 1
- add method to add SVG from a String and a URL HOT 6
- RadialGradient is not shown correctly HOT 1
- Implement preserveAspectRatio for <image> tags HOT 5
- Embed images with SVG
- Support for letter-spacing Attribute in <text> Element HOT 4
- marker-start not rotating HOT 1
- Pattern is not applied correctly
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg2pdf.js.