流程圖控件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文件，但是該文件可以覆蓋整個文檔。

---

想要購買GoJS正版授權，或了解更多產品信息請點擊