I'm working on a page to map images to the faces of a hexahexaflexagon (folding paper thingie). To do this I need to crop the images to six triangles in a hexagon, then position those triangles in strips for cutting and folding. I have this working in the browser (tested in recent Firefox, Chrome, and Edge) but when I print it ignores the clipPaths so instead of triangles extracted from the images, it shows the whole original image.
Snapshot of the page is here: https://flexagon-test.glitch.me/
Snapshot of the code: https://glitch.com/edit/#!/flexagon-test?path=js%2Fhexa.js%3A31%3A49
I've tried printing from each of the above printers and I've tried printing to different printers and to PDF and all have the same issue. I'm working on Windows.
I had this working before using canvas, but scaling made the results blurry so I moved it all to SVG, but if I can't print that's a showstopper, since the whole point is to print these.
Thanks in advance for any tips to solve this!
[Update] I tested on a Mac using print to PDF and it had the same problem, so this is not limited to Windows.
Related
I am experiencing two weird things happening with svg rendered in safari (works fine in Chrome/Edge/FF and heck even IE)
Lines not defined in SVG will appear and disappear randomly when panning around.
Lines defined in SVG might disappear randomly when panning around.
Not really that easy to describe so I made a video for it
https://youtu.be/BqlItab0k_g
I did not use any fancy SVG feature like script or media query. The only elements used are text/path/rectangle.
The SVG is generated by me and optimized using SVGO
[Codepen](https://codepen.io/alt22247/pen/vwzBmL)
The svg is base64 encoded since I can't upload svg to code pen. Had to use code pen instead of SO built in since the base64 encoded img text exceed SO limit. Feel free to decode it back to text.
I can't think of any way to mess up the SVG without causing a parse error so I believe this is a Safari bug. But we need to support Safari regardless (typical life of a web dev).
So the question is: What is causing this and is there any work around I can do rather than wait for Apple to fix it 10 years later?
I am really stressed out with this, i have built an entire designer with Fabricjs, gone through some right hoops with the text to make it work how it's needed. The problem is now when the data from the canvas is sent to the server for a full resolution render with NodeJs (fabricjs in node) the fonts are coming out looking different to they do in the browser.
All the fonts are installed on the server, and the correct font does render, it just seems to have different spacing between the characters even though the fabric version is the same and all the extension code is the same on browser and server side, all the TTF fonts are the same etc etc
Here is the browser version:
And here is the node js version:
As you can see the font is correct on the node one compared to the browser one, but it's being rendered slightly differently.
Is there a solution anyone knows of to fix this?
I don't believe that there is any way to solve this problem when using fabric.js
Text in fabric.js can be scaled arbitrarily, but then it is rasterized and displayed as a canvas object like any other image.
You can see in the fabric.js demos that the text will stretch like an image until your input is complete, then it re-renders to a new image at that scale.
Knowing that this is how fabric.js handles text, it is possible to select two scales that produce quite different results:
In the image above you can see that the two fonts are pretty much the same size, but the one on the right (slightly larger) has been rasterized such that it appears to have a bolder appearance. It's the best example I could reproduce with limited time.
This is why rendering the fabric.js objects in your browser at a smaller resolution than the server will lead to the font appearing slightly different.
If you try rendering the browser version at the same size as the server you are likely going to get the same results.
I'll try to be as clear as possibile (i'm not very good in english). I have a d3 static force graph and I need it to be cross browser. I already had a big problem with Internet Explorer, because it doesn't support SVG correctly. And i solved it by drawing elliptic arc without markers as suggested in another topic.
Now i have the following problem:
In every browser tested (Chrome, IE, Opera and Safari so far) my graph is shown correctly, in other words links length starts and stop exactly in the x,y coordinate of source and target node), while in firefox, using same data, every link go beyond the node x,y coordinate.
With Chrome i get this result
With Firefox i get this result
The code i'm using is the same for both browser, if you need it i can try to make a JSfiddle working.
Just want to get a sanity check on this before wasting too much time - does Batik actually have usable JavaScript support in its SVG display and rasteriser?
Problem: I've got code which generates SVG files, using a few thousand lines of fairly complex JavaScript. This works on Firefox, Chrome, Opera, Safari, and IE9. I've spent the morning trying to get Batik to display a sample SVG file (in Squiggle) and to rasterise it to png/pdf/etc. I've already fixed one problem (I had to move a text node into the DOM to get splitText to work), and the next problem is only a few lines down (nodeValue.trim() doesn't work on a text node).
Just about to give up and ignore Batik (v1.7, downloaded yesterday), unless someone has some positive experience of it?
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)