I recently discovered html2canvas. Unfortunately, I cannot seem to get an SVG to render properly. I am using Chrome but it renders differently (but not how it is displayed) in every browser I have tried.
I have a test project here:
http://psychro.me/html2canvas/
Any help would be greatly appreciated. Thanks.
It is not printed, because the svg has no width and height like this
<svg width="500px" height="500px"
Related
I have an SVG image inside an SVG g element that has a clipPath applied to to it. Though the clipPath renders correctly and as expected on Chrome and Safari only part of the image seems to appear on Firefox (I'm on Firefox version 88.0.1 - OSX)
Here is a link to a jsfiddle that recreates the problem
On Chrome it renders properly
On Firefox only part of the star renders
The other strange thing is that if I duplicate the path within the clipPath of the image seems to work in Firefox (jsfiddle example here) - which makes no sense to me.
<clipPath clipPathUnits="objectBoundingBox" id="clipPathMask-0f05a0aa-4fb7-420f-aea5-ad7fc9c9a127" transform="scale(0.005784982935153583 0.0038563296140941045)">
<path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path>
<path d="M20.9,95.6l5.6-32.8L2.7,39.6l32.9-4.8L50.3,5L65,34.8l32.9,4.8L74.1,62.8l5.6,32.8L50.3,80.1L20.9,95.6z"></path>
</clipPath>
Has anyone come across this before and knows whats happening here?
I have generated a large SVG file, but when viewing it in a web browser I can't zoom in far enough to see all the detail in it. Is there something I can do in the SVG source code to allow this?
The SVG is very tall and thin (1000px wide, 11000px high). When I open it in a browser by default the browser fits the whole thing into the view port, so it's just like a thin stripe down the center of the page - far too zoomed out to actually see anything. The browser allows me to zoom in to some extent, but only up to a certain point and then further zooming is not possible. Is this something that I can control from the SVG code?
The <svg> element looks like this:
<svg viewBox="0 0 1000 11000" version="1.2" xmlns="http://www.w3.org/2000/svg">
Please note, I am not embedding the SVG in an HTML page, I just have an SVG. Since the most common SVG viewer is a web browser I want people to be able to view the document properly in one.
Add a suitable height to the SVG. That will force the browser to render it that tall (and the user has to scroll to see the whole thing). For example 5000px tall:
<svg height="5000" viewBox="0 0 1000 11000" version="1.2" xmlns="http://www.w3.org/2000/svg">
I am viewing the following svg http://pastebin.com/pNdNEQ6z in my Firefox and chome.
Can someone tell me why the two graphs are somewhere in der middle of y an not starting at the top? If you change the viewbox to "0 200 650 800" everything is fine. why 200? I have played with preserveAspectRatio="xMidYMin" but this is not doing anything.
At the end of the day I want to display both charts completely visible starting at the top? And I would like to understand why it is not doing so right now :-)
Your problem is that you had a typo on your first embedded <svg> element (you had hight="400" instead of height="400") and were not using a …YMin alignment on the outer.
Fixed, it looks like this:
<svg … preserveAspectRatio="xMidYMin">
<svg … height="400">
Demo: http://jsfiddle.net/WAVZj/
I have an SVG I am building with Javascript. I load in a large SVG file, break it apart into pieces all drawn with paths, and place each element in my page. I'm only using these SVGs as masks for other images I am loading. Basically my structure is like the following.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="26.750152587890625 10.117172241210938 197.24969482421875 348.1596221923828" width="197.25" height="348.16015625">
<mask id="designMask" maskContentUnits="objectBoundingBox">
<g id="CutContour1bg">
<path d="[my path coords]" style="fill:#FFFFFF;">
</g>
</mask>
<image href="http://myImage.jpg" style="mask: url(#designMask);" width="800px" height="800px" x="26.75" y="10.1171875">
</svg>
This renders the image being masked by my SVG perfect, in FF, IE9, Chrome, Safari 5.1 (desktop). In mobile safari however, the image does not render properly. I trace out coords of the mask, they are all correct. In FF I can see the SVG load (all black) then disappear as it becomes the mask. (I am waiting until the design is loaded, then wrap my <g> with <mask> since FF has an issue looking for the mask before the content is loaded.
This tells me the mask's position is exactly where it needs to be, but the maskContentUnits are not. They remain in the top left corner instead of the object's bounding box, like I'm telling it. I can barely see part of the image in the mask, so the mask units are correct, but I cannot get the maskContentUnits to work or be read in mobile safari.
Has anyone ever seen this issue, or any idea how to correct it? I hate having this work everywhere except mobile safari, as it is meant to mostly work on mobile... which defeats its not purpose haha.
Thanks!
I haven't found a way to make maskContentUnits work properly in mobile safari yet, I'm pretty sure it's just not recognized yet like other browsers. But I figured out a 'hack' to make the example work.
The issue is, the mask area resides in the top left corner of the browser, rather than of the svg object being used as the mask. So if you have an svg in the middle of your page, the image being masked will not follow the same positioning.
The way I found for it to work, is, I wrapped the svg inside a div with the same width as the svg, and modify the position of the div instead of the svg. This way the mask is technically still in the 'top left' corner, but of the div rather than the offset position of the svg.
If anyone finds a better way, to make maskContentUnits render proper in mobile safari, I'd like to hear it!
I'm using FabricJS and I encounter a problem with the display of my SVG in the canvas:
the result is displayed outside the selection box of fabricJS (due to a translation ?)
the anchors of the selection disappear after a transformation and then it's impossible to find them back.
Here is a screenshot :
I'm using an output SVG of Potrace and I think it's the origin of my issue.
Here is the code of the SVG: SVG code in pastebin
You can test it with FabricJS on this page: FabricJS Kitchensing example.
Just paste the code of the SVG in the "Load SVG" area, then resize and rotate the section box to display the SVG.
Do you know the part of my SVG code or the part of the fabricjS code that causes the issue ?
If so, can I change it easily by myself ? If not, is it possible for anybody to correct or locate the possible mistake?
Thank you very much for your help.
EDIT: seemingly, FabricJS doesn't like this line of the SVG:
<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none">
And more especially the translate and scale attributes… How to fix it?
EDIT2: the solution would be that the translate and the scale are respectively equal to (0,0) and (1,1) or, better, that they're applied to the coordinates.
Does anybody have an idea to do that with Potrace or JS script?
2 years after, fabricJs is now able to fully parse and manage this SVG.
Just paste the old pasteBin SVG code in the kitchenSink demo and you will see that it loads fine.
Lots of improvement happened recently in the SVG parsing area.
I know this is not an answer as stackoverflow user would expect, but better to know that to think this is may still be a problem.