修改 Raphael 的现有路径？答案

【问题标题】：modify existing paths for Raphael?修改 Raphael 的现有路径？
【发布时间】：2012-10-12 14:53:27
【问题描述】：

我有一个 JS 对象，Raphael 使用它来生成可点击的 SVG 地图。我需要修改一些路径。有没有一种工具可以让我以用户友好的方式做到这一点？我不想使用试错法来摆弄数字，我想拖放路径/锚点。我可以以某种方式将坐标导入 Illustrator/Dreamweaver/任何其他工具吗？

谢谢。

这是 JS 对象的样子：

map.coords   = [
{ type:"path" ,id:"K15" ,d:"/*edited out*/"},
{ type:"rect" ,id:"K14" ,x:"496" ,y:"386" ,width:"9" ,height:"5"}
];

下面是标记的样子（svg 元素内有 Raphael 生成的标记）：

<div style="position: relative;">
    <div id="mapOverlay" style="position: absolute; top: 0; left: 0; z-index: 2">
    <svg height="777" width="777" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <desc>Created with Raphaël</desc>
        <defs></defs>
        <path fill-opacity="0" stroke-width="0.25" style="stroke-width: 0.25; fill-opacity: 0;" d="[/*edited out*/]" stroke="#000000" fill="#000000"></path>
    </svg>
    </div>
<img src="map.jpg" alt="Interactive Map">
</div>

【问题讨论】：

您是否只是在寻找一个好的工具来操纵路径？你看过 SVG-edit 吗？ svg-edit.googlecode.com/svn/branches/2.5.1/editor/… 您可以按照您描述的方式操作路径，但可以轻松检索或使用原始 SVG 标记。我学会了爱它！
@KevinNielsen：看起来不错。我该怎么办？需要获取，将其保存为格式正确的 SVG 并将其导入 SVG-edit？我可以在上面叠加一张图片吗（我有一张供更新的参考）？
嘿@dalbaeb，我通常使用这种方法。创建 svg 并创建一个简单的路径，然后切换到 svg 视图，将路径字符串复制到您创建的路径的 d 属性上，切换回编辑器并进行更改/添加，然后抓住修改后的 d 属性。所以我真正要移入/移出编辑器的是路径字符串。它并不完美——但它很有效。

标签： javascript map svg raphael coordinates

【解决方案1】：

虽然凯文尼尔森对这个问题的评论是一种完全可行的方法，但在等待时，我想出了如何在 Illustrator 中做到这一点。方法如下：

抽出<svg>标签的全部内容并保存为单独的文件
将此添加到文件的开头：
在 Illustrator 文件中 -> 打开。如果它没有打开，您可以通过W3 validator 运行它以查看它有什么问题。确保在设置中将 SVG 1.1 指定为文档类型。
然后您可以在 Illustrator 中使用“文件”->“放置”命令叠加任何图像（最好是相同尺寸）。

【讨论】：

我可以用它来摇滚乐（尽管我会尽量避免使用 Illustrator）！
@KevinNielsen 为什么？因为它是专有的？
与其说因为它是专有的，不如说是因为它加载缓慢而且我是个脾气暴躁的人 =)