class="markdown_views prism-tomorrow-night">

你需要能看的懂SVG中path标签绘制的路径，本篇才对你有意义

实际效果如下图：
演示效果 go中用到的绘制规则和svg差不多，只是新增了一些新的方法。 本例中除了二次贝塞尔曲线绘制的正弦波需要研究之外，都是些简单的svg图形应用。

svg 曲线

元素用于定义一个路径。
下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath
  注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

svg绘制代码

go.js 中的绘制效果

go.js中的图形绘制和svg中的绘制方法差不多，差异在于svg中路径是path标签下d的参数。 go中路径则是存放在geometryString属性中的。 //SVG //GO geometryString:"M0 0L0 10" 如上所示，svg中迁移来的路径在go.js中并没有被正常加载，准确来讲 二次贝塞尔曲线的 映射T并没有被执行 $go(go.Shape, { geometryString: "M0 50 L20 50 L20 25 L80 25 L80 50L100 50 M20 50 L20 75 L80 75 L80 50 M25 48L25 35L35 35L35 48L45 48L45 35L55 35L55 48L65 48L65 35L75 35L75 48M25 68Q30 44,35 60T45 60T55 60T65 60T75 68", fill: "transparent", stroke: "red" }),

• 临时解决方案： 查过文档在go中对于svg的T属性也是支持的，但实际中并没有奏效。只有将二次贝塞尔曲线中的所有T属性换成Q属性。差异很明显，对照代码可看出。

$go(go.Shape, { geometryString: "M0 50 L20 50 L20 25 L80 25 L80 50L100 50 M20 50 L20 75 L80 75 L80 50 M25 48L25 35L35 35L35 48L45 48L45 35L55 35L55 48L65 48L65 35L75 35L75 48M25 68Q30 44,35 60Q40 76,45 60 Q50 44,55 60Q60 76,65 60Q70 44,75 68", fill: "transparent", stroke: "red" }), 想要实现的建议效果如图所示：