我开始学习RaphaelJS，但这似乎是一个陡峭的学习曲线，因为我不太精通javascript。但它似乎是一个很好的图书馆，我愿意花时间去学习它。
我想知道的是：
如何在 RaphaelJS 中使用现有的矢量图像
（如果我下载“矢量”图像，我可以告诉 RaphaelJS 绘制坐标吗？）
有没有办法将图像（jpg、gif 或其他）转换为 RaphaelJS 可以使用的矢量图形。
我的困惑是，在示例页面上，图像是按照对我来说有意义的坐标绘制的。但是，如果从网上下载矢量图像，坐标在哪里？
我的目标是在我的网页上制作可点击的图像，就像 Australia 地图的 RaphaelJS 示例一样，上面有一个悬停事件。
【问题讨论】：
最容易阅读的矢量图像格式是 svg，因为 svg 是 XML，而 XML 只是纯文本。
使用 Illustrator 或 Inkscape 之类的工具将矢量图像转换为 svg，然后在文本编辑器中打开它。你会发现像<path /> 和<rect /> 这样的大多数形状在Raphael 中都有直接的等价性。例如，<path /> 对象在其d 属性中定义了路径坐标，它的语法与 Raphael 中的路径相同：
<path
style="fill:none;stroke:#000000;stroke-width:12"
d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
/>
您可以将其转换为 Raphael 的：
var path = paper.path(
"m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
);
path.attr({fill:'none',stroke:'#000000';'stroke-width':12});
请注意应用于对象和组的任何转换（<g /> 元素），您必须在 Raphael 中重复它们。例如，您看到以下内容：
<path
style="fill:none;stroke:#000000;stroke-width:12"
d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
transform="translate(-124,370)"
/>
然后在 Raphael 中创建路径后，您需要应用 translate():
path.translate(-124,370);
您可能可以编写一个脚本来将 svg 文件转换为 Raphael 语法，或者将 svg 文件作为文本加载到浏览器中，然后使用浏览器的 XML DOM 解析器对其进行处理并使用 Raphael 进行绘制。
【讨论】：