G6
G6 copied to clipboard
antvis
火狐浏览器使用 group.addShape('image',{})引入svg图片 节点显示空白 不显示图片
问题描述
火狐浏览器使用 group.addShape('image',{})引入svg图片，节点显示空白 不显示图片
重现链接
..
重现步骤
import G6 from "@antv/g6";
const graph = new G6.Graph({ container: "container", animate: true, fitCenter: true, fitView: true, animateCfg: { duration: 500, // Number，一次动画的时长 easing: "linearEasing" // String，动画函数 }, modes: { default: ["drag-node", "drag-canvas", "zoom-canvas", 'create-edge'] }, defaultNode: { size: 30, // 节点大小 // ... // 节点的其他配置 // 节点样式配置 style: { fill: "steelblue", // 节点填充色 stroke: "#666", // 节点描边色 lineWidth: 1 // 节点描边粗细 }, // 节点上的标签文本配置 labelCfg: { // 节点上的标签文本样式配置 style: { fill: "#fff" // 节点标签文字颜色 } } }, // 边在默认状态下的样式配置（style）和其他配置 defaultEdge: { // 边样式配置 style: { opacity: 1, // 边透明度 stroke: "red" // 边描边颜色 }, // 边上的标签文本配置 labelCfg: { autoRotate: true // 边上的标签文本根据边的方向旋转 } }, nodeStateStyles: { // 鼠标 hover 上节点，即 hover 状态为 true 时的样式 hover: { fill: "green" }, // 鼠标点击节点，即 click 状态为 true 时的样式 click: { stroke: "#000", lineWidth: 3 } }, edgeStateStyles: { // 鼠标点击边，即 click 状态为 true 时的样式 click: { stroke: "steelblue" } } });
graph.on('aftercreateedge', (e) => { const { edge } = e; const source = edge.getSource(); const target = edge.getTarget(); console.log(source, target, '起点终点'); console.log('创建边实例', edge); });
graph.on('afterrender', () => { const nodes = graph.getNodes(); nodes.forEach(node => { const container = node.get('group'); container.addShape('image', { attrs: { x: -85 / 2, y: -85 / 2, width: 85, height: 85, img: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wAmHQJbNVdwAAAAAAAAAAABkARQnAQ',//这里替换链接 cursor: 'pointer', }, draggable: true, capture: true, name: 'icon-image-shape', }) }) });
const main = async () => { const remoteData = { // 点集 nodes: [ { id: 'node1', x: 100, y: 200, }, { id: 'node2', x: 300, y: 200, }, ], } // const response = await fetch( // "https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json" // ); // const remoteData = await response.json(); // const nodes = remoteData.nodes; // const edges = remoteData.edges; // window.setTimeout(() => { // nodes.forEach((node) => { // if (!node.style) { // node.style = {}; // } // switch ( // node.class // 根据节点数据中的 class 属性配置图形 // ) { // case "c0": { // node.type = "circle"; // class = 'c0' 时节点图形为 circle // break; // } // case "c1": { // node.type = "rect"; // class = 'c1' 时节点图形为 rect // node.size = [35, 20]; // class = 'c1' 时节点大小 // break; // } // case "c2": { // node.type = "ellipse"; // class = 'c2' 时节点图形为 ellipse // node.size = [35, 20]; // class = 'c2' 时节点大小 // break; // } // default: { // break; // } // } // }); // edges.forEach((edge) => { // if (!edge.style) { // edge.style = {}; // } // edge.style.lineWidth = edge.weight * 2; // 边的粗细映射边数据中的 weight 属性数值 // }); // graph.render(); // }, 1000); graph.data(remoteData); graph.render(); }; main();
// 鼠标进入节点 graph.on("node:mouseenter", (e) => { const nodeItem = e.item; // 获取鼠标进入的节点元素对象 graph.setItemState(nodeItem, "hover", true); // 设置当前节点的 hover 状态为 true });
// 鼠标离开节点 graph.on("node:mouseleave", (e) => { const nodeItem = e.item; // 获取鼠标离开的节点元素对象 graph.setItemState(nodeItem, "hover", false); // 设置当前节点的 hover 状态为 false });
// 点击节点 graph.on("node:click", (e) => { const clickNodes = graph.findAllByState("node", "click"); clickNodes.forEach((cn) => { graph.setItemState(cn, "click", false); }); const nodeItem = e.item; // 获取被点击的节点元素对象 graph.setItemState(nodeItem, "click", true); // 设置当前节点的 click 状态为 true }); // 点击边 graph.on("edge:click", (e) => { // 先将所有当前是 click 状态的边置为非 click 状态 const clickEdges = graph.findAllByState("edge", "click"); clickEdges.forEach((ce) => { graph.setItemState(ce, "click", false); }); const edgeItem = e.item; // 获取被点击的边元素对象 graph.setItemState(edgeItem, "click", true); // 设置当前边的 click 状态为 true }); window.setTimeout(() => { console.log(graph.save()) }, 5000)
预期行为
希望看到图片
平台
- 操作系统: [ Windows]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.6.4]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
