流程圖控件GoJS教程：如何制作SVG（一）

---

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

制作SVG

GoJS具有創(chuàng)建SVG一個(gè)功能：Diagram.makeSvg，它返回一個(gè)新SVGElement與GoJS圖的表示。該方法有一個(gè)參數(shù)，一個(gè)JavaScript對(duì)象，其中包含幾個(gè)可定義的屬性，在文檔中進(jìn)行了枚舉。

SVG導(dǎo)出可用作PDF的內(nèi)容。大多數(shù)創(chuàng)建PDF的GoJS用戶都是通過(guò)將圖表導(dǎo)出到SVG或圖像并將其內(nèi)容放置在服務(wù)器或其他地方的PDF中來(lái)實(shí)現(xiàn)的。

該頁(yè)面與“ 制作圖像 ”頁(yè)面幾乎相同，該頁(yè)面顯示了如何渲染PNG圖像而不是SVG元素。

以下是在下圖上使用Diagram.makeSvg的幾個(gè)示例：

不帶任何參數(shù)或使用空的屬性對(duì)象調(diào)用makeSvg會(huì)導(dǎo)致場(chǎng)景的大小與圖的視口相同。

myDiagram.makeSvg（）;

使用“ scale”屬性設(shè)置為1的對(duì)象調(diào)用makeSvg會(huì)導(dǎo)致場(chǎng)景包含整個(gè)圖表，而不僅僅是視口中可見(jiàn)的區(qū)域。但是，將修剪文檔邊界周圍的空白區(qū)域。

myDiagram.makeSvg（{
   scale：1
}）;

設(shè)置scale屬性將創(chuàng)建一個(gè)縮放后的SVG場(chǎng)景，該場(chǎng)景恰好足以容納該圖。以下SVG的比例為2。

myDiagram.makeSvg（{
   scale：2
}）;

請(qǐng)注意，與圖像不同，如何選擇文本。

通過(guò)設(shè)置makeSvg的size選項(xiàng)可創(chuàng)建以下SVG。請(qǐng)注意，畫布是按比例縮放的，并且任何額外的空間都將放置在SVG的底部或右側(cè)。

myDiagram.makeSvg（{
  size: new go.Size(100,100)
}）;

也可以通過(guò)設(shè)置makeSvg的size選項(xiàng)來(lái)創(chuàng)建以下SVG，但僅設(shè)置寬度。高度將是統(tǒng)一包含圖表所需的任何大小。

myDiagram.makeSvg（{
   size：new go.Size（100，NaN）
}）;

下載SVG文件

如果您希望用戶下載SVG文件，則無(wú)需涉及Web服務(wù)器。請(qǐng)參閱樣本最小SVG。請(qǐng)注意，該示例僅下載一個(gè)SVG文件，但是該文件可以覆蓋整個(gè)文檔。

---

想要購(gòu)買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊【咨詢?cè)诰€客服】