Question

我正在尝试从我为图像映射创建的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）上遵循了多个说明。

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

Answer 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中。这是一个美丽的景象！希望这能帮助那些寻求同样问题答案的人！

使用SVG并获取路径数据点

1 个答案: