可获取SVG路径代码:一、图层右键选“复制SVG代码”直接粘贴;二、导出SVG文件后在文本编辑器中提取<path>的d属性值;三、预览模式下用开发者工具定位并复制DOM中<path>d属性。

如果您在使用PxCook设计工具时需要提取界面元素的SVG路径代码,以便在前端开发中直接复用矢量图形,则可能因导出功能隐藏或操作路径不明确而无法获取原始SVG数据。以下是获取SVG路径代码的具体操作方式:
一、通过图层右键菜单导出SVG代码
该方法适用于已将图形转为形状图层(非位图、非智能对象)且图层结构清晰的场景,可直接调用内置导出逻辑生成标准SVG路径字符串。
1、在图层面板中选中目标矢量图形所在的图层(确保图层类型为“形状”或“路径”,右下角显示“矢量”图标)。
2、右键点击该图层,在弹出菜单中选择“复制SVG代码”选项(部分版本显示为“复制SVG路径”)。
3、打开文本编辑器(如VS Code、记事本),按Ctrl+V粘贴,即可看到包含<path d="...">结构的完整SVG代码片段。
二、利用“导出为SVG文件”后提取路径数据
当右键菜单无“复制SVG代码”选项时,可通过导出SVG文件再解析其内部XML结构的方式获取路径信息,适用于旧版PxCook或图层嵌套较深的情况。
1、选中目标图层,点击顶部菜单栏的“文件 → 导出 → 导出为SVG”。
2、设置导出路径并保存为.svg后缀文件(例如icon.svg),注意取消勾选“嵌入资源”以保证路径字段纯净。
3、用文本编辑器打开该.svg文件,定位到<svg>标签内部首个<path>或<g>子节点,复制其中的d属性值(即路径指令字符串,如M10 10 L20 20 C30 30 40 40 50 50)。
三、通过开发者模式查看实时渲染DOM提取路径
若图形已在PxCook预览窗口中正确渲染,且软件基于Chromium内核构建,可启用内置开发者工具直接读取渲染后的SVG DOM结构。
1、在PxCook中打开设计稿,进入预览模式(快捷键通常为Ctrl+Shift+P或点击右上角“预览”按钮)。
2、按下Ctrl+Shift+I调出开发者工具,切换至Elements面板,使用选择器工具(Ctrl+Shift+C)点击目标图形区域。
3、在DOM树中找到对应的<svg>节点,展开其子元素,定位到<path>标签内的d属性内容,双击该属性值后全选复制。


















