一次svg加载问题的处理

最新推荐文章于 2025-11-30 22:19:10 发布

原创

最新推荐文章于 2025-11-30 22:19:10 发布 · 364 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #工作流 #svg

svg的渲染问题

背景

在一个使用bpmn渲染工作流的项目中，发现了图形偏移的问题，如图所示:

在这里插入图片描述

最初的解决方案是调整位置，结果并不能解决问题。

模板部分

 <div class="flow-containers">
     <el-container class="bpmn-el-container" style="align-items: stretch">
         <el-main style="padding: 0">
             <div ref="canvas" class="canvas" />
         </el-main>
     </el-container>
</div>

脚本部分（只展示了有用的）

const canvas = ref<HTMLElement>();
const modeler = ref<BpmnViewer>();
const taskList = ref([]);
const zoom = ref(1);
const xml = ref('');
const loading = ref(false);
const bpmnVisible = ref(true);
const historyList = ref([]);
    
// 让图能自适应屏幕
const fitViewport = () => {
   
   
  modeler.value.get<Canvas>(