SVG 与 XML 商业图表实务（4）

look_w

版本 3：添加边框和文本下一个版本中增加了边框和表明美元价格的文本。变化如  所示。
清单 8. graph.php 的第三个版本

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<style type="text/css"> .close { fill-opacity: 0; stroke-opacity:0.8; stroke-width: 0.4; } .hilo { fill-opacity: 0.2; stroke-opacity:0.8; stroke-width: 0.1; } .range { text-anchor: end; font-size: 5pt; } </style> ...   <line x1="18" y1="10" x2="20" y2="10"    stroke="black" stroke-width="0.2" />   <line x1="20" y1="10" x2="20" y2="92"    stroke="black" stroke-width="0.2" />   <line x1="18" y1="90" x2="100" y2="90"    stroke="black" stroke-width="0.2" />   <line x1="100" y1="90" x2="100" y2="92"    stroke="black" stroke-width="0.2" />   <text x="18" y="12" class="range"><?php echo($yend); ?>   </text>   <text x="18" y="92" class="range"><?php echo($ystart); ?>   </text> </svg>

呈现图像的 PHP 代码没有变。仅仅在 Y 轴上画了几条线和一些文本。修改后的版本如  所示。
图 5. 带有边框和 Y 轴坐标值的图像版本 4：添加背景最后一步在数据后面增加了一点渐变填充的背景色来突出数据。 表明添加这种填充效果是多么简单。
清单 9. 渐进填充

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<svg style="shape-rendering:geometricPrecision;"   viewBox="0 0 100 100" xml:space="preserve"   xmlns:xlink="http://www.w3.org/1999/xlink"   xmlns="http://www.w3.org/2000/svg"   preserveAspectRatio="xMidYMid meet"> <defs> <linearGradient id="BackGradient" gradientUnits="objectBoundingBox" gradientTransform="rotate(90)">   <stop offset="0%" stop-color="#ccc"/>   <stop offset="50%" stop-color="white"/>   <stop offset="100%" stop-color="#ccc"/> </linearGradient> </defs> <style type="text/css"> .close { fill-opacity: 0; stroke-opacity:0.8; stroke-width: 0.4; } .hilo { fill-opacity: 0.2; stroke-opacity:0.8; stroke-width: 0.1; } .range { text-anchor: end; font-size: 5pt; } .background { stroke-width: 0; fill:url(#BackGradient); } </style>   <rect x="20" y="10" width="80" height="80" class="background" /> ...

代码中的新类 background 使用了 BackGradient。linearGradient 填充在浅灰到白色之间有三站，然后再过渡到浅灰。结果如  所示。
图 6. 最终的图像现在举例说明 SVG 中的缩放，我稍微修改了页面，增加了 <embed> 标记的宽和高。结果如  所示。
图 7. 图像的缩放各处都得到了完美的放大，没有任何锯齿。是不是棒极了？……我告诉您，太棒了。我特别喜欢 SVG 对单位的处理，它非常适合程序员，无需直接使用像素。
制作 SVG 的其他方法显然，PHP 不是创建 .svg 文件的惟一手段。任何编程语言 —— C#、C、Java™ 语言、Perl —— 都能创建 SVG 文本文件。Perl 的 Comprehensive Perl Archive Network (CPAN) 库中有一个 SVG 模块。PHP 有支持 SVG 的 PEAR 模块，使用 Java 的人可以考虑 Apache Foundation 的 Batik SVG Toolkit。
另一种替代语言是可扩展样式表语言转换（XSLT），很容易将 XML 数据文件转换成 .svg 文件。ChartSVG 是一个开放源代码的绘图项目，使用以 XSLT 编写的 SVG。
作为前端工具，Adobe Illustrator 和 GoLive 可以创建 .svg 文件。GNU Image Manipulation Program (GIMP) 也支持从路径导出 SVG。我最喜欢的绘图程序 OmniGraffle V4.0 也支持导出 SVG。至于科学应用程序，Mathematica 有一个导出 SVG 的扩展。