问题描述
我有一个输出美国地图的 SVG 图形.美国每个州的布局如下此处.边框是通过 SVG 路径绘制的.每个状态都由其自己的 SVG 路径表示.
I have a SVG graphic which outputs the map of the United States. Each US state is laid out as shown here. The borders are drawn by means of SVG paths. Each state is represented by its own SVG path.
我想要做的是将几个相邻的州合并为一个区域，比如我希望加利福尼亚、亚利桑那和内华达显示为一个区域.为此，我需要将这 3 个状态中的每一个的路径合并为一个包含所有三个状态的路径.
What I want to do is to group several neighboring states into one area, say I want California, Arizona and Nevada to appear as a single area. For that I would need to merge the paths of each of these 3 states into one path which contains all three of them.
有谁知道一个程序可以自动为您执行此操作?或者是一种方法?
Does anyone know of a program which does this automatically for you? Or of an approach?
推荐答案
如果您有 Adobe Illustrator，则可以将 SVG 文件作为矢量图稿加载，使用联合形状模式"或合并路径查找器"将多个路径转换为单个路径(都在 Pathfinder 调色板中)，然后再次导出为 SVG.
If you have Adobe Illustrator you can load in an SVG file as vector artwork, turn multiple paths into a single one using either the Unite Shape Mode or the Merge Pathfinder (both in the Pathfinder palette), and then export as SVG again.
请注意，在您的链接到示例 每个状态的路径不重叠.因此，在这些路径上执行的任何路径联合都不会改变视觉外观；状态之间仍然存在差距.
Note that in your linked-to example the paths for each state do not overlap. As such, any path union performed on these paths would not change the visual appearance; there would still be a gap between the states.
如果您想在 Illustrator 中消除状态之间的间隙，您需要先在状态上使用 Stroke 以覆盖间隙，然后选择菜单命令 Oʙᴊᴇᴄᴛ ▸ Pᴀᴛʜ ▸ Oᴜᴛʟɪɴᴇ Sᴛʀᴏᴋᴇ，然后将这些与形状结合起来.
If you want to obliterate the gap between the states in Illustrator, you would need to first use a Stroke on the state(s) so that the gap is covered, then choose the menu command Oʙᴊᴇᴄᴛ ▸ Pᴀᴛʜ ▸ Oᴜᴛʟɪɴᴇ Sᴛʀᴏᴋᴇ, and then Unite these along with the shapes.
如果间隙很好，并且您只想将两个(或更多)状态视为一个对象，则不需要 Illustrator.相反，将多个状态放入一个组 () 并对该组而不是每个状态执行事件处理.
If the gap is fine, and you just want to treat two (or more) states as a single object, you don't need Illustrator. Instead, place the multiple states into a group (<g>) and perform event handling on this group instead of each state.
此示例显示组中的两个圆圈，其中事件和样式应用在组级别而不是形状级别:
http://phrogz.net/SVG/css-driven-styles.xhtml
This example shows two circles in a group with events and styles applied at the group level instead of the shape level:
http://phrogz.net/SVG/css-driven-styles.xhtml
编辑:如果您没有 Adobe Illustrator，则可以使用免费提供的 Inkscape 程序，它有自己的路径操作.
Edit: If you don't have Adobe Illustrator, you can use the freely-available Inkscape program, which has its own Path Operations.
这篇关于合并美国几个邻近州的 SVG 路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！