使用 SVG 并获取路径数据点

Question

我正在尝试从我为图像映射创建的 SVG 文件中获取路径数据点。保存到 SVG 文件后，代码应如下所示：

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

但是，在保存 and/or 导出文件时，我得到了一堆乱码而不是数据点，如下所示：

<image id="image4125" opacity=".5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO4AAAEUCAYAAAAskArpAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAJYNJREFUeNrsnQd8FNX2x6dsb9nN 7qb3SrqU0ATpIcEnIA9QKRZEUB/6pINYEFFqDH8bwkOeFJGm0t5LqIbewZBAIKQXAtlNdtO37z83...

我尝试过同时使用 Adobe Illustrator CC 和 Inkscape。知道如何使用这些程序中的任何一个提取正确的数据点，或者为什么我得到的是乱码而不是数据点？我遵循了不同网站上的多个说明 (including this thread on Whosebug)。

现在我可以获取数据点来制作每个区域的矩形，但是矩形数据点相互重叠和冲突。我正在尝试创建多边形路径并提取数据点，以便每个形状都是独一无二的。非常感谢任何帮助。

Answer 1

经过一周的研究和流泪，我终于找到了解决方案。要使用 Adobe Photoshop 和 Illustrator CC 中包含的路径数据创建 SVG 图像，请按照以下说明操作：

使用 Photoshop 使用图像图层剪切图像。将文件另存为 .psd.
在 Illustrator 中打开 .psd 文件。然后，您将能够 select 您在 Photoshop 中剪切的不同图像。
Select 单张图片。打开图像描摹并使用剪影预设选项描摹图像。
单击“展开”按钮（您会注意到图像的轮廓现在在边缘周围有点；这些是您的数据点）。
打开调色板。使顶部颜色为白色，并穿过它的红线（这会删除轮廓的填充）。然后将底部颜色设为黑色（这会在点之间的跟踪线上进行跟踪）。
最后，在“属性”面板上，您需要将图像贴图设置为“多边形”（如果需要，您可以在下面添加一个新属性）。

在每个图像层上重复这些步骤后，您将使用以下设置将文件另存为 .svg 文件：

• SVG 配置文件：SVG 1.1 • 子集：None • 图片位置：Link • 保留 Illustrator 编辑功能：未选中（这将减小文件大小以获得更好的性能。 • CSS 属性：样式元素 • 输出更少的 tspan 元素：勾选 • 对路径上的文本使用textPath 元素：选中 • 响应式：选中

使用这些选项保存文件后，您就可以在 Sublime、WebStorm、TextEdit 等中打开 .svg，路径数据将包含在 HTML 中。这是一个美丽的景象！希望这对正在寻找我同样问题的答案的人有所帮助！

使用 SVG 并获取路径数据点

Using SVG and getting the path data points

svg

imagemap