I have attached a background image, when I try exporting it to a PNG, the background is getting removed. I am using the
makeImage() function of GoJS.
makeSvg() function is attaching the background image in the image tag, which when I am opening on another system, is not showing. I am not able to attach the sample SVG, but it is something like below.
image x=“0” y=“0” width=“842” height=“569” xlink:href=“file:///D:/Ab/Application/goJs/Demo/Sample_Floorplan.jpg” preserveAspectRatio=“xMidYMid slice” transform=“matrix(1, 0, 0, 1, 0, 0)”
June 3, 2019, 10:01am
How are you showing a background image on screen?
Clearly the generated SVG is referring to a local file on your machine. You need to serve that image at a URL that all of your users can reach.
But don’t you think that the background image should be combined with the elements on the top as that is why we are exporting it into a PNG/ SVG so as to access the flow diagram offline. Does GoJs have this functionality?
June 3, 2019, 12:24pm
In that case you will need to customize the
Diagram.makeSvg function by using its elementFinished option: Diagram | GoJS API
I think you’ll want your
elementFinished function, when the element was for a Picture, modifies the resulting SVG element by inserting the contents of the SVG file.
Hi, when exporting the diagram as SVG (makeSVG), is it possible to embed nodes images (SVG Picture) instead of using xmlns:xlink?
Right now I’m retrieving those SVG images from a server, and when opening a saved SVG file and the server if offline, the nodes are showing empty. Also in the case of distributing the diagrams to people without access to the server they won’t be able to see it correctly.
Thanks for your help in advance.
I haven’t found a way to do this so I suspect the answer is ‘no’ but I’ll ask anyway, in case I am missing something or am being stupid.
I’m making an image of my diagram with diagram.makeSvg and saving that to a .SVG file for display later. The diagram contains Picture elements with .source set to a URL of an SVG file. The result of the makeSvg() call contains those URLs rather than the contents of what they point to.
The problem is that these generated SVG files from makeSvg need to work in …
@Walter for your quick reply. Can you please explain me with an example? I am attaching a jpg in the go.Picture, what should I set in the setAttribute?
June 4, 2019, 10:38am
For image files you can render them to data: URIs by calling
HTMLCanvasElement.toDataURL() - Web APIs | MDN. There are lots of examples of this on the web.
Yes, I tried this earlier. We face one issue here, it only print the things which are visible on the screen to the user. Whatever is there below when we scroll up, it does not show.
June 4, 2019, 10:52am
Could you please update your forum profile with correct information so that we can identify your support contract?
We are currently at very early stage of the project and deciding on the library that we will be using with our proposed diagram editor.
Had a conversation with
@Jason stewart from your team regarding exploring the capabilities for the GoJS library.
June 4, 2019, 12:03pm
Could you please describe what you mean? How are you calling
June 4, 2019, 5:11pm
You can use
makeSVG in order to edit every SVG
<image> element so that the
href refers to a Base64 encoded string instead of a URL. I think this is what you want.