logo GoJS教程2020 我也要发布文档

流程图控件GoJS教程:如何制作SVG(一)


GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

制作SVG

GoJS具有创建SVG一个功能:Diagram.makeSvg,它返回一个新SVGElement与GoJS图的表示。该方法有一个参数,一个JavaScript对象,其中包含几个可定义的属性,在文档中进行了枚举。

SVG导出可用作PDF的内容。大多数创建PDF的GoJS用户都是通过将图表导出到SVG或图像并将其内容放置在服务器或其他地方的PDF中来实现的。

该页面与“ 制作图像 ”页面几乎相同,该页面显示了如何渲染PNG图像而不是SVG元素。

以下是在下图上使用Diagram.makeSvg的几个示例:


不带任何参数或使用空的属性对象调用makeSvg会导致场景的大小与图的视口相同。



myDiagram.makeSvg();


使用“ scale”属性设置为1的对象调用makeSvg会导致场景包含整个图表,而不仅仅是视口中可见的区域。但是,将修剪文档边界周围的空白区域。

myDiagram.makeSvg({
   scale:1
});
设置scale属性将创建一个缩放后的SVG场景,该场景恰好足以容纳该图。以下SVG的比例为2。
myDiagram.makeSvg({
   scale:2
});

请注意,与图像不同,如何选择文本。

通过设置makeSvg的size选项可创建以下SVG。请注意,画布是按比例缩放的,并且任何额外的空间都将放置在SVG的底部或右侧。
myDiagram.makeSvg({
  size: new go.Size(100,100)
});
也可以通过设置makeSvg的size选项来创建以下SVG,但仅设置宽度。高度将是统一包含图表所需的任何大小。
myDiagram.makeSvg({
   size:new go.Size(100,NaN)
});

下载SVG文件

如果您希望用户下载SVG文件,则无需涉及Web服务器。请参阅样本最小SVG。请注意,该示例仅下载一个SVG文件,但是该文件可以覆盖整个文档。


想要购买GoJS正版授权,或了解更多产品信息请点击【咨询在线客服】