#2294·LogicFlow

[Bug Report]: 使用插件 Snapshot 导出svg格式的图片时,配置了 partial: false,但只导出了可见区域的流程图

Author: wei-X7Created Oct 17, 2025Updated Jun 8, 2026
Labelstype:bugpriority:P1

发生了什么?

使用插件 Snapshot 导出图片时,选择导出 png 格式的图片可以导出完整的流程图,选择导出 svg 格式只导出了可见区域的流程图。参数 partial 对 svg 无效。

操作步骤:放大至只显示部分区域后,分别保存 png 和 svg 格式的图片。

放大后的效果: Image

PNG 格式: Image

SVG 格式: Image

xml
<template>
  <div>
    <div class="container" ref="container"></div>
    <button @click="handleClick('png')">保存PNG</button>
    <button @click="handleClick('svg')">保存SVG</button>
  </div>
</template>

<script>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/lib/style/index.css";
import { Snapshot } from "@logicflow/extension";

export default {
  name: 'lf-Demo',
  data() {
    return {
      renderData: {
        // 节点数据
        nodes: [
          {
            id: '21', // 节点ID,需要全局唯一,不传入内部会自动生成一个ID
            type: 'rect', // 节点类型,可以传入LogicFlow内置的7种节点类型,也可以注册自定义节点后传入自定义类型
            x: 100, // 节点形状中心在x轴位置
            y: 100, // 节点形状中心在y轴的位置
            text: 'Origin Usage-rect', // 节点文本
            properties: { // 自定义属性,用于存储需要这个节点携带的信息,可以传入宽高以重设节点的宽高
              width: 160,
              height: 80,
            }
          },
          {
            id: '50',
            type: 'circle',
            x: 300,
            y: 300,
            text: 'Origin Usage-circle',
            properties: {
              r: 60,
            }
          },
        ],
        // 边数据
        edges: [
          {
            id: 'rect-2-circle', // 边ID,性质与节点ID一样
            type: 'polyline', // 边类型
            sourceNodeId: '50', // 起始节点Id
            targetNodeId: '21', // 目标节点Id
          },
        ],
      }
    }
  },
  mounted() {
    this.lf = new LogicFlow({
      container: this.$refs.container,
      grid: true,
      plugins: [Snapshot]
    });
    this.lf.render(this.renderData);
  },
  methods: {
    handleClick(fileType) {
      this.lf.getSnapshot("test", {
        fileType,
        partial: false
      })
    }
  }
};
</script>

<style scoped>
.container {
  width: 800px;
  height: 500px;
}
</style>

logicflow/core版本

2.1.2

logicflow/extension版本

2.1.4

logicflow/engine版本

No response

浏览器&环境

Chrome