编写 SVG 脚本

Question

我正在考虑开发一个类似于 stackoverflow 的网站，但答案也可能包含绘图（在本例中为原理图）。我希望在答案表格中有一个区域，他们可以在其中制作这个原理图，而不需要特殊的插件等。

1. 我们是否已经或应该很快（1-2 年）达到 SVG 达到临界质量的程度，以便设计一个以脚本运行 SVG 作为主要功能的网站是合理的（即需要 Firefox 或其他 SVG/AJAX 兼容浏览器）？
2. 有哪些学习跨平台 SVG 脚本（可能是 javascript）的好资源？

——亚当·戴维斯

Answer 1

不幸的是，我没有答案，但我确实有三个项目可供您参考。

第一个是 活泼的内核 作者：丹·英格尔斯（是的， 这 丹·英格尔斯 (Dan Ingalls)，太阳实验室。它是在 SVG 之上用 JavaScript 实现的 Smalltalk 虚拟世界。更准确地说，它是使用 SVG 的 JavaScript 中 Squeak Smalltalk 的 Morphic GUI 框架的实现以及 JavaScript 中 Squeak Smalltalk（部分）的端口。

或者，如果您不是 Smalltalker 并且上述内容对您来说没有意义：它是一个操作系统，用 JavaScript 编写，JavaScript 解释器作为 CPU，SVG 作为显卡，浏览器作为计算机。

对于 JavaScript 和 SVG 来说，这是最极端的情况。而且它只 完全 尽管也有一个针对 Internet Explorer 的实验性端口，但它可以在 Safari 3 中运行，部分在 Firefox 3 中运行。

第二个项目是 John Resig 的 处理.js 处理可视化语言到 JavaScript 的端口。它使用 <canvas> element 而不是 SVG 正是因为你提到的问题。然而，此功能仅适用于 Firefox 3。

第三个是 JavaScript 中的实时 3D 由无用的泡菜。它用 仅有的 JavaScript、DOM 和 CSS 以及 不 SVG 或 <canvas> 或闪存或其他什么。 和 它可以移植到几乎所有浏览器，包括 Internet Explorer 7 及更高版本。做 2D 应该比这更容易。

在这三个项目之间，您应该能够找到一些灵感，也能找到一些尝试使用 JavaScript 和 SVG 或 JavaScript 和图形挑战极限的人，他们可以告诉您哪些有效，哪些无效。

结论：进行跨浏览器 SVG 或跨浏览器 <canvas> 几乎不可能，但有一点疯狂，跨浏览器图形 没有 SVG 或 <canvas> 是可能的。

Answer 2

拉斐尔 看起来对跨浏览器矢量图形问题很有趣。

Answer 3

SVGWeb 是一个使用 flash 向 IE 添加近乎原生的 SVG 功能的脚本。所有其他主要浏览器都支持 SVG。

http://code.google.com/p/svgweb/

Answer 4

1/可能永远不会 - 如果 IE 想添加它，那么我会认为它现在已经这样做了；但有一些解决方法使用 银光 和 壁虎 提供渲染。另一方面，有跨浏览器的图形 API 可用。我使用 XULRunner 和 SVG 完成了大型前端，但网络上没有任何东西必须满足 IE 的需求。

2/ 我最常提到的两个是 mozilla.org 上的 SVG 页面 和这个 SVG DOM 参考 。我所有的 SVG 链接都在这里 可口的

目前有一名编辑 http://www.bpel4chor.org/editor/;另外，如果您想要的只是所有弧都在网格上的原理图，那么您可以使用 div 和图像而不使用 SVG 很好地做到这一点。或者你可以直接去 低保真路由

Answer 5

正如@jwmittag 提到的 <canvas> 是一个选项。

它适用于 Saffari 和 Firefox 3、Opera 9 以及 人们正在开发对 IE 的支持.

您可以轻松捕获与当前工具和属性相关的鼠标点击。在每个页面显示上重新绘制画布。

我刚刚完成一个项目 <canvas> 它是一个简单且非常强大的 API，特别是如果您曾经做过任何 OpenGL 或 Cairo 工作的话。

祝你好运，听起来是一个很酷的项目。