使用 SVG 并获取路径数据点答案

【问题标题】：Using SVG and getting the path data points使用 SVG 并获取路径数据点
【发布时间】：2015-03-23 22:12:23
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

你不能。您使用的过程已将 SVG 数据转换为光栅图像。你无法再次找回它，因为它已经无法找回。
您知道获取数据点的更好方法吗？我很难找到一个好的参考。我只是在 Photoshop 中创建图层，并剪掉图像。从那里开始，我不确定如何使用数据点将这些图像转换为 SVG。我花了一周的时间研究，但仍然无法找到更好的方法来做到这一点，我需要一些指导或指出正确的方向。

标签： svg imagemap

【解决方案1】：

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

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

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

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

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

【讨论】：